More updates

.gitignore

@@ -13,6 +13,6 @@
 /tags
 /extension/background.js
 /extension/background.js.map
-/extension/sidebar.js
-/extension/sidebar.js.map
+/extension/content.js
+/extension/content.js.map
 /pure_tabs.xpi

README.md

@@ -1,25 +1,7 @@
-# PureTabs
+# Exemple of Firefox extension with PureScript
 
-Firefox extension to show tabs as a tree, written in Purescript and heavily inspired by
-[TreeTabs](https://gitlab.com/kroppy/TreeTabs). 
+Basically just a stripped out version of : https://github.com/Kazy/PureTabs
 
-Massive WIP for now. `TreeTabs` is currently unmaintained and the code is quite difficult to follow.
-This is an occasion for me to both learn Purescript and re-write it in a cleaner and more
-maintainable way. Any criticism is welcome.
+Tests can be run with `spago test` [TODO : for some reason setting npm "test" script to this value won't work]
 
-## TODO
-
-- [x] Update title when the title of a tab change
-- [x] Support favicon
-- [x] Add delete button
-- [x] Tab selection
-- [x] Moving a tab
-- [ ] Detaching a tab:
-  - [x] Using Firefox's tabs
-  - [ ] Drag and dropping using PureTabs directly.
-- [ ] Actually show tabs as a tree
-- [x] Session save/import
-- [x] Tab groups
-- [x] Tab hiding
-- [ ] Tests
-- [ ] Package the extension
+Javascript source maps won't work out-of-the-box if JS source files are in e.g. `extension/src` instead of `extension`. This can surely be solved using this issue : https://github.com/parcel-bundler/parcel/issues/3750

extension/manifest.json

@@ -1,31 +1,22 @@
 {
   "manifest_version": 2,
-  "name": "Pure Tabs",
-  "description": "Tree tabs extension written in PureScript",
+  "name": "Firefox extension example",
+  "description": " extension written in PureScript",
   "version": "0.1.0",
-  "homepage_url": "https://github.com/Kazy",
   "browser_specific_settings": {
     "gecko": {
-      "id": "puretabs@boullier.bzh"
+      "id": "new_ext@mozilla.org"
     }
   },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["content.js"]
+    }
+  ],
   "background": {
-    "scripts": [
-      "background.js"
-    ],
+    "scripts": ["background.js"],
     "persistent": true
   },
-  "sidebar_action": {
-    "default_title": "Pure Tabs",
-    "default_panel": "sidebar.html"
-  },
-  "permissions": [
-    "<all_urls>",
-    "tabs",
-    "sessions",
-    "storage",
-    "unlimitedStorage",
-    "bookmarks",
-    "tabHide"
-  ]
+  "permissions": ["tabs", "storage"]
 }

extension/sidebar.css

@@ -1,267 +0,0 @@
-:root {
-  --bar-black-color: #0c0c0d;
-  --group-bar-size: 25px;
-  --top-menu-height: 20px;
-}
-
-html,
-body,
-#content {
-  width: 100%;
-  height: 100%;
-  overflow: hidden visible;
-  background-color: #f9f9fa;
-}
-
-#bar {
-  width: 100%;
-  height: 100%;
-}
-
-#top-menu {
-  width: 100%;
-  height: var(--top-menu-height);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-#top-menu ul {
-  background-color: var(--bar-black-color);
-  color: #f9f9f2;
-  list-style-type: none;
-  margin: 0 0 5px 0;
-  padding: 0;
-}
-
-#top-menu li {
-  display: inline-block;
-  width: 25px;
-  height: var(--top-menu-height);
-  text-align: center;
-  padding: 0 7px 0;
-  border-right: solid #cfcfcf 1px;
-}
-
-#bar-list {
-  margin-top: 1px;
-  background-color: var(--bar-black-color);
-  width: 100vh;
-  height: var(--group-bar-size);
-  position: fixed;
-  transform-origin: left top;
-  transform: rotate(-90deg) translateX(-100%);
-}
-
-#bar-list-group {
-  margin: 0 auto;
-  height: 100%;
-}
-
-#bar-list-group li {
-  padding-right: 10px;
-  padding-left: 10px;
-  margin-left: 1px;
-  float: right;
-  height: 100%;
-  line-height: calc(var(--group-bar-size)*0.80);
-  list-style: none;
-  border-left: solid #cfcfcf 1px;
-}
-
-#bar-list-group li:first-child {
-  border-right: solid #cfcfcf 1px;
-}
-
-.group-name {
-  color: #f9f9f2;
-}
-
-.group-name.active-group {
-  background-color: white;
-  color: black;
-}
-
-.group-name:hover {
-  background-color: white;
-  color: black;
-}
-
-.group-deletion-button {
-  margin-right: 5px;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.bar-tabs {
-  width: calc(100% - var(--group-bar-size));
-  height: calc(100% - var(--top-menu-height));
-  margin-left: var(--group-bar-size);
-}
-
-.bar-tabs:not(.bar-tabs-active) {
-  display: none;
-}
-
-.tabs {
-  padding-top: 1px;
-  width: 100%;
-  height: 100%;
-}
-
-.inner-tabs {
-  overflow-y: auto;
-  scroll-behavior: smooth;
-}
-
-.tab {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border: solid #cfcfcf 1px;
-  margin-bottom: 1px;
-  padding-left: 2px;
-  padding-bottom: 1px;
-  width: 100%;
-  height: 22px;
-  background-color: #ffffff;
-  scroll-margin-top: var(--top-menu-height);
-}
-
-.tab.active {
-  background-color: #d4f2fc;
-}
-
-.is-not-dragging .tab:hover {
-  background-color: #cccccc;
-}
-
-.is-not-dragging .tab.active:hover {
-  background-color: #b2dceb;
-}
-
-.tab.discarded {
-  color: grey;
-}
-
-.tab.being-dragged {
-  border: dashed black 1px;
-}
-
-.tab-title {
-  display: inline-block;
-  align-self: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
-
-.tab-favicon {
-  /* necessary to avoid flicker when hovering the close button */
-  flex-shrink: 0;
-  display: inline-block;
-  background-size: cover;
-  background-position: center;
-  width: 15px;
-  height: 15px;
-  margin-left: 5px;
-  margin-right: 5px;
-  vertical-align: middle;
-}
-
-.tab.discarded > .tab-favicon {
-  filter: brightness(70%);
-}
-
-/*Huge thanks to @tobiasahlin at http://tobiasahlin.com/spinkit/ */
-.three-dot-bounce {
-  margin: 0px 6px 0px 6px;
-  width: 15px;
-  text-align: center;
-}
-
-.three-dot-bounce > div {
-  margin-top: 0;
-  /* this margin-bottom is used to center the three dots */
-  margin-bottom: 4px;
-  padding-bottom: 0;
-  padding-top: 0;
-  width: 3px;
-  height: 3px;
-  background-color: #333;
-
-  border-radius: 100%;
-  display: inline-block;
-  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-}
-
-.three-dot-bounce .three-dot-bounce-1 {
-  animation-delay: -0.32s;
-}
-
-.three-dot-bounce .three-dot-bounce-2 {
-  animation-delay: -0.16s;
-}
-
-@keyframes sk-bouncedelay {
-  0%, 80%, 100% { 
-    transform: scale(0);
-  } 40% { 
-    transform: scale(1.0);
-  }
-}
-
-.close-button-parent {
-  width: 17px;
-  height: 17px;
-  margin-right: 4px;
-  display: none;
-}
-
-.tab:hover > .close-button-parent {
-  display: inline-block;
-}
-
-.close-button-parent:hover {
-  background-color: #707070;
-}
-
-.close-button-outer {
-  height: 15px;
-  width: 2px;
-  margin-left: 6.2px;
-  margin-top: 1.2px;
-  background-color: black;
-  transform: rotate(45deg);
-  z-index: 1;
-}
-
-.close-button-inner {
-  height: 15px;
-  width: 2px;
-  background-color: black;
-  transform: rotate(90deg);
-  z-index: 2;
-}
-
-.close-button-parent:hover .close-button-outer {
-  background-color: #cccccc;
-}
-.close-button-parent:hover .close-button-inner {
-  background-color: #cccccc;
-}
-
-.shake-animation {
-  display: inline-block;
-  animation: .8s shake 1 alternate;
-}
-
-@keyframes shake {
-  0% { transform: skewX(-15deg); }
-  5% { transform: skewX(15deg); }
-  10% { transform: skewX(-15deg); }
-  15% { transform: skewX(15deg); }
-  20% { transform: skewX(0deg); }
-  100% { transform: skewX(0deg); }  
-}

extension/sidebar.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="sidebar.css" />
-    <script src="jquery-3.4.1.slim.min.js"></script>
-  </head>
-
-  <body>
-    <div id="content">
-    </div>
-    <script src="sidebar.js"></script>
-  </body>
-</html>

package.json

@@ -1,16 +1,16 @@
 {
-  "name": "puretabs",
+  "name": "web-extension-ps-example",
   "version": "0.1.0",
-  "description": "Tree tabs extension written in PureScript",
+  "description": "Firefox extension written in PureScript",
   "directories": {
     "test": "test"
   },
   "scripts": {
     "parcel": "parcel",
-    "dev": "concurrently --kill-others \"spago build --watch\" \"parcel watch src/background.js src/sidebar.js -d extension/\"",
-    "build": "spago build && parcel build src/background.js src/sidebar.js -d extension/",
+    "dev": "concurrently --kill-others \"spago build --watch\" \"parcel watch src/background.js src/content.js -d extension/\"",
+    "build": "spago build && parcel build src/background.js src/content.js -d extension/",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rm -rf .cache .psci_modules modules dist extension/background.js extension/background.js.map extension/sidebar.js extension/sidebar.js.map",
+    "clean": "rm -rf .cache .psci_modules modules dist extension/background.js extension/background.js.map extension/sidebar.js extension/content.js.map",
     "preinstall": "npx npm-force-resolutions",
     "start:firefox": "web-ext run --source-dir ./extension",
     "sign": "web-ext sign --source-dir ./extension"

spago.dhall

@@ -2,7 +2,7 @@
 Welcome to a Spago project!
 You can edit this file as you like.
 -}
-{ name = "pure-tabs"
+{ name = "web-extension"
 , dependencies =
   [ "prelude"
   , "console"

src/Utils.purs

@@ -1,10 +0,0 @@
-module PureTabs.Utils where
-
-import Control.Alt (void)
-import Control.Bind (pure)
-import Control.Monad (class Monad)
-import Data.Unit (Unit, unit)
-
-
-ifU :: forall a m. Monad m => Boolean -> m a -> m Unit
-ifU bool act = if bool then void act else pure unit

src/content.js

@@ -0,0 +1 @@
+console.log("[content] hello");

src/sidebar.js

@@ -1 +0,0 @@
-console.log("[sidebar] hello");