🔀 Initial vertical tabs prototype (#167)

Initial vertical tabs prototype

Author: trickypr

package.json

@@ -7,17 +7,18 @@
   "license": "MPL-2.0",
   "private": true,
   "dependencies": {
-    "gluon-build": "^1.0.0-rc.2"
+    "gluon-build": "^1.0.0-rc.4"
   },
   "scripts": {
     "build": "gluon build",
     "build:ui": "gluon build --ui",
     "bs": "yarn build && yarn start",
     "bus": "yarn build:ui && yarn start",
-    "start": "gluon run",
+    "start": "yarn clearStartupCache && gluon run",
     "export": "gluon export-file",
     "imp": "gluon import",
     "clearProfile": "rm -rf engine/obj-x86_64-pc-linux-gnu/tmp/profile-default",
+    "clearStartupCache": "rm -rf engine/obj-x86_64-pc-linux-gnu/tmp/profile-default/startupCache",
     "download": "gluon download",
     "package": "gluon package",
     "ff-version": "gluon ff-version",

src/browser/base/content/browser-js.patch

@@ -0,0 +1,12 @@
+diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
+index a9d4fc4abe1d3b5d5213d3afd90fd0128ee0d032..f2eb4888521deefa7da2b7666ec6012af2a27a4e 100644
+--- a/browser/base/content/browser.js
++++ b/browser/base/content/browser.js
+@@ -1841,6 +1841,7 @@ var gBrowserInit = {
+     gPrivateBrowsingUI.init();
+     BrowserSearch.init();
+     BrowserPageActions.init();
++    VerticalTabs.init();
+     if (gToolbarKeyNavEnabled) {
+       ToolbarKeyboardNavigator.init();
+     }

src/browser/base/content/browser-verticaltabs.js

@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @ts-check
+
+const VERTICAL_TABS_POSITION = 'pulse.tabs.vertical'
+
+var VerticalTabs = {
+  /**
+   * @return {Boolean} true if the vertical tabs feature is enabled.
+   */
+  get verticalTabsEnabled() {
+    return Services.prefs.getBoolPref(VERTICAL_TABS_POSITION, false)
+  },
+
+  /**
+   * @return {HTMLElement?}
+   */
+  get tabsToolbar() {
+    return document.getElementById('TabsToolbar')
+  },
+
+  /**
+   * @return {HTMLElement?}
+   */
+  get titlebarContainer() {
+    return document.getElementById('titlebar')
+  },
+
+  /**
+   * @return {HTMLElement?}
+   */
+  get browserContainer() {
+    return document.getElementById('browser')
+  },
+
+  /** @type {HTMLElement?} */
+  arrowScrollbox: null,
+  /** @type {HTMLElement?} */
+  tabBrowserTabs: null,
+
+  _initialized: false,
+
+  init() {
+    if (this._initialized) {
+      return
+    }
+
+    this.arrowScrollbox = document.getElementById('tabbrowser-arrowscrollbox')
+    this.tabBrowserTabs = document.getElementById('tabbrowser-tabs')
+
+    Services.prefs.addObserver(VERTICAL_TABS_POSITION, this)
+
+    if (this.verticalTabsEnabled) {
+      this.enableVerticalTabs()
+    }
+
+    this._initialized = true
+  },
+
+  enableVerticalTabs() {
+    this.browserContainer?.prepend(this.tabsToolbar || '')
+
+    this.arrowScrollbox?.setAttribute('orient', 'vertical')
+    this.tabBrowserTabs?.setAttribute('orient', 'vertical')
+
+    document
+      .getElementById('navigator-toolbox-background')
+      ?.setAttribute('verticaltabs', 'true')
+    document
+      .querySelector('#TabsToolbar .toolbar-items')
+      ?.setAttribute('align', 'start')
+  },
+
+  disableVerticalTabs() {
+    this.titlebarContainer?.prepend(this.tabsToolbar || '')
+
+    this.arrowScrollbox?.setAttribute('orient', 'horizontal')
+    this.tabBrowserTabs?.setAttribute('orient', 'horizontal')
+
+    document
+      .getElementById('navigator-toolbox-background')
+      ?.removeAttribute('verticaltabs')
+    document
+      .querySelector('#TabsToolbar .toolbar-items')
+      ?.setAttribute('align', 'end')
+  },
+
+  /**
+   * The handler for `Services.prefs.addObserver`.
+   */
+  observe(_subject, topic, data) {
+    switch (topic) {
+      case 'nsPref:changed':
+        if (data === VERTICAL_TABS_POSITION) {
+          if (this.verticalTabsEnabled) {
+            this.enableVerticalTabs()
+          } else {
+            this.disableVerticalTabs()
+          }
+        }
+        break
+    }
+  },
+}

src/browser/base/content/browser-xhtml.patch

@@ -0,0 +1,20 @@
+diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
+index 8dfb7b3c787661b5541d77c0eddf408ee90c513f..2a8c13598f5d047bb2fbcbae0b1ee6032a50e9da 100644
+--- a/browser/base/content/browser.xhtml
++++ b/browser/base/content/browser.xhtml
+@@ -105,6 +105,7 @@
+   Services.scriptloader.loadSubScript("chrome://browser/content/browser-pageActions.js", this);
+   Services.scriptloader.loadSubScript("chrome://browser/content/browser-sidebar.js", this);
+   Services.scriptloader.loadSubScript("chrome://browser/content/browser-tabsintitlebar.js", this);
++  Services.scriptloader.loadSubScript("chrome://browser/content/browser-verticaltabs.js", this);
+   Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser.js", this);
+   Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser-tab.js", this);
+   Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser-tabs.js", this);
+@@ -112,6 +113,7 @@
+   Services.scriptloader.loadSubScript("chrome://browser/content/search/autocomplete-popup.js", this);
+   Services.scriptloader.loadSubScript("chrome://browser/content/search/searchbar.js", this);
+ 
++
+   window.onload = gBrowserInit.onLoad.bind(gBrowserInit);
+   window.onunload = gBrowserInit.onUnload.bind(gBrowserInit);
+   window.onclose = WindowIsClosing;

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -0,0 +1,15 @@
+diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
+index 8071a5fa5e1f3ba3dfd0345fa1e3284082eb2e39..c6d6d3b08f033ff207daa44074f8422e51b52640 100644
+--- a/browser/base/content/navigator-toolbox.inc.xhtml
++++ b/browser/base/content/navigator-toolbox.inc.xhtml
+@@ -475,6 +475,10 @@
+                      consumeanchor="PanelUI-button"
+                      data-l10n-id="appmenu-menu-button-closed2"/>
+     </toolbaritem>
++
++# Intended for the vertical tabs view, should be hidden by default
++#include titlebar-items.inc.xhtml
++
+   </toolbar>
+ 
+   <toolbar id="PersonalToolbar"