feature: Scroll tabbrowser when dragging a tab. 📜 📑

Can drag and scroll tabs when there are enough for a scrollbox. Hide the scroll bar. Many other changes. Reviewer: @bwinton Fixes: #494. Fixes #500. Merge pull request #508 from ericawright/feature/drag_and_scroll
bwinton · Aug 19, 2016 · 5f76528 · 5f76528
2 parents d41fb4b + 396f290
commit 5f76528
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 41 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -13,7 +13,10 @@
         "Cc": false,
         "Ci": false,
         "TAB_DROP_TYPE": false,
-        "TabsInTitlebar": false
+        "TabsInTitlebar": false,
+        "_startScroll": false,
+        "_distanceScroll": false,
+        "_stopScroll": false
     },
     "rules": {
       "mozilla/import-globals-from": 1,

diff --git a/skin/base.css b/skin/base.css
@@ -14,17 +14,41 @@
   --color-teal: #01bdad;
 }
 
-/* Style the scrollbox for vertical arrangements. */
-.tabbrowser-arrowscrollbox > scrollbox {
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
+.arrowscrollbox-overflow-start-indicator,
+.arrowscrollbox-overflow-end-indicator {
+  display: none;
+  margin: 0 !important;
 }
 
-/* Since we get an actual scrollbar in this vertical arrangement, we
-   don't need these extra scroll buttons. */
-.tabbrowser-arrowscrollbox > .scrollbutton-up,
-.tabbrowser-arrowscrollbox > .scrollbutton-down {
-  visibility: collapse !important;
+.tabbrowser-arrowscrollbox  .scrollbutton-up,
+.tabbrowser-arrowscrollbox  .scrollbutton-down {
+  min-height: 25px !important;
+  max-height: 25px !important;
+  margin: 0 !important;
+  -moz-image-region: rect(0, 0, 0, 0) !important;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon,
+.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon {
+  -moz-image-region: rect(0, 0, 0, 0) !important;
+}
+
+.tabbrowser-arrowscrollbox .scrollbutton-down {
+  border-top: 1px solid hsla(0, 0%, 0%, 0.06) !important;
+  list-style-image: url("resource://tabcenter/skin/glyph-arrow-page-down-16.svg") !important;
+}
+
+.tabbrowser-arrowscrollbox .scrollbutton-up {
+  border-bottom: 1px solid hsla(0, 0%, 0%, 0.06) !important;
+  list-style-image: url("resource://tabcenter/skin/glyph-arrow-page-up-16.svg") !important;
+}
+
+#verticaltabs-box[brighttext] .tabbrowser-arrowscrollbox .scrollbutton-down {
+  list-style-image: url("resource://tabcenter/skin/glyph-arrow-page-down-inverted-16.svg") !important;
+}
+
+#verticaltabs-box[brighttext] .tabbrowser-arrowscrollbox .scrollbutton-up {
+  list-style-image: url("resource://tabcenter/skin/glyph-arrow-page-up-inverted-16.svg") !important;
 }
 
 /* Ensure the tab favicon doesn't stretch. */
@@ -136,29 +160,10 @@
   flex: 1 0;
 }
 
-#verticaltabs-box[expanded="true"] .tabbrowser-tabs,
-#main-window[tabspinned="true"] #verticaltabs-box .tabbrowser-tabs {
-  overflow-y: auto;
-}
-
 .tabbrowser-arrowscrollbox {
-  height: calc(100vh - 63px);
   flex: 1 0;
 }
 
-.tabbrowser-arrowscrollbox:not(:-moz-lwtheme) {
-  height: calc(100vh - 41px);
-}
-
-#verticaltabs-box .tabbrowser-arrowscrollbox > scrollbox {
-  overflow-y: hidden !important;
-}
-
-#verticaltabs-box[expanded="true"] .tabbrowser-arrowscrollbox > scrollbox,
-#main-window[tabspinned="true"] #verticaltabs-box .tabbrowser-arrowscrollbox > scrollbox {
-  overflow-y: auto !important;
-}
-
 #tabbrowser-tabs::before,
 #tabbrowser-tabs + hbox,
 #tabbrowser-tabs > hbox {
@@ -297,7 +302,7 @@
   flex: 1 0 auto !important;
   vertical-align: middle;
 }
-
+/* [inDOMFullscreen] for video */
 #main-window[inFullscreen][inDOMFullscreen] #find-input {
   display: none;
 }

diff --git a/skin/glyph-arrow-page-down-16.svg b/skin/glyph-arrow-page-down-16.svg
diff --git a/skin/glyph-arrow-page-down-inverted-16.svg b/skin/glyph-arrow-page-down-inverted-16.svg
diff --git a/skin/glyph-arrow-page-up-16.svg b/skin/glyph-arrow-page-up-16.svg
diff --git a/skin/glyph-arrow-page-up-inverted-16.svg b/skin/glyph-arrow-page-up-inverted-16.svg
diff --git a/skin/linux.css b/skin/linux.css
@@ -53,3 +53,12 @@
   background-repeat: no-repeat !important;
   box-shadow: var(--toolbarbutton-active-boxshadow) !important;
 }
+
+.tabbrowser-arrowscrollbox,
+.tabbrowser-arrowscrollbox:not(:-moz-lwtheme) {
+  height: calc(100vh - 40px);
+}
+
+#main-window[devedition-theme] .tabbrowser-arrowscrollbox {
+  height: calc(100vh - 41px);
+}
diff --git a/skin/osx.css b/skin/osx.css
@@ -81,3 +81,21 @@
   background-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.65)) !important;
   box-shadow: none !important;
 }
+
+.tabbrowser-arrowscrollbox {
+  height: calc(100vh - 61px);
+}
+
+#main-window[inFullscreen] .tabbrowser-arrowscrollbox,
+#main-window[inFullscreen] .tabbrowser-arrowscrollbox:not(:-moz-lwtheme),
+.tabbrowser-arrowscrollbox:not(:-moz-lwtheme) {
+  height: calc(100vh - 39px);
+}
+
+#main-window[devedition-theme] .tabbrowser-arrowscrollbox {
+  height: calc(100vh - 62px);
+}
+
+#main-window[devedition-theme][inFullscreen] .tabbrowser-arrowscrollbox {
+  height: calc(100vh - 40px);
+}
diff --git a/skin/win.css b/skin/win.css
@@ -8,11 +8,10 @@
   width:auto !important;
 }
 
-@media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista), (-moz-os-version: windows-win10) {
-  .tabbrowser-arrowscrollbox,
-  .tabbrowser-arrowscrollbox:not(:-moz-lwtheme) {
-    height: calc(100vh - 42px);
-  }
+.tabbrowser-arrowscrollbox,
+.tabbrowser-arrowscrollbox:not(:-moz-lwtheme),
+#main-window[devedition-theme] .tabbrowser-arrowscrollbox {
+  height: calc(100vh - 40px);
 }
 
 @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
@@ -36,14 +35,16 @@
 
 @media (-moz-os-version: windows-win8) {
   .tabbrowser-arrowscrollbox,
-  .tabbrowser-arrowscrollbox:not(:-moz-lwtheme) {
-    height: calc(100vh - 46px);
+  .tabbrowser-arrowscrollbox:not(:-moz-lwtheme),
+  #main-window[devedition-theme] .tabbrowser-arrowscrollbox {
+    height: calc(100vh - 43px);
   }
 }
 
 @media (-moz-os-version: windows-win7) {
   .tabbrowser-arrowscrollbox,
-  .tabbrowser-arrowscrollbox:not(:-moz-lwtheme) {
+  .tabbrowser-arrowscrollbox:not(:-moz-lwtheme),
+  #main-window[devedition-theme] .tabbrowser-arrowscrollbox {
     height: calc(100vh - 44px);
   }
 }

diff --git a/vertical-tabbrowser.xml b/vertical-tabbrowser.xml
@@ -19,6 +19,31 @@
     <implementation>
       <property name="_verticalTabs" onget="return this.orient == 'vertical';"/>
 
+      <constructor><![CDATA[
+        let scrollbuttonUp = document.getAnonymousElementByAttribute(this, 'anonid', 'scrollbutton-up');
+        let scrollbuttonDown = document.getAnonymousElementByAttribute(this, 'anonid', 'scrollbutton-down');
+
+        scrollbuttonUp.ondragenter = function (event) {
+          if (event.button === 0) {
+            _startScroll(-1);
+          }
+        };
+        scrollbuttonUp.ondragover = function (event) {
+          _distanceScroll(event);
+        };
+        scrollbuttonUp.ondragleave = _stopScroll();
+
+        scrollbuttonDown.ondragenter = function (event) {
+          if (event.button === 0) {
+            _startScroll(1);
+          }
+        };
+        scrollbuttonDown.ondragover = function (event) {
+          _distanceScroll(event);
+        };
+        scrollbuttonDown.ondragleave = _stopScroll();
+      ]]></constructor>
+
       <method name="_canScrollToElement">
         <parameter name="tab"/>
         <body><![CDATA[
@@ -169,9 +194,7 @@
           // console.log('tabScreenPos', tabScreenPos);
           let translateVal = screenPos - draggedTab._dragData.screenY;
           // console.log('translateVal 1', translateVal);
-          if (!pinned){
-            translateVal += this.mTabstrip.scrollPosition - draggedTab._dragData.scrollX; // XXX verticalTabs always scrollX here, it's actually the scrollPosition
-          }
+          translateVal += this.mTabstrip.scrollPosition - draggedTab._dragData.scrollX; // XXX verticalTabs always scrollX here, it's actually the scrollPosition
           let minBound = leftTab.boxObject.screenY - tabScreenPos;
           let maxBound = (rightTab.boxObject.screenY + rightTab.boxObject.height) -
                            (tabScreenPos + tabSize);

diff --git a/verticaltabs.js b/verticaltabs.js
@@ -163,6 +163,15 @@ VerticalTabs.prototype = {
           toolbar.setAttribute('brighttext', 'true');
         }
       }
+
+      let mainWindow = document.getElementById('main-window');
+
+      if (/devedition/.test(mainWindow.style.backgroundImage)) {
+        mainWindow.setAttribute('devedition-theme', 'true');
+      } else {
+        mainWindow.removeAttribute('devedition-theme');
+      }
+
     }.bind(this.window.ToolbarIconColor);
 
     this.thumbTimer = this.window.setInterval(() => {