Bug 1349555 - Implement most of the photon tab strip. r=johannh

MozReview-Commit-ID: GmWBIdjNMkC
mozilla-spidermonkey · Aug 2, 2017 · 81a3361 · 81a3361
1 parent f46936a
commit 81a3361
Show file tree

Hide file tree

Showing 88 changed files with 178 additions and 1,032 deletions.
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
@@ -154,7 +154,7 @@ tabbrowser {
 
 .tabbrowser-tab:not([pinned]) {
   -moz-box-flex: 100;
-  max-width: 210px;
+  max-width: 225px;
   min-width: 100px;
   width: 0;
   transition: min-width 100ms ease-out,

diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
@@ -5564,7 +5564,6 @@ var TabletModeUpdater = {
     }
     if (wasInTabletMode != isInTabletMode) {
       gUIDensity.update();
-      TabsInTitlebar.updateAppearance(true);
     }
   },
 };
@@ -5661,6 +5660,8 @@ var gUIDensity = {
       doc.removeAttribute("uidensity");
       break;
     }
+
+    TabsInTitlebar.updateAppearance(true);
   },
 };
 

diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
@@ -1283,9 +1283,8 @@
     <notificationbox id="global-notificationbox" notificationside="bottom"/>
   </vbox>
 
-  <svg:svg height="0">
-#include tab-shape.inc.svg
 #ifndef MOZ_PHOTON_THEME
+  <svg:svg height="0">
     <svg:clipPath id="urlbar-back-button-clip-path">
 #ifndef XP_MACOSX
       <svg:path d="M -9,-4 l 0,1 a 15 15 0 0,1 0,30 l 0,1 l 10000,0 l 0,-32 l -10000,0 z" />
@@ -1297,9 +1296,9 @@
     <svg:clipPath id="urlbar-back-button-clip-path-win10">
       <svg:path d="M -6,-2 l 0,1 a 15 15 0 0,1 0,30 l 0,1 l 10000,0 l 0,-32 l -10000,0 z" />
     </svg:clipPath>
-#endif
 #endif
   </svg:svg>
+#endif
 
 </vbox>
 # <iframe id="tab-view"> is dynamically appended as the 2nd child of #tab-view-deck.

diff --git a/browser/base/content/tab-shape.inc.svg b/browser/base/content/tab-shape.inc.svg
diff --git a/browser/base/content/tabbrowser.css b/browser/base/content/tabbrowser.css
@@ -19,7 +19,7 @@
 }
 
 .tab-close-button[pinned],
-.tabbrowser-tabs[closebuttons="activetab"] > * > * > * > .tab-close-button:not([selected="true"]),
+.tabbrowser-tabs[closebuttons="activetab"] > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]),
 .tab-icon-image:not([src]):not([pinned]):not([crashed])[selected],
 .tab-icon-image:not([src]):not([pinned]):not([crashed]):not([sharing]),
 .tab-icon-image[busy],
@@ -63,10 +63,6 @@
   mask-image: linear-gradient(to right, transparent, black 2em);
 }
 
-.tab-stack {
-  vertical-align: top; /* for pinned tabs */
-}
-
 tabpanels {
   background-color: transparent;
 }

diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml
@@ -5904,34 +5904,6 @@
           return !tab.pinned && !tab.hidden;
         ]]></body>
       </method>
-      <field name="_tabMarginLeft">null</field>
-      <field name="_tabMarginRight">null</field>
-      <method name="_calcTabMargins">
-        <parameter name="aTab"/>
-        <body><![CDATA[
-          if (this._tabMarginLeft === null || this._tabMarginRight === null) {
-            let tabMiddle = document.getAnonymousElementByAttribute(aTab, "class", "tab-background-middle");
-            let tabMiddleStyle = window.getComputedStyle(tabMiddle);
-            this._tabMarginLeft = parseFloat(tabMiddleStyle.marginLeft);
-            this._tabMarginRight = parseFloat(tabMiddleStyle.marginRight);
-          }
-        ]]></body>
-      </method>
-      <method name="_adjustElementStartAndEnd">
-        <parameter name="aTab"/>
-        <parameter name="tabStart"/>
-        <parameter name="tabEnd"/>
-        <body><![CDATA[
-          this._calcTabMargins(aTab);
-          if (this._tabMarginLeft < 0) {
-            tabStart = tabStart + this._tabMarginLeft;
-          }
-          if (this._tabMarginRight < 0) {
-            tabEnd = tabEnd - this._tabMarginRight;
-          }
-          return [tabStart, tabEnd];
-        ]]></body>
-      </method>
     </implementation>
 
     <handlers>
@@ -5993,12 +5965,10 @@
   button, necessary due to the previous hack.
 -->
         <children/>
-        <xul:toolbarbutton class="tabs-newtab-button"
+        <xul:toolbarbutton class="tabs-newtab-button toolbarbutton-1"
                            anonid="tabs-newtab-button"
                            command="cmd_newNavigatorTab"
                            onclick="checkForMiddleClick(this, event);"
-                           onmouseover="document.getBindingParent(this)._enterNewTab();"
-                           onmouseout="document.getBindingParent(this)._leaveNewTab();"
                            tooltip="dynamic-shortcut-tooltip"/>
         <xul:hbox class="restore-tabs-button-wrapper"
                   anonid="restore-tabs-button-wrapper">
@@ -6256,26 +6226,6 @@
         ]]></setter>
       </property>
 
-      <method name="_enterNewTab">
-        <body><![CDATA[
-          let visibleTabs = this.tabbrowser.visibleTabs;
-          let candidate = visibleTabs[visibleTabs.length - 1];
-          if (!candidate.selected) {
-            this._beforeHoveredTab = candidate;
-            candidate.setAttribute("beforehovered", "true");
-          }
-        ]]></body>
-      </method>
-
-      <method name="_leaveNewTab">
-        <body><![CDATA[
-          if (this._beforeHoveredTab) {
-            this._beforeHoveredTab.removeAttribute("beforehovered");
-            this._beforeHoveredTab = null;
-          }
-        ]]></body>
-      </method>
-
       <method name="_propagateVisibility">
         <body><![CDATA[
           let visible = this.visible;
@@ -6477,7 +6427,6 @@
               let tabstrip = this.mTabstrip;
               layoutData = this._pinnedTabsLayoutCache = {
                 pinnedTabWidth: this.childNodes[0].getBoundingClientRect().width,
-                paddingStart: tabstrip.scrollboxPaddingStart,
                 scrollButtonWidth: tabstrip._scrollButtonDown.getBoundingClientRect().width
               };
             }
@@ -6486,10 +6435,9 @@
             for (let i = numPinned - 1; i >= 0; i--) {
               let tab = this.childNodes[i];
               width += layoutData.pinnedTabWidth;
-              tab.style.marginInlineStart =
-                -(width + layoutData.scrollButtonWidth + layoutData.paddingStart) + "px";
+              tab.style.marginInlineStart = -(width + layoutData.scrollButtonWidth) + "px";
             }
-            this.style.paddingInlineStart = width + layoutData.paddingStart + "px";
+            this.style.paddingInlineStart = width + "px";
           } else {
             this.removeAttribute("positionpinnedtabs");
 
@@ -6671,7 +6619,6 @@
 
           var scrollRect = this.mTabstrip.scrollClientRect;
           var tab = aTab.getBoundingClientRect();
-          this.mTabstrip._calcTabMargins(aTab);
 
           // DOMRect left/right properties are immutable.
           tab = {left: tab.left, right: tab.right};
@@ -6683,15 +6630,6 @@
           if (this.mTabstrip.smoothScroll) {
             let selected = !this.selectedItem.pinned &&
                            this.selectedItem.getBoundingClientRect();
-            if (selected) {
-              selected = {left: selected.left, right: selected.right};
-              // Need to take in to account the width of the left/right margins on tabs.
-              selected.left = selected.left + this.mTabstrip._tabMarginLeft;
-              selected.right = selected.right - this.mTabstrip._tabMarginRight;
-            }
-
-            tab.left += this.mTabstrip._tabMarginLeft;
-            tab.right -= this.mTabstrip._tabMarginRight;
 
             // Can we make both the new tab and the selected tab completely visible?
             if (!selected ||
@@ -7442,15 +7380,11 @@
 
     <content context="tabContextMenu">
       <xul:stack class="tab-stack" flex="1">
-        <xul:hbox xbl:inherits="pinned,selected=visuallyselected,fadein"
+        <xul:vbox xbl:inherits="selected=visuallyselected,fadein"
                   class="tab-background">
-          <xul:hbox xbl:inherits="pinned,selected=visuallyselected"
-                    class="tab-background-start"/>
-          <xul:hbox xbl:inherits="pinned,selected=visuallyselected"
-                    class="tab-background-middle"/>
-          <xul:hbox xbl:inherits="pinned,selected=visuallyselected"
-                    class="tab-background-end"/>
-        </xul:hbox>
+          <xul:hbox xbl:inherits="selected=visuallyselected"
+                    class="tab-line"/>
+        </xul:vbox>
         <xul:hbox xbl:inherits="pinned,selected=visuallyselected,titlechanged,attention"
                   class="tab-content" align="center">
           <xul:image xbl:inherits="fadein,pinned,busy,progress,selected=visuallyselected"

diff --git a/browser/base/content/test/general/browser_overflowScroll.js b/browser/base/content/test/general/browser_overflowScroll.js
@@ -8,8 +8,8 @@ var width = ele => rect(ele).width;
 var height = ele => rect(ele).height;
 var left = ele => rect(ele).left;
 var right = ele => rect(ele).right;
-var isLeft = (ele, msg) => is(left(ele) + tabstrip._tabMarginLeft, left(scrollbox), msg);
-var isRight = (ele, msg) => is(right(ele) - tabstrip._tabMarginRight, right(scrollbox), msg);
+var isLeft = (ele, msg) => is(left(ele), left(scrollbox), msg);
+var isRight = (ele, msg) => is(right(ele), right(scrollbox), msg);
 var elementFromPoint = x => tabstrip._elementFromPoint(x);
 var nextLeftElement = () => elementFromPoint(left(scrollbox) - 1);
 var nextRightElement = () => elementFromPoint(right(scrollbox) + 1);

diff --git a/browser/base/content/test/performance/browser_startup_images.js b/browser/base/content/test/performance/browser_startup_images.js
@@ -79,21 +79,6 @@ const whitelist = [
     platforms: ["linux", "win", "macosx"],
   },
 
-  {
-    file: "chrome://browser/skin/tabbrowser/tab-background-end.png",
-    hidpi: "chrome://browser/skin/tabbrowser/tab-background-end@2x.png",
-    platforms: ["linux", "win", "macosx"],
-  },
-  {
-    file: "chrome://browser/skin/tabbrowser/tab-background-middle.png",
-    hidpi: "chrome://browser/skin/tabbrowser/tab-background-middle@2x.png",
-    platforms: ["linux", "win", "macosx"],
-  },
-  {
-    file: "chrome://browser/skin/tabbrowser/tab-background-start.png",
-    hidpi: "chrome://browser/skin/tabbrowser/tab-background-start@2x.png",
-    platforms: ["linux", "win", "macosx"],
-  },
   {
     file: "chrome://browser/skin/tabbrowser/tabDragIndicator.png",
     hidpi: "chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png",
@@ -124,32 +109,6 @@ const whitelist = [
     intermittentShown: ["win", "macosx"],
   },
 
-  {
-    file: "chrome://browser/skin/yosemite/tab-selected-start-inactive.svg",
-    platforms: ["macosx"],
-    intermittentShown: ["macosx"],
-  },
-  {
-    file: "chrome://browser/skin/yosemite/tab-active-middle-inactive.png",
-    hidpi: "<not loaded>",
-    platforms: ["macosx"],
-  },
-  {
-    file: "chrome://browser/skin/yosemite/tab-selected-end-inactive.svg",
-    platforms: ["macosx"],
-    intermittentShown: ["macosx"],
-  },
-  {
-    file: "chrome://browser/skin/yosemite/tab-stroke-start-inactive.png",
-    hidpi: "<not loaded>",
-    platforms: ["macosx"],
-  },
-  {
-    file: "chrome://browser/skin/yosemite/tab-stroke-end-inactive.png",
-    hidpi: "<not loaded>",
-    platforms: ["macosx"],
-  },
-
   {
     file: "chrome://global/skin/icons/chevron.png",
     hidpi: "chrome://global/skin/icons/chevron@2x.png",

diff --git a/browser/base/content/test/performance/head.js b/browser/base/content/test/performance/head.js
@@ -176,7 +176,7 @@ function computeMaxTabCount() {
   let currentTabCount = gBrowser.tabs.length;
   let newTabButton =
     document.getAnonymousElementByAttribute(gBrowser.tabContainer,
-                                            "class", "tabs-newtab-button");
+                                            "anonid", "tabs-newtab-button");
   let newTabRect = newTabButton.getBoundingClientRect();
   let tabStripRect = gBrowser.tabContainer.mTabstrip.getBoundingClientRect();
   let availableTabStripWidth = tabStripRect.width - newTabRect.width;

diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
@@ -11,11 +11,18 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 %include ../shared/browser.inc
-%include linuxShared.inc
 
 %include ../shared/browser.inc.css
 
 :root {
+  --tabs-border: rgba(0,0,0,.3);
+
+  --toolbar-non-lwt-bgcolor: -moz-dialog;
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+  --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
+  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
+
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 4px;
 %else
@@ -45,6 +52,11 @@
   --urlbar-separator-color: ThreeDShadow;
 }
 
+:root:-moz-lwtheme {
+  --toolbar-bgcolor: rgba(255,255,255,.4);
+  --toolbar-bgimage: none;
+}
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
@@ -70,18 +82,15 @@
   border-bottom-color: rgba(0,0,0,.3);
 }
 
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#addon-bar) {
-  background-image: linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
-}
-
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#addon-bar):-moz-lwtheme {
-  background-image: linear-gradient(@toolbarHighlightLWT@, @toolbarHighlightLWT@);
+:root[customizing] #navigator-toolbox::after {
+  display: none;
 }
 
-#navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) {
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+  background-color: var(--toolbar-bgcolor);
+  background-image: var(--toolbar-bgimage);
   -moz-appearance: none;
   border-style: none;
-  background-color: -moz-Dialog;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
@@ -98,17 +107,14 @@
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  border-top: 1px solid hsla(0,0%,0%,.3) !important;
+  border-top: 1px solid var(--tabs-border) !important;
   background-clip: padding-box;
-  /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */
-  margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 #nav-bar {
-  box-shadow: 0 1px 0 @navbarInsetHighlight@ inset;
   padding-top: 2px;
   padding-bottom: 2px;
 }

diff --git a/browser/themes/linux/compacttheme.css b/browser/themes/linux/compacttheme.css
@@ -40,15 +40,6 @@
   -moz-image-region: var(--urlbar-dropmarker-region);
 }
 
-#new-tab-button:hover > .toolbarbutton-icon {
-  border-color: transparent !important;
-}
-
-/* Prevent double border below tabs toolbar */
-#TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  border-top-width: 0 !important;
-}
-
 /* Fix the bad-looking text-shadow in the sidebar header: */
 .sidebar-header,
 #sidebar-header {