feat: double click on the empty part of the sidebar to open a new tab

extension/sidebar.css

@@ -1,11 +1,15 @@
 html,
-body {
+body,
+#content {
   width: 100%;
+  height: 100%;
+  overflow: hidden visible;
 }
 
 #tabs {
-  margin-top: 1px;
+  padding-top: 1px;
   width: 100%;
+  height: 100%;
 }
 
 .tab {
@@ -15,7 +19,7 @@ body {
   border: solid #cfcfcf 1px;
   margin-bottom: 1px;
   padding-left: 2px;
-  padding-bottom: 2px;
+  padding-bottom: 1px;
   width: 100%;
 }
 

src/Background.purs

@@ -1,7 +1,7 @@
 module PureTabs.Background where
 
 import Browser.Runtime as Runtime
-import Browser.Tabs (Tab(..), TabId, WindowId, query, removeOne, activateTab, moveTab)
+import Browser.Tabs (Tab(..), TabId, WindowId, query, removeOne, activateTab, moveTab, createTab)
 import Browser.Tabs.OnActivated as OnActivated
 import Browser.Tabs.OnCreated as OnCreated
 import Browser.Tabs.OnMoved as OnMoved
@@ -234,11 +234,13 @@ initWindowState port ref winId =
 -- TODO don't pass the full ref, but only a set of function to manipulate/access 
 -- the data required
 manageSidebar :: (Ref.Ref GlobalState) -> Runtime.Port -> SidebarEvent -> Effect Unit
-manageSidebar stateRef port (SbTabDeleted tabId) = launchAff_ $ removeOne tabId
+manageSidebar stateRef port (SbDeleteTab tabId) = launchAff_ $ removeOne tabId
 
-manageSidebar stateRef port (SbTabActived tabId) = launchAff_ $ activateTab tabId
+manageSidebar stateRef port (SbActivateTab tabId) = launchAff_ $ activateTab tabId
 
-manageSidebar stateRef port (SbTabMoved tabId newIndex) = moveTab tabId {index: newIndex}
+manageSidebar stateRef port (SbMoveTab tabId newIndex) = moveTab tabId {index: newIndex}
+
+manageSidebar stateRef port (SbCreateTab winId) = createTab {windowId: winId}
 
 manageSidebar stateRef port msg = pure unit
 

src/Browser/Tabs.js

@@ -4,7 +4,6 @@ exports.queryImpl = function () {
   return browser.tabs.query({});
 };
 
-
 exports["remove'"] = function (tabs) {
   return function () {
     return browser.tabs.remove(tabs);
@@ -17,7 +16,7 @@ exports["update'"] = function () {
       return function () {
         return browser.tabs.update(tabId, updateProperties);
       };
-    }
+    };
   };
 };
 
@@ -28,3 +27,11 @@ exports["moveTab"] = function (tabIds) {
     };
   };
 };
+
+exports["createTab"] = function (union) {
+  return function (createProperties) {
+    return function () {
+      return browser.tabs.create(createProperties);
+    };
+  };
+};

src/Browser/Tabs.purs

@@ -1,17 +1,15 @@
-module Browser.Tabs (WindowId, TabId(..), Tab(..), MoveProperties, query, remove, removeOne, update, activateTab, moveTab) where
+module Browser.Tabs (WindowId, TabId(..), Tab(..), MoveProperties, CreateProperties, query, remove, removeOne, update, activateTab, moveTab, createTab) where
 
 import Browser.Utils (unwrapForeign)
 import Control.Alt (map)
-import Control.Bind ((>>=))
 import Control.Promise (Promise, toAffE)
-import Data.Argonaut (class DecodeJson, class EncodeJson)
 import Data.Eq (class Eq)
 import Data.Function (($))
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
-import Data.List (List, fromFoldable, toUnfoldable, (!!), singleton)
+import Data.List (List, fromFoldable, toUnfoldable, singleton)
 import Data.Maybe (Maybe)
-import Data.Newtype (class Newtype, unwrap)
+import Data.Newtype (class Newtype)
 import Data.Number.Format (toString)
 import Data.Ord (class Ord)
 import Data.Show (class Show)
@@ -156,3 +154,19 @@ type MoveProperties = {
 }
 
 foreign import moveTab :: TabId -> MoveProperties -> Effect Unit
+
+
+type CreateProperties = (
+  active :: Boolean,
+  cookieStoreId :: String,
+  discarded :: Boolean,
+  index :: Int,
+  openerTabId :: TabId,
+  openInReaderMode :: Boolean,
+  pinned :: Boolean,
+  title :: String,
+  url :: String,
+  windowId :: WindowId
+)
+
+foreign import createTab :: forall props trash. Union props trash CreateProperties => { | props } -> Effect Unit

src/Model.purs

@@ -161,14 +161,14 @@ instance showBackgroundEvent :: Show BackgroundEvent where
   show = genericShow
 
 data SidebarEvent
-  = SbTabDeleted TabId
-  | SbTabActived TabId
-  | SbTabCreated
-  | SbTabMoved TabId Int
-  | SbTabDetached
-  | SbGroupCreated
-  | SbGroupDeleted
-  | SbGroupRenamed
+  = SbDeleteTab TabId
+  | SbActivateTab TabId
+  | SbCreateTab WindowId
+  | SbMoveTab TabId Int
+  | SbDetacheTab
+  | SbCreatedGroup
+  | SbDeleteGroup
+  | SbRenameGroup
   | SbHasWindowId WindowId
 
 derive instance genSidebarEvent :: Generic SidebarEvent _

src/Sidebar.purs

@@ -18,6 +18,7 @@ import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
 import Effect.Console (log)
 import Effect.Exception (throw)
+import JQuery (getAttr, getTarget)
 import JQuery as J
 import JQuery.Ext (after, prepend, getHtmlElem) as J
 import Prelude (Unit, bind, ($), discard)
@@ -42,7 +43,7 @@ sortableOnUpdate port { item: item, newIndex: Just newIndex } = do
   sTabId <- id $ toElement item
   case fromString sTabId of
     Nothing -> throw $ "couldn't convert to a tab id " <> sTabId
-    Just tabId' -> Runtime.postMessageJson port $ SbTabMoved (TabId tabId') newIndex
+    Just tabId' -> Runtime.postMessageJson port $ SbMoveTab (TabId tabId') newIndex
 
 sortableOnUpdate port _ = pure unit
 
@@ -51,8 +52,9 @@ initSidebar port winId = do
   log $ "windowId " <> (show winId)
   Runtime.postMessageJson port $ SbHasWindowId winId
   _ <- Runtime.onMessageJsonAddListener port onMsg
-  allTabs <- J.getHtmlElem =<< J.select "#tabs"
-  sortable <- S.create { onUpdate: sortableOnUpdate port } allTabs
+  allTabs <- J.select "#tabs"
+  J.on "dblclick" (openNewTab winId port) allTabs
+  sortable <- S.create { onUpdate: sortableOnUpdate port } =<< J.getHtmlElem allTabs
   pure unit
   where
   onMsg :: BackgroundEvent -> Effect Unit
@@ -65,6 +67,13 @@ initSidebar port winId = do
     BgTabMoved tid prevPos newPos -> moveTab tid prevPos newPos
     _ -> log "received unsupported message type"
 
+  openNewTab :: WindowId -> Runtime.Port -> J.JQueryEvent -> J.JQuery -> Effect Unit
+  openNewTab winId port' event _ = do
+    id <- getAttr "id" =<< getTarget event
+    case id of
+      Just "tabs" -> Runtime.postMessageJson port' $ SbCreateTab winId
+      _ -> pure unit
+
 createTab :: Runtime.Port -> Tab -> Effect Unit
 createTab port (Tab tab) = do
   tabsDiv <- J.select "#tabs"
@@ -96,10 +105,10 @@ createTabElement port (Tab tab) = do
   pure tabDiv
   where
   onCloseClick :: J.JQueryEvent -> J.JQuery -> Effect Unit
-  onCloseClick event j = Runtime.postMessageJson port $ SbTabDeleted tab.id
+  onCloseClick event j = Runtime.postMessageJson port $ SbDeleteTab tab.id
 
   onTabClick :: J.JQueryEvent -> J.JQuery -> Effect Unit
-  onTabClick event j = Runtime.postMessageJson port $ SbTabActived tab.id
+  onTabClick event j = Runtime.postMessageJson port $ SbActivateTab tab.id
 
   isDiscarded :: forall r. { discarded :: Maybe Boolean | r } -> Boolean
   isDiscarded { discarded: Just true } = true