Bug 1349555 - Implement most of the photon tab strip. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Wed, 02 Aug 2017 13:01:24 +0200
changeset 619663 c7d5c868910a3e509c1ec59f78c3cded9a7b52bc
parent 619581 52285ea5e54c73d3ed824544cef2ee3f195f05e6
child 640477 bc7b191a7c39110992b53a748610287d578c06a2
push id71765
push userdgottwald@mozilla.com
push dateWed, 02 Aug 2017 11:01:48 +0000
reviewersjohannh
bugs1349555
milestone57.0a1
Bug 1349555 - Implement most of the photon tab strip. r?johannh MozReview-Commit-ID: HP7PhIlYaGo
browser/base/content/browser.css
browser/base/content/browser.js
browser/base/content/browser.xul
browser/base/content/tab-shape.inc.svg
browser/base/content/tabbrowser.css
browser/base/content/tabbrowser.xml
browser/base/content/test/general/browser_overflowScroll.js
browser/base/content/test/performance/browser_startup_images.js
browser/base/content/test/performance/head.js
browser/themes/linux/browser.css
browser/themes/linux/compacttheme.css
browser/themes/linux/jar.mn
browser/themes/linux/linuxShared.inc
browser/themes/linux/moz.build
browser/themes/linux/tabbrowser/tab-active-middle.png
browser/themes/linux/tabbrowser/tab-active-middle@2x.png
browser/themes/linux/tabbrowser/tab-background-end.png
browser/themes/linux/tabbrowser/tab-background-end@2x.png
browser/themes/linux/tabbrowser/tab-background-middle.png
browser/themes/linux/tabbrowser/tab-background-middle@2x.png
browser/themes/linux/tabbrowser/tab-background-start.png
browser/themes/linux/tabbrowser/tab-background-start@2x.png
browser/themes/linux/tabbrowser/tab-stroke-end.png
browser/themes/linux/tabbrowser/tab-stroke-end@2x.png
browser/themes/linux/tabbrowser/tab-stroke-start.png
browser/themes/linux/tabbrowser/tab-stroke-start@2x.png
browser/themes/osx/browser.css
browser/themes/osx/jar.mn
browser/themes/osx/moz.build
browser/themes/osx/shared.inc
browser/themes/osx/tabbrowser/alltabs-box-bkgnd-icon-inverted.png
browser/themes/osx/tabbrowser/alltabs-box-bkgnd-icon-inverted@2x.png
browser/themes/osx/tabbrowser/alltabs-box-bkgnd-icon.png
browser/themes/osx/tabbrowser/alltabs-box-bkgnd-icon@2x.png
browser/themes/osx/tabbrowser/tab-active-middle-yosemite-inactive.png
browser/themes/osx/tabbrowser/tab-active-middle-yosemite-inactive@2x.png
browser/themes/osx/tabbrowser/tab-active-middle.png
browser/themes/osx/tabbrowser/tab-active-middle@2x.png
browser/themes/osx/tabbrowser/tab-background-end.png
browser/themes/osx/tabbrowser/tab-background-end@2x.png
browser/themes/osx/tabbrowser/tab-background-middle.png
browser/themes/osx/tabbrowser/tab-background-middle@2x.png
browser/themes/osx/tabbrowser/tab-background-start.png
browser/themes/osx/tabbrowser/tab-background-start@2x.png
browser/themes/osx/tabbrowser/tab-selected-end-yosemite-inactive.svg
browser/themes/osx/tabbrowser/tab-selected-start-yosemite-inactive.svg
browser/themes/osx/tabbrowser/tab-stroke-end-yosemite-inactive.png
browser/themes/osx/tabbrowser/tab-stroke-end-yosemite-inactive@2x.png
browser/themes/osx/tabbrowser/tab-stroke-end.png
browser/themes/osx/tabbrowser/tab-stroke-end@2x.png
browser/themes/osx/tabbrowser/tab-stroke-start-yosemite-inactive.png
browser/themes/osx/tabbrowser/tab-stroke-start-yosemite-inactive@2x.png
browser/themes/osx/tabbrowser/tab-stroke-start.png
browser/themes/osx/tabbrowser/tab-stroke-start@2x.png
browser/themes/preprocess-tab-svgs.py
browser/themes/shared/browser.inc.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/shared/tab-selected.svg
browser/themes/shared/tabs.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/tab-svgs.mozbuild
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
browser/themes/windows/jar.mn
browser/themes/windows/moz.build
browser/themes/windows/places/organizer.css
browser/themes/windows/tabbrowser/tab-active-middle.png
browser/themes/windows/tabbrowser/tab-active-middle@2x.png
browser/themes/windows/tabbrowser/tab-background-end-preWin10.png
browser/themes/windows/tabbrowser/tab-background-end-preWin10@2x.png
browser/themes/windows/tabbrowser/tab-background-end.png
browser/themes/windows/tabbrowser/tab-background-end@2x.png
browser/themes/windows/tabbrowser/tab-background-middle-preWin10.png
browser/themes/windows/tabbrowser/tab-background-middle-preWin10@2x.png
browser/themes/windows/tabbrowser/tab-background-middle.png
browser/themes/windows/tabbrowser/tab-background-middle@2x.png
browser/themes/windows/tabbrowser/tab-background-start-preWin10.png
browser/themes/windows/tabbrowser/tab-background-start-preWin10@2x.png
browser/themes/windows/tabbrowser/tab-background-start.png
browser/themes/windows/tabbrowser/tab-background-start@2x.png
browser/themes/windows/tabbrowser/tab-stroke-end.png
browser/themes/windows/tabbrowser/tab-stroke-end@2x.png
browser/themes/windows/tabbrowser/tab-stroke-start.png
browser/themes/windows/tabbrowser/tab-stroke-start@2x.png
browser/themes/windows/windowsShared.inc
toolkit/content/widgets/scrollbox.xml
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -149,17 +149,17 @@ tabbrowser {
 }
 
 .tabbrowser-tab {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
 }
 
 .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,
               max-width 100ms ease-out;
 }
 
 .tabbrowser-tab:not([pinned]):not([fadein]) {
   max-width: 0.1px;
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -5557,17 +5557,16 @@ var TabletModeUpdater = {
     let wasInTabletMode = document.documentElement.hasAttribute("tabletmode");
     if (isInTabletMode) {
       document.documentElement.setAttribute("tabletmode", "true");
     } else {
       document.documentElement.removeAttribute("tabletmode");
     }
     if (wasInTabletMode != isInTabletMode) {
       gUIDensity.update();
-      TabsInTitlebar.updateAppearance(true);
     }
   },
 };
 
 var gTabletModePageCounter = {
   enabled: false,
   inc() {
     this.enabled = AppConstants.isPlatformAndVersionAtLeast("win", "10.0");
@@ -5654,16 +5653,18 @@ var gUIDensity = {
       break;
     case this.MODE_TOUCH:
       doc.setAttribute("uidensity", "touch");
       break;
     default:
       doc.removeAttribute("uidensity");
       break;
     }
+
+    TabsInTitlebar.updateAppearance(true);
   },
 };
 
 var gHomeButton = {
   prefDomain: "browser.startup.homepage",
   observe(aSubject, aTopic, aPrefName) {
     if (aTopic != "nsPref:changed" || aPrefName != this.prefDomain)
       return;
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1288,33 +1288,32 @@
       &pointerlockWarning.generic.label;
     </html:div>
   </html:div>
 
   <vbox id="browser-bottombox" layer="true">
     <notificationbox id="global-notificationbox" notificationside="bottom"/>
   </vbox>
 
+#ifndef MOZ_PHOTON_THEME
   <svg:svg height="0">
-#include tab-shape.inc.svg
-#ifndef MOZ_PHOTON_THEME
     <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" />
 #else
       <svg:path d="M -11,-5 a 16 16 0 0 1 0,34 l 10000,0 l 0,-34 l -10000,0 z"/>
 #endif
     </svg:clipPath>
 #ifdef XP_WIN
     <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
+  </svg:svg>
 #endif
-  </svg:svg>
 
 </vbox>
 # <iframe id="tab-view"> is dynamically appended as the 2nd child of #tab-view-deck.
 #     Introducing the iframe dynamically, as needed, was found to be better than
 #     starting with an empty iframe here in browser.xul from a Ts standpoint.
 </deck>
 
 </window>
deleted file mode 100644
--- a/browser/base/content/tab-shape.inc.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- 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/. -->
-
-<svg:clipPath id="tab-curve-clip-path-start" clipPathUnits="objectBoundingBox">
-  <svg:path d="m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z"/>
-</svg:clipPath>
-
-<svg:clipPath id="tab-curve-clip-path-end" clipPathUnits="objectBoundingBox">
-  <svg:path d="m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z"/>
-</svg:clipPath>
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -14,17 +14,17 @@
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-arrowscrollbox");
 }
 
 .tab-close-button {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-close-tab-button");
 }
 
 .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],
 .tab-throbber:not([busy]),
 .tab-icon-sound:not([soundplaying]):not([muted]):not([activemedia-blocked]),
 .tab-icon-sound[pinned],
 .tab-sharing-icon-overlay,
 .tab-icon-overlay {
@@ -58,20 +58,16 @@
 }
 
 .tab-label-container[textoverflow][labeldirection=rtl]:not([pinned]),
 .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(rtl) {
   direction: rtl;
   mask-image: linear-gradient(to right, transparent, black 2em);
 }
 
-.tab-stack {
-  vertical-align: top; /* for pinned tabs */
-}
-
 tabpanels {
   background-color: transparent;
 }
 
 .tab-drop-indicator {
   position: relative;
   z-index: 2;
 }
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -5899,44 +5899,16 @@
         ]]></body>
       </method>
       <method name="_canScrollToElement">
         <parameter name="tab"/>
         <body><![CDATA[
           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>
       <handler event="underflow" phase="capturing"><![CDATA[
         if (event.originalTarget != this._scrollbox)
           return;
 
         // Ignore vertical events
@@ -5988,22 +5960,20 @@
  right of the newtab button.
 -->
         <children includes="tab"/>
 <!--
   This is to ensure anything extensions put here will go before the newtab
   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">
           <xul:toolbarbutton anonid="restore-tabs-button"
                              class="restore-tabs-button"
                              onclick="SessionStore.restoreLastSession();"/>
         </xul:hbox>
 
@@ -6251,36 +6221,16 @@
 
           this._propagateVisibility();
           this._propagatedVisibilityOnce = true;
 
           return val;
         ]]></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;
 
           document.getElementById("menu_closeWindow").hidden = !visible;
           document.getElementById("menu_close").setAttribute("label",
             this.tabbrowser.mStringBundle.getString(visible ? "tabs.closeTab" : "tabs.close"));
 
@@ -6472,29 +6422,27 @@
           if (doPosition) {
             this.setAttribute("positionpinnedtabs", "true");
 
             let layoutData = this._pinnedTabsLayoutCache;
             if (!layoutData) {
               let tabstrip = this.mTabstrip;
               layoutData = this._pinnedTabsLayoutCache = {
                 pinnedTabWidth: this.childNodes[0].getBoundingClientRect().width,
-                paddingStart: tabstrip.scrollboxPaddingStart,
                 scrollButtonWidth: tabstrip._scrollButtonDown.getBoundingClientRect().width
               };
             }
 
             let width = 0;
             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";
-            }
-            this.style.paddingInlineStart = width + layoutData.paddingStart + "px";
+              tab.style.marginInlineStart = -(width + layoutData.scrollButtonWidth) + "px";
+            }
+            this.style.paddingInlineStart = width + "px";
           } else {
             this.removeAttribute("positionpinnedtabs");
 
             for (let i = 0; i < numPinned; i++) {
               let tab = this.childNodes[i];
               tab.style.marginInlineStart = "";
             }
 
@@ -6666,37 +6614,27 @@
       <method name="_notifyBackgroundTab">
         <parameter name="aTab"/>
         <body><![CDATA[
           if (aTab.pinned || aTab.hidden)
             return;
 
           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};
 
           // Is the new tab already completely visible?
           if (scrollRect.left <= tab.left && tab.right <= scrollRect.right)
             return;
 
           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 ||
                 Math.max(tab.right - selected.left, selected.right - tab.left) <=
                   scrollRect.width) {
               this.mTabstrip.ensureElementIsVisible(aTab);
               return;
             }
@@ -7437,25 +7375,21 @@
   <binding id="tabbrowser-tab" display="xul:hbox"
            extends="chrome://global/content/bindings/tabbox.xml#tab">
     <resources>
       <stylesheet src="chrome://browser/content/tabbrowser.css"/>
     </resources>
 
     <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"
                      class="tab-throbber"
                      role="presentation"
                      layer="true" />
           <xul:image xbl:inherits="src=image,loadingprincipal=iconLoadingPrincipal,fadein,pinned,selected=visuallyselected,busy,crashed,sharing"
                      anonid="tab-icon-image"
--- a/browser/base/content/test/general/browser_overflowScroll.js
+++ b/browser/base/content/test/general/browser_overflowScroll.js
@@ -3,18 +3,18 @@ var scrollbox = tabstrip._scrollbox;
 var originalSmoothScroll = tabstrip.smoothScroll;
 var tabs = gBrowser.tabs;
 
 var rect = ele => ele.getBoundingClientRect();
 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);
 var firstScrollable = () => tabs[gBrowser._numPinnedTabs];
 
 var clickCenter = (ele, opts) => {
   EventUtils.synthesizeMouse(ele, Math.ceil(width(ele) / 2),
                              Math.ceil(height(ele) / 2), opts);
--- a/browser/base/content/test/performance/browser_startup_images.js
+++ b/browser/base/content/test/performance/browser_startup_images.js
@@ -75,31 +75,16 @@ const whitelist = [
     platforms: ["linux", "win", "macosx"],
   },
   {
     file: "chrome://global/skin/icons/autoscroll.png",
     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",
     platforms: ["linux", "win", "macosx"],
   },
 
   {
     file: "resource://gre-resources/loading-image.png",
     platforms: ["win", "macosx"],
@@ -120,42 +105,16 @@ const whitelist = [
   {
     file: "chrome://browser/skin/urlbar-history-dropmarker.png",
     hidpi: "<not loaded>",
     platforms: ["win", "macosx"],
     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",
     platforms: ["macosx"],
   },
 
   {
     file: "chrome://pocket/content/panels/img/pocketmenuitem16.png",
     hidpi: "chrome://pocket/content/panels/img/pocketmenuitem16@2x.png",
--- a/browser/base/content/test/performance/head.js
+++ b/browser/base/content/test/performance/head.js
@@ -171,17 +171,17 @@ async function ensureNoPreloadedBrowser(
  * @return int
  *         The maximum additional tabs that can be fit into the
  *         tabstrip without causing it to overflow.
  */
 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;
 
   let tabMinWidth =
     parseInt(getComputedStyle(gBrowser.selectedTab, null).minWidth, 10);
 
   let maxTabCount = Math.floor(availableTabStripWidth / tabMinWidth) - currentTabCount;
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -6,21 +6,28 @@
 
 @import url("chrome://global/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 @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
   --toolbarbutton-border-radius: 1px;
 
   --backbutton-background: rgba(255,255,255,.15);
   --backbutton-border-color: var(--urlbar-border-color-hover);
 
@@ -40,16 +47,21 @@
   --panel-separator-color: ThreeDShadow;
   --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --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 */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
@@ -65,55 +77,49 @@
   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
   border-bottom: 1px solid ThreeDShadow;
 }
 
 #navigator-toolbox:-moz-lwtheme::after {
   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@);
+:root[customizing] #navigator-toolbox::after {
+  display: none;
 }
 
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#addon-bar):-moz-lwtheme {
-  background-image: linear-gradient(@toolbarHighlightLWT@, @toolbarHighlightLWT@);
-}
-
-#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) {
   overflow: -moz-hidden-unscrollable;
   max-height: 4em;
   transition: min-height 170ms ease-out, max-height 170ms ease-out;
   padding: 1px 4px;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
   min-height: 0.1px;
   max-height: 0;
   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 }
 
 #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;
 }
 
 /* This only has an effect when this element is placed on the bookmarks toolbar.
  * It's 30px to make sure buttons with 18px icons fit along with the default 16px
  * icons, without changing the size of the toolbar.
  */
--- a/browser/themes/linux/compacttheme.css
+++ b/browser/themes/linux/compacttheme.css
@@ -35,25 +35,16 @@
 
 .urlbar-history-dropmarker {
   -moz-appearance: none;
   padding: 0 3px;
   list-style-image: var(--urlbar-dropmarker-url);
   -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 {
   text-shadow: none;
 }
 
 .ac-type-icon {
   /* Left-align the type icon in awesomebar popup results with the icon in the
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -69,34 +69,16 @@ browser.jar:
   skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content-new/preferences.css     (preferences/in-content-new/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
 * skin/classic/browser/preferences/in-content-new/dialog.css          (preferences/in-content-new/dialog.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   skin/classic/browser/social/services-16.png         (social/services-16.png)
   skin/classic/browser/social/services-64.png         (social/services-64.png)
-  skin/classic/browser/tabbrowser/tab-active-middle.png     (tabbrowser/tab-active-middle.png)
-  skin/classic/browser/tabbrowser/tab-active-middle@2x.png  (tabbrowser/tab-active-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-end.png    (tabbrowser/tab-background-end.png)
-  skin/classic/browser/tabbrowser/tab-background-end@2x.png (tabbrowser/tab-background-end@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-middle.png    (tabbrowser/tab-background-middle.png)
-  skin/classic/browser/tabbrowser/tab-background-middle@2x.png (tabbrowser/tab-background-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-start.png     (tabbrowser/tab-background-start.png)
-  skin/classic/browser/tabbrowser/tab-background-start@2x.png  (tabbrowser/tab-background-start@2x.png)
-
-# NOTE: The following two files (tab-selected-end.svg, tab-selected-start.svg) get pre-processed in
-#       Makefile.in with a non-default marker of "%" and the result of that gets packaged.
-  skin/classic/browser/tabbrowser/tab-selected-end.svg      (tab-selected-end.svg)
-  skin/classic/browser/tabbrowser/tab-selected-start.svg    (tab-selected-start.svg)
-
-  skin/classic/browser/tabbrowser/tab-stroke-end.png        (tabbrowser/tab-stroke-end.png)
-  skin/classic/browser/tabbrowser/tab-stroke-end@2x.png     (tabbrowser/tab-stroke-end@2x.png)
-  skin/classic/browser/tabbrowser/tab-stroke-start.png      (tabbrowser/tab-stroke-start.png)
-  skin/classic/browser/tabbrowser/tab-stroke-start@2x.png   (tabbrowser/tab-stroke-start@2x.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png      (tabbrowser/tabDragIndicator.png)
 
   skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
   skin/classic/browser/sync-horizontalbar.png
   skin/classic/browser/sync-horizontalbar@2x.png
   skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
   skin/classic/browser/syncProgress-horizontalbar.png
   skin/classic/browser/syncProgress-horizontalbar@2x.png
deleted file mode 100644
--- a/browser/themes/linux/linuxShared.inc
+++ /dev/null
@@ -1,13 +0,0 @@
-/* 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/. */
-
-%filter substitution
-
-%define toolbarHighlight hsla(0,0%,100%,.15)
-%define toolbarHighlightLWT rgba(255,255,255,.4)
-/* navbarInsetHighlight is tightly coupled to the toolbarHighlight constant. */
-%define navbarInsetHighlight hsla(0,0%,100%,.4)
-%define fgTabTexture linear-gradient(transparent 2px, @toolbarHighlight@ 2px, @toolbarHighlight@)
-%define fgTabTextureLWT linear-gradient(transparent 2px, @toolbarHighlightLWT@ 2px, @toolbarHighlightLWT@)
-%define fgTabBackgroundColor -moz-dialog
--- a/browser/themes/linux/moz.build
+++ b/browser/themes/linux/moz.build
@@ -5,9 +5,8 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += ['communicator']
 
 JAR_MANIFESTS += ['jar.mn']
 
 DEFINES['MENUBAR_CAN_AUTOHIDE'] = 1
 
-include('../tab-svgs.mozbuild')
deleted file mode 100644
index b7e6d6f77ce722b405c93e4afe01869a5431cdea..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 1e92acbda39807d8823f965e8c2b998aedca3539..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index fb353b17e70657d85e501a30ca6e2e6249e83a76..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index eefb6ac47cd820af31556f1d8c6631ad36396baa..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 51e066c2e9c6d71f5ce4846b1b030d2f111127ef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index b26cb95de6ab3231f676a4c939a2bbf210557771..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index cf0dc852ac52f8b6a1d9fdd0b6211494263aa60b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index bbfc77dd189d6885201c4d9e923836485cfd8ad1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2aa5711f8a6775cd21948601b9fb6f6a281f1fda..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a87002a830abab86fc869cd77af8d0eaa8ae7662..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 4e4e41f63210c8f81954919881f9cd8a96cd438b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 13bd6add1590fa55cf0e099d23d4bc7b442bb694..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -9,16 +9,24 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 @namespace svg url("http://www.w3.org/2000/svg");
 
 %include ../shared/browser.inc.css
 
 :root {
+  --tabs-border: rgba(0,0,0,.3);
+
+  --toolbar-non-lwt-bgcolor: #f9f9fa;
+  --toolbar-non-lwt-textcolor: #0c0c0d;
+  --toolbar-non-lwt-bgimage: none;
+  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+  --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
+
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 4px;
 %else
   --space-above-tabbar: 9px;
 
   --toolbarbutton-border-radius: 3px;
@@ -52,16 +60,21 @@
   --panel-separator-color: hsla(210,4%,10%,.14);
   --arrowpanel-dimmed: hsla(210,4%,10%,.07);
   --arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
   --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
 
   --urlbar-separator-color: hsla(0,0%,16%,.2);
 }
 
+:root:-moz-lwtheme {
+  --toolbar-bgcolor: rgba(255,255,255,.4);
+  --toolbar-bgimage: none;
+}
+
 %ifndef MOZ_PHOTON_THEME
 toolbar:-moz-lwtheme {
   --backbutton-background: linear-gradient(rgba(255,255,255,0.5),
                               rgba(255,255,255,0.2) 50%,
                               rgba(255,255,255,0.1) 50%,
                               rgba(255,255,255,0.2)) repeat-x;
 }
 
@@ -85,16 +98,20 @@ toolbar:-moz-lwtheme {
 @media (-moz-mac-yosemite-theme) {
   #navigator-toolbox:-moz-window-inactive::after {
     border-top-style: none;
     border-bottom-color: hsla(0,0%,0%,.1);
     margin-top: -1px;
   }
 }
 
+:root[customizing] #navigator-toolbox::after {
+  display: none;
+}
+
 #navigator-toolbox toolbarbutton:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
 
 #main-window {
   -moz-appearance: none;
   background-color: #eeeeee;
@@ -168,19 +185,19 @@ toolbar:-moz-lwtheme {
 
 /** End titlebar **/
 
 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 %ifdef MOZ_PHOTON_THEME
-#navigator-toolbox > toolbar:not(#TabsToolbar):not(:-moz-lwtheme) {
+#navigator-toolbox > toolbar:not(#TabsToolbar) {
   -moz-appearance: none;
-  background: var(--toolbar-background-color);
+  background: var(--toolbar-bgcolor);
 }
 %else
 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) {
   -moz-appearance: none;
   background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
 }
 
 /* remove noise texture on Yosemite */
@@ -243,39 +260,40 @@ toolbar:-moz-lwtheme {
 }
 %endif
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
-  border-top: 1px solid hsla(0,0%,0%,.3);
+  border-top: 1px solid var(--tabs-border);
   background-clip: padding-box;
-  margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 /* Always draw a border on Yosemite to ensure the border is well-defined there
  * (the default border is too light). */
 @media (-moz-mac-yosemite-theme) {
+  :root:not(:-moz-lwtheme) {
+    --tabs-border: rgba(0,0,0,.2);
+  }
+  :root:not(:-moz-lwtheme):-moz-window-inactive {
+    --tabs-border: rgba(0,0,0,.05);
+  }
+
   #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
-    border-top: 1px solid hsla(0,0%,0%,.2);
+    border-top: 1px solid var(--tabs-border);
     background-clip: padding-box;
-    margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
     /* Position the toolbar above the bottom of background tabs */
     position: relative;
     z-index: 1;
   }
-
-  #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-window-inactive:not(:-moz-lwtheme) {
-    border-top-color: hsla(0,0%,0%,.05);
-  }
 }
 
 #PersonalToolbar {
   padding: 0 4px 4px;
 }
 
 #PersonalToolbar:not([collapsed=true]) {
   /* 4px padding ^  plus 19px personal-bookmarks (see below) */
@@ -1412,118 +1430,33 @@ toolbarbutton.chevron > .toolbarbutton-m
 
 .tab-label {
   margin-top: 1px;
   margin-bottom: 0;
   -moz-box-flex: 1;
   text-align: center;
 }
 
-@media (-moz-mac-yosemite-theme) {
-  /* image preloading hack from shared/tabs.inc.css */
-  #tabbrowser-tabs::before {
-    background-image:
-      url(chrome://browser/skin/yosemite/tab-selected-end-inactive.svg),
-      url(chrome://browser/skin/yosemite/tab-selected-start-inactive.svg),
-      url(chrome://browser/skin/yosemite/tab-stroke-start-inactive.png),
-      url(chrome://browser/skin/yosemite/tab-active-middle-inactive.png),
-      url(chrome://browser/skin/yosemite/tab-stroke-end-inactive.png),
-      url(chrome://browser/skin/tabbrowser/tab-selected-end.svg),
-      url(chrome://browser/skin/tabbrowser/tab-selected-start.svg),
-      url(chrome://browser/skin/tabbrowser/tab-stroke-end.png),
-      url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-      url(chrome://browser/skin/tabbrowser/tab-stroke-start.png),
-      url(chrome://browser/skin/tabbrowser/tab-background-end.png),
-      url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
-      url(chrome://browser/skin/tabbrowser/tab-background-start.png);
-  }
-
-  .tab-background-middle[selected=true]:-moz-window-inactive {
-    background-image: url(chrome://browser/skin/yosemite/tab-active-middle-inactive.png),
-                      @fgTabTextureYosemiteInactive@,
-                      none;
-  }
-
-  .tab-background-start[selected=true]:-moz-window-inactive:-moz-locale-dir(ltr)::after,
-  .tab-background-end[selected=true]:-moz-window-inactive:-moz-locale-dir(rtl)::after {
-    background-image: url(chrome://browser/skin/yosemite/tab-stroke-start-inactive.png);
-  }
-
-  .tab-background-end[selected=true]:-moz-window-inactive:-moz-locale-dir(ltr)::after,
-  .tab-background-start[selected=true]:-moz-window-inactive:-moz-locale-dir(rtl)::after {
-    background-image: url(chrome://browser/skin/yosemite/tab-stroke-end-inactive.png);
-  }
-
-  .tab-background-start[selected=true]:-moz-window-inactive:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
-  .tab-background-end[selected=true]:-moz-window-inactive:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
-    background-image: url(chrome://browser/skin/yosemite/tab-selected-start-inactive.svg);
-    background-size: 100% 100%;
-  }
-
-  .tab-background-end[selected=true]:-moz-window-inactive:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
-  .tab-background-start[selected=true]:-moz-window-inactive:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
-    background-image: url(chrome://browser/skin/yosemite/tab-selected-end-inactive.svg);
-    background-size: 100% 100%;
-  }
-
-  @media (min-resolution: 2dppx) {
-    /* image preloading hack from shared/tabs.inc.css */
-    #tabbrowser-tabs::before {
-      background-image:
-        url(chrome://browser/skin/yosemite/tab-selected-end-inactive.svg),
-        url(chrome://browser/skin/yosemite/tab-selected-start-inactive.svg),
-        url(chrome://browser/skin/yosemite/tab-stroke-start-inactive@2x.png),
-        url(chrome://browser/skin/yosemite/tab-active-middle-inactive@2x.png),
-        url(chrome://browser/skin/yosemite/tab-stroke-end-inactive@2x.png),
-        url(chrome://browser/skin/tabbrowser/tab-selected-end.svg),
-        url(chrome://browser/skin/tabbrowser/tab-selected-start.svg),
-        url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png),
-        url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
-        url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png),
-        url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
-        url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
-        url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
-    }
-
-    .tab-background-middle[selected=true]:-moz-window-inactive {
-      background-image: url(chrome://browser/skin/yosemite/tab-active-middle-inactive@2x.png),
-                        @fgTabTextureYosemiteInactive@,
-                        none;
-    }
-
-    .tab-background-start[selected=true]:-moz-window-inactive:-moz-locale-dir(ltr)::after,
-    .tab-background-end[selected=true]:-moz-window-inactive:-moz-locale-dir(rtl)::after {
-      background-image: url(chrome://browser/skin/yosemite/tab-stroke-start-inactive@2x.png);
-    }
-
-    .tab-background-end[selected=true]:-moz-window-inactive:-moz-locale-dir(ltr)::after,
-    .tab-background-start[selected=true]:-moz-window-inactive:-moz-locale-dir(rtl)::after {
-      background-image: url(chrome://browser/skin/yosemite/tab-stroke-end-inactive@2x.png);
-    }
-  }
-}
-
 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
   opacity: .9;
 }
 
 /*
  * Force the overlay to create a new stacking context so it always appears on
  * top of the icon.
  */
 .tab-icon-overlay {
   opacity: 0.9999;
 }
 
 .tab-label-container:not([selected="true"]) {
   opacity: .7;
 }
 
-.tabbrowser-tab,
-.tabs-newtab-button {
+.tabbrowser-tab {
   font: message-box;
   border: none;
 }
 
 .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
   /* overriding tabbox.css */
 %ifdef MOZ_PHOTON_THEME
   color: hsl(240, 5%, 5%);
@@ -1532,22 +1465,16 @@ toolbarbutton.chevron > .toolbarbutton-m
 %endif
 }
 
 .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
-.tabs-newtab-button > .toolbarbutton-icon {
-  -moz-box-align: center;
-  border: solid transparent;
-  border-width: 0 11px;
-}
-
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned],
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 #TabsToolbar {
   -moz-appearance: none;
@@ -1581,20 +1508,16 @@ toolbarbutton.chevron > .toolbarbutton-m
 #navigator-toolbox[inFullscreen] > #TabsToolbar {
   padding-top: var(--space-above-tabbar);
 }
 %endif
 #tabbrowser-tabs {
   -moz-box-align: stretch;
 }
 
-.tabs-newtab-button > .toolbarbutton-icon {
-  padding: 6px 0 4px;
-}
-
 /**
  * Tab Drag and Drop
  */
 
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-top: -2px;
   z-index: 3;
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -104,34 +104,16 @@ browser.jar:
 * skin/classic/browser/preferences/in-content-new/preferences.css     (preferences/in-content-new/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
 * skin/classic/browser/preferences/in-content-new/dialog.css          (preferences/in-content-new/dialog.css)
   skin/classic/browser/preferences/applications.css         (preferences/applications.css)
   skin/classic/browser/social/services-16.png               (social/services-16.png)
   skin/classic/browser/social/services-16@2x.png            (social/services-16@2x.png)
   skin/classic/browser/social/services-64.png               (social/services-64.png)
   skin/classic/browser/social/services-64@2x.png            (social/services-64@2x.png)
-  skin/classic/browser/tabbrowser/tab-active-middle.png                  (tabbrowser/tab-active-middle.png)
-  skin/classic/browser/tabbrowser/tab-active-middle@2x.png               (tabbrowser/tab-active-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-end.png                 (tabbrowser/tab-background-end.png)
-  skin/classic/browser/tabbrowser/tab-background-end@2x.png              (tabbrowser/tab-background-end@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-middle.png              (tabbrowser/tab-background-middle.png)
-  skin/classic/browser/tabbrowser/tab-background-middle@2x.png           (tabbrowser/tab-background-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-start.png               (tabbrowser/tab-background-start.png)
-  skin/classic/browser/tabbrowser/tab-background-start@2x.png            (tabbrowser/tab-background-start@2x.png)
-
-# NOTE: The following two files (tab-selected-end.svg, tab-selected-start.svg) get pre-processed in
-#       Makefile.in with a non-default marker of "%" and the result of that gets packaged.
-  skin/classic/browser/tabbrowser/tab-selected-end.svg                   (tab-selected-end.svg)
-  skin/classic/browser/tabbrowser/tab-selected-start.svg                 (tab-selected-start.svg)
-
-  skin/classic/browser/tabbrowser/tab-stroke-end.png                     (tabbrowser/tab-stroke-end.png)
-  skin/classic/browser/tabbrowser/tab-stroke-end@2x.png                  (tabbrowser/tab-stroke-end@2x.png)
-  skin/classic/browser/tabbrowser/tab-stroke-start.png                   (tabbrowser/tab-stroke-start.png)
-  skin/classic/browser/tabbrowser/tab-stroke-start@2x.png                (tabbrowser/tab-stroke-start@2x.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png                   (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabbrowser/tabDragIndicator@2x.png                (tabbrowser/tabDragIndicator@2x.png)
   skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
   skin/classic/browser/sync-horizontalbar.png
   skin/classic/browser/sync-horizontalbar@2x.png
   skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
   skin/classic/browser/syncProgress-horizontalbar.png
   skin/classic/browser/syncProgress-horizontalbar@2x.png
@@ -143,24 +125,16 @@ browser.jar:
   skin/classic/browser/yosemite/menuPanel-exit.png                     (menuPanel-exit-yosemite.png)
   skin/classic/browser/yosemite/menuPanel-exit@2x.png                  (menuPanel-exit-yosemite@2x.png)
   skin/classic/browser/yosemite/menuPanel-help.png                     (menuPanel-help-yosemite.png)
   skin/classic/browser/yosemite/menuPanel-help@2x.png                  (menuPanel-help-yosemite@2x.png)
   skin/classic/browser/yosemite/reload-stop-go.png                     (reload-stop-go-yosemite.png)
   skin/classic/browser/yosemite/reload-stop-go@2x.png                  (reload-stop-go-yosemite@2x.png)
   skin/classic/browser/yosemite/sync-horizontalbar.png                 (sync-horizontalbar-yosemite.png)
   skin/classic/browser/yosemite/sync-horizontalbar@2x.png              (sync-horizontalbar-yosemite@2x.png)
-  skin/classic/browser/yosemite/tab-selected-end-inactive.svg          (tabbrowser/tab-selected-end-yosemite-inactive.svg)
-  skin/classic/browser/yosemite/tab-selected-start-inactive.svg        (tabbrowser/tab-selected-start-yosemite-inactive.svg)
-  skin/classic/browser/yosemite/tab-active-middle-inactive.png         (tabbrowser/tab-active-middle-yosemite-inactive.png)
-  skin/classic/browser/yosemite/tab-active-middle-inactive@2x.png      (tabbrowser/tab-active-middle-yosemite-inactive@2x.png)
-  skin/classic/browser/yosemite/tab-stroke-end-inactive.png            (tabbrowser/tab-stroke-end-yosemite-inactive.png)
-  skin/classic/browser/yosemite/tab-stroke-end-inactive@2x.png         (tabbrowser/tab-stroke-end-yosemite-inactive@2x.png)
-  skin/classic/browser/yosemite/tab-stroke-start-inactive.png          (tabbrowser/tab-stroke-start-yosemite-inactive.png)
-  skin/classic/browser/yosemite/tab-stroke-start-inactive@2x.png       (tabbrowser/tab-stroke-start-yosemite-inactive@2x.png)
 #ifdef E10S_TESTING_ONLY
   skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)
 #endif
 
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 % override chrome://browser/skin/feeds/audioFeedIcon.png                   chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/audioFeedIcon16.png                 chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/feeds/videoFeedIcon.png                   chrome://browser/skin/feeds/feedIcon.png
--- a/browser/themes/osx/moz.build
+++ b/browser/themes/osx/moz.build
@@ -5,9 +5,8 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += ['communicator']
 
 JAR_MANIFESTS += ['jar.mn']
 
 DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1
 
-include('../tab-svgs.mozbuild')
--- a/browser/themes/osx/shared.inc
+++ b/browser/themes/osx/shared.inc
@@ -1,12 +1,7 @@
 %include ../../../toolkit/themes/osx/global/shared.inc
 %include ../shared/browser.inc
 
 %filter substitution
 
-%define fgTabTexture linear-gradient(transparent 2px, hsl(0,0%,99%) 2px, hsl(0,0%,93%))
-%define fgTabTextureYosemiteInactive linear-gradient(transparent 2px, hsl(0,0%,99%) 2px, hsl(0,0%,97%))
-%define toolbarColorLWT rgba(253,253,253,0.45)
-%define fgTabTextureLWT linear-gradient(transparent 2px, rgba(254,254,254,.72) 2px, @toolbarColorLWT@)
-%define fgTabBackgroundColor transparent
 %define hudButton -moz-appearance: none; color: #434343; border-radius: 4px; border: 1px solid #b5b5b5; background: linear-gradient(#fff, #f2f2f2); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 0 1px rgba(255,255, 255,.25), 0 1px rgba(255,255,255,.3); background-clip: padding-box; background-origin: padding-box; padding: 2px 6px;
 %define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255,255,255,.3);
deleted file mode 100644
index 295b4ad74e62c9d7fb816500a62a1d1e6295f42d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 23889d7cc5f7cdfa78e750e93a41b2caf9daac46..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 4d71308d278644ee9dda74ddac9207c0b1b26b3b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 875f73c5e2080b247f9345f10677fdf42f33039a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 9f74c4e7654d18ca9b811c778ebf8586ba525dcd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 50961db7ec08f990d349ab94ebe4296cddd72368..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index c3e5e18ba3ceddcf098a5b98a5f40c784a7e3d52..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 6cdc4472e71aeb715582a8eeb03bd471e61514e2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2e515a39efeaafc71c8ee00bc29baa7ca952ce0f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 18dba96930805a30ca1af7dd5a30dea29b9e1063..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index addb64b13f422a34d6b87e4e75488f9fa2e35ba3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 41eba94af8863a032df6dd6a170a511fe06c1cf0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 243bf0099ffe7760843fc75b98d1029d9c9efbef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 86403921de9c7a9543879e3a4a2963e3d472e26b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
--- a/browser/themes/osx/tabbrowser/tab-selected-end-yosemite-inactive.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="31px" preserveAspectRatio="none">
-  <defs>
-    <style>
-      #tab-background-fill {
-        background-color: transparent;
-        background-image: linear-gradient(transparent, transparent 2px, hsl(0,0%,99%) 2px, hsl(0,0%,97%));
-        background-repeat: no-repeat;
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-
-    <clipPath id="tab-curve-clip-path-end" clipPathUnits="objectBoundingBox">
-      <path d="m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z"/>
-    </clipPath>
-  </defs>
-
-  <foreignObject width="30" height="31" clip-path="url(#tab-curve-clip-path-end)">
-    <div id="tab-background-fill" xmlns="http://www.w3.org/1999/xhtml"></div>
-  </foreignObject>
-</svg>
deleted file mode 100644
--- a/browser/themes/osx/tabbrowser/tab-selected-start-yosemite-inactive.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="31px" preserveAspectRatio="none">
-  <defs>
-    <style>
-      #tab-background-fill {
-        background-color: transparent;
-        background-image: linear-gradient(transparent, transparent 2px, hsl(0,0%,99%) 2px, hsl(0,0%,97%));
-        background-repeat: no-repeat;
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-
-    <clipPath id="tab-curve-clip-path-start" clipPathUnits="objectBoundingBox">
-      <path d="m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z"/>
-    </clipPath>
-  </defs>
-
-  <foreignObject width="30" height="31" clip-path="url(#tab-curve-clip-path-start)">
-    <div id="tab-background-fill" xmlns="http://www.w3.org/1999/xhtml"></div>
-  </foreignObject>
-</svg>
deleted file mode 100644
index 4206f0c7dca0188d886a6a10f4a9ba0a6c7767dc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 21ac892703cffc3bb16e4c63e7735984b598f23c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100755
index 099978580391777f4fdd196fc9aa160ebf4123a7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index d321ca579016cf5fe8b0d4be6bbb42e3d2216fa1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2acbac438c6aea4c4f3c4b0a2efb859a5f8945d7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a12fc39a7b10829cffefb0f736eebd8a545ef19f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100755
index e5a7b5ee9aecb73410b5cacdd4951b2520b54bca..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 64449115cc9ffbcccacffbb3219467fd81086f0d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100755
--- a/browser/themes/preprocess-tab-svgs.py
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env python
-
-# 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/.
-
-import buildconfig
-
-from mozbuild.preprocessor import preprocess
-
-# By default, the pre-processor used for jar.mn will use "%" as a marker
-# for ".css" files and "#" otherwise. This falls apart when a file using
-# one marker needs to include a file with the other marker since the
-# pre-processor instructions in the included file will not be
-# processed. The following SVG files need to include a file which uses
-# "%" as the marker so we invoke the pre- processor ourselves here with
-# the marker specified. The resulting SVG files will get packaged by the
-# processing of the jar file in the appropriate directory.
-def _do_preprocessing(output_svg, input_svg_file, additional_defines):
-    additional_defines.update(buildconfig.defines)
-    return preprocess(output=output_svg,
-                      includes=[input_svg_file],
-                      marker='%',
-                      defines=additional_defines)
-
-def tab_side_start(output_svg, input_svg_file):
-    return _do_preprocessing(output_svg, input_svg_file, {'TAB_SIDE': 'start'})
-
-def tab_side_end(output_svg, input_svg_file):
-    return _do_preprocessing(output_svg, input_svg_file, {'TAB_SIDE': 'end'})
-
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -12,37 +12,16 @@
 %else
 :root[tabsintitlebar][sizemode=normal] #TabsToolbar
 %endif
 {
   padding-inline-start: 40px;
 }
 %endif
 
-%ifdef MOZ_PHOTON_THEME
-:root {
-  --toolbar-background-color: -moz-dialog;
-  --toolbar-foreground-color: -moz-dialogtext;
-}
-/* Colour to use for toolbars and customize mode */
-%if defined(XP_WIN) || defined(XP_MACOSX)
-%ifdef XP_WIN
-@media (-moz-windows-default-theme) {
-%endif
-:root {
-  --toolbar-background-color: #f9f9fa;
-  --toolbar-foreground-color: #0c0c0d;
-}
-%ifdef XP_WIN
-}
-%endif
-%endif
-%endif
-
-
 /* Go button */
 .urlbar-go-button {
   padding: 0 3px;
   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
 }
 
 .urlbar-go-button {
   -moz-image-region: rect(0, 42px, 14px, 28px);
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -1,26 +1,28 @@
 % 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/.
 
 /* compacttheme.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their compacttheme.css files. */
 
-:root {
-  --tab-toolbar-navbar-overlap: 0px;
-  --navbar-tab-toolbar-highlight-overlap: 0px;
+:root:-moz-lwtheme {
 %ifndef MOZ_PHOTON_THEME
   --space-above-tabbar: 0px;
-%endif
-  --toolbarbutton-text-shadow: none;
   --backbutton-urlbar-overlap: 0px;
   /* 18px icon + 2 * 5px padding + 1 * 1px border */
   --forwardbutton-width: 29px;
+%endif
+  --toolbar-bgcolor: var(--chrome-secondary-background-color);
+  --toolbar-gbimage: none;
+  --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
+  --toolbar-non-lwt-textcolor: var(--chrome-color);
+  --toolbar-non-lwt-bgimage: none;
 }
 
 :root:-moz-lwtheme-brighttext {
 
 %ifndef MOZ_PHOTON_THEME
 
   /* Chrome */
   --chrome-background-color: #272b35;
@@ -29,46 +31,33 @@
   --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
   --chrome-nav-buttons-background: #252C33;
   --chrome-nav-buttons-hover-background: #1B2127;
   --chrome-nav-bar-controls-border-color: #1D2328;
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
-  /* Tabs */
-  --tab-background-color: #272b35;
-  --tab-hover-background-color: #07090a;
-  --tab-selection-color: #f5f7fa;
-  --tab-selection-background-color: #5675B9;
-  --tab-selection-box-shadow: none;
-
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%);
 
 
 %else
 
   /* Chrome */
   --chrome-background-color: hsl(240, 5%, 5%);
-  --chrome-color: #F5F7FA;
+  --chrome-color: rgb(249, 249, 250);
   --chrome-secondary-background-color: hsl(240, 1%, 20%);
   --chrome-navigator-toolbox-separator-color: hsla(240, 5%, 5%, .1);
   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
   --chrome-nav-buttons-background: hsla(240, 5%, 5%, .1);
   --chrome-nav-buttons-hover-background: hsla(240, 5%, 5%, .15);
   --chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
-  /* Tabs */
-  --tab-hover-background-color: hsla(240, 9%, 98%, .1);
-  --tab-selection-color: #f5f7fa;
-  --tab-selection-background-color: hsl(240, 1%, 20%);
-  --tab-selection-box-shadow: none;
-
   --toolbarbutton-icon-fill-inverted: rgba(249, 249, 250, .7);
 
 %endif
 
   /* Url and search bars */
 %ifndef MOZ_PHOTON_THEME
   --url-and-searchbar-background-color: #171B1F;
 %else
@@ -107,21 +96,16 @@ toolbar:-moz-lwtheme-brighttext  {
   --chrome-navigator-toolbox-separator-color: #cccccc;
   --chrome-nav-bar-separator-color: #B6B6B8;
   --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
   --chrome-nav-buttons-hover-background: #DADBDB;
   --chrome-nav-bar-controls-border-color: #ccc;
   --chrome-selection-color: #f5f7fa;
   --chrome-selection-background-color: #4c9ed9;
 
-  --tab-background-color: #E3E4E6;
-  --tab-hover-background-color: #D7D8DA;
-  --tab-selection-color: #f5f7fa;
-  --tab-selection-background-color: #4c9ed9;
-  --tab-selection-box-shadow: none;
 %ifndef MOZ_PHOTON_THEME
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
 %endif
 }
 
 %ifndef MOZ_PHOTON_THEME
 /* Override the lwtheme-specific styling for toolbar buttons */
 :root:-moz-lwtheme-darktext,
@@ -136,59 +120,26 @@ toolbar:-moz-lwtheme-darktext {
 }
 
 /* Give some space to drag the window around while customizing
    (normal space to left and right of tabs doesn't work in this case) */
 #main-window[tabsintitlebar][customizing] {
   --space-above-tabbar: 9px;
 }
 %endif
-/* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
-.tab-background-middle {
-  border-left-width: 0;
-  border-right-width: 0;
-  margin: 0;
-}
-
-.tab-background,
-.tabs-newtab-button {
-  margin-inline-end: 0;
-  margin-inline-start: 0;
-}
-
-.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-.tab-background-start[selected=true]::after,
-.tab-background-start[selected=true]::before,
-.tab-background-start,
-.tab-background-end,
-.tab-background-end[selected=true]::after,
-.tab-background-end[selected=true]::before {
-  width: 0;
-}
-
-.tab-background-start[selected=true]::after,
-.tab-background-end[selected=true]::after {
-  margin-inline-start: 0;
-}
-/* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */
 
 #urlbar ::-moz-selection,
 #navigator-toolbox .searchbar-textbox ::-moz-selection,
 .browserContainer > findbar ::-moz-selection {
   background-color: var(--chrome-selection-background-color);
   color: var(--chrome-selection-color);
 }
 
 /* Change the base colors for the browser chrome */
 
-#tabbrowser-tabs,
 #TabsToolbar,
 #browser-panel {
   background: var(--chrome-background-color);
   color: var(--chrome-color);
 }
 
 #navigator-toolbox:-moz-lwtheme::after {
   border-bottom-color: var(--chrome-navigator-toolbox-separator-color);
@@ -207,17 +158,17 @@ toolbar:-moz-lwtheme-darktext {
 .browserContainer > findbar .found-matches {
   color: inherit;
 }
 
 #navigator-toolbox .toolbarbutton-1,
 .browserContainer > findbar .findbar-button,
 #PlacesToolbar toolbarbutton.bookmark-item {
   color: var(--chrome-color);
-  text-shadow: var(--toolbarbutton-text-shadow);
+  text-shadow: none;
 }
 
 #TabsToolbar {
   text-shadow: none !important;
 }
 %ifndef MOZ_PHOTON_THEME
 
 /* Back and forward button */
@@ -309,103 +260,44 @@ window:not([chromehidden~="toolbar"]) #u
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
   background-color: rgba(255,255,255,.2);
 }
 
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
   background-color: rgba(255,255,255,.3);
 }
 
-/* Nav bar specific stuff */
-#nav-bar {
-  margin-top: 0 !important;
-  border-top: none !important;
-  border-bottom: none !important;
-  border-radius: 0 !important;
-  box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important;
-}
-
-/* No extra vertical padding for nav bar */
-#nav-bar {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 /* Use smaller back button icon */
 #back-button {
   list-style-image: url("chrome://browser/skin/back.svg");
 }
 
-.tab-background {
-  visibility: hidden;
-}
-
-/* Tab separators */
-.tabbrowser-tab::after,
-.tabbrowser-tab::before {
-  background: currentColor;
-  opacity: 0.2 !important;
-}
-
-.tabbrowser-arrowscrollbox > .scrollbutton-down,
-.tabbrowser-arrowscrollbox > .scrollbutton-up {
-  background-color: var(--tab-background-color);
-  border-color: transparent;
-}
-
-.tabbrowser-tab {
-  /* We normally rely on other tab elements for pointer events, but this
-     theme hides those so we need it set here instead */
-  pointer-events: auto;
-}
-
 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
 %ifdef MOZ_PHOTON_THEME
   background-position: center bottom -4px;
 %else
   background-image: var(--pinned-tab-glow);
   background-position: center;
   background-size: 100%;
 %endif
 }
 
 .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
   background-position: left bottom var(--tab-toolbar-navbar-overlap);
   background-size: 34px 100%;
 }
 
-.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
-.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
-.tabbrowser-tab:hover {
-  background-color: var(--tab-hover-background-color);
-}
-
-.tabbrowser-tab[visuallyselected] {
-  color: var(--tab-selection-color) !important; /* Override color: inherit */
-  background-color: var(--tab-selection-background-color);
-}
-
 .tab-throbber[selected][progress] {
   list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .tab-throbber[selected][progress] {
     list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted@2x.png");
   }
 }
 
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted] {
   filter: none !important; /* removes drop-shadow filter */
 }
 
-/* Don't need space for the tab curves (66px - 30px) */
-.tabs-newtab-button {
-  width: 36px;
-}
-
-.tabs-newtab-button:hover {
-  /* Important needed because !important is used in browser.css */
-  background-color: var(--tab-hover-background-color) !important;
-  background-image: none;
-}
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -95,51 +95,52 @@
 #PanelUI-contents > .panel-customization-placeholder {
   cursor: auto;
   outline-offset: -5px;
 }
 %endif
 
 #main-window[customizing] .customization-target:not(#PanelUI-contents):not(#widget-overflow-fixed-list) {
   min-width: 100px;
-  padding-left: 10px;
-  padding-right: 10px;
 }
 
 #customization-container {
 %ifdef MOZ_PHOTON_THEME
-  background-color: var(--toolbar-background-color);
-  color: var(--toolbar-foreground-color);
+  background-color: var(--toolbar-non-lwt-bgcolor);
+  background-image: var(--toolbar-non-lwt-bgimage);
+  color: var(--toolbar-non-lwt-textcolor);
 %else
   background-color: -moz-field;
   color: -moz-fieldText;
 %endif
   text-shadow: none;
 }
 
+#customization-container:-moz-lwtheme {
+  background-color: transparent;
+  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-non-lwt-bgcolor) 45px);
+}
+
 #customization-palette,
 #customization-empty {
   padding: 5px 20px 20px;
 }
 
 #customization-header {
-%ifdef MOZ_PHOTON_THEME;
-  border-bottom: 1px solid ThreeDLightShadow;
-  font-size: 1.75em;
-  line-height: 1.75em;
-  color: GrayText;
-  font-weight: 200;
-  padding-bottom: 12px;
-%else
   font-weight: 600;
   font-size: 1.2em;
-%endif
   margin: 20px 20px 15px;
 }
 
+#customization-header:-moz-lwtheme {
+  text-shadow: 0 0 1em var(--toolbar-non-lwt-bgcolor),
+               0 0 1em var(--toolbar-non-lwt-bgcolor),
+               0 0 .5em var(--toolbar-non-lwt-bgcolor);
+}
+
 #customization-panel-container {
 %ifndef MOZ_PHOTON_THEME
   padding: 15px 25px 25px;
   background-image: linear-gradient(to bottom, #3e86ce, #3878ba);
 %else
   padding: 0 20px 25px;
 %endif
 }
@@ -147,17 +148,17 @@
 %ifndef MOZ_PHOTON_THEME
 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
 #customization-footer {
   background-color: -moz-dialog;
 }
 %endif
 
 #customization-footer {
-  border-top: 2px solid ThreeDLightShadow;
+  border-top: 1px solid rgba(0,0,0,.15);
   padding: 10px;
 }
 
 %if defined(XP_MACOSX) || defined(XP_WIN)
 %ifdef XP_WIN
 @media (-moz-windows-default-theme) {
 %endif
 
@@ -347,16 +348,20 @@ toolbarpaletteitem[place="toolbar"] {
   border-top: 0px solid transparent;
   border-bottom: 0px solid transparent;
 }
 
 #customization-palette:not([hidden]) {
   margin-bottom: 20px;
 }
 
+#customization-palette .toolbarbutton-1 {
+  fill: currentColor;
+}
+
 toolbarpaletteitem[place="palette"]:-moz-focusring,
 toolbarpaletteitem[place="panel"]:-moz-focusring,
 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
   outline-width: 0;
 }
 
 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
deleted file mode 100644
--- a/browser/themes/shared/tab-selected.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="30px" height="31px" preserveAspectRatio="none">
-  <defs>
-    <style>
-%filter substitution
-%ifdef XP_MACOSX
-%include ../osx/shared.inc
-%elif defined(MOZ_WIDGET_GTK)
-%include ../linux/linuxShared.inc
-%else
-%include ../windows/windowsShared.inc
-%endif
-      #tab-background-fill {
-        background-color: @fgTabBackgroundColor@;
-        background-image: @fgTabTexture@;
-        background-repeat: no-repeat;
-        height: 100%;
-        width: 100%;
-      }
-%ifndef MOZ_PHOTON_THEME
-%ifdef XP_WIN
-      @media (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
-        #tab-background-fill {
-          background-color: @customToolbarColor@;
-        }
-      }
-%endif
-%endif
-    </style>
-%include ../../base/content/tab-shape.inc.svg
-  </defs>
-  <foreignObject width="30" height="31" clip-path="url(#tab-curve-clip-path-@TAB_SIDE@)">
-    <div id="tab-background-fill" xmlns="http://www.w3.org/1999/xhtml"></div>
-  </foreignObject>
-</svg>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,70 +1,56 @@
 %if 0
 /* 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/. */
 %endif
 
 :root {
   --tab-toolbar-navbar-overlap: 1px;
-  --navbar-tab-toolbar-highlight-overlap: 1px;
-  --tab-min-height: 31px;
+  --tab-min-height: 33px;
 }
-#TabsToolbar {
-  --tab-stroke-background-size: auto 100%;
-  --tab-curve-width: 30px;
-  --tab-curve-half-width: 15px;
+
+:root[uidensity=compact] {
+  --tab-min-height: 29px;
 }
 
-
-/* image preloading hack */
-#tabbrowser-tabs::before {
-  /* Because of bug 853415, we need to ordinal this to the first position: */
-  -moz-box-ordinal-group: 0;
-  content: '';
-  display: block;
-  background-image:
-    url(chrome://browser/skin/tabbrowser/tab-background-end.png),
-    url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
-    url(chrome://browser/skin/tabbrowser/tab-background-start.png);
+:root[uidensity=touch] {
+  --tab-min-height: 41px;
 }
 
-#tabbrowser-tabs {
+#tabbrowser-tabs,
+.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
   min-height: var(--tab-min-height);
 }
 
-.tabbrowser-tab,
-.tabs-newtab-button {
+.tab-stack {
+  min-height: inherit;
+}
+
+.tabbrowser-tab {
   -moz-appearance: none;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
   margin: 0;
   padding: 0;
 }
 
 .tabbrowser-tab {
   -moz-box-align: stretch;
 }
 
-/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
+/* The selected tab should appear above the border between the tabs toolbar and
+   the navigation toolbar. */
 .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;
 }
 
-.tab-background-middle {
-  -moz-box-flex: 1;
-  background-clip: padding-box;
-  border-left: var(--tab-curve-half-width) solid transparent;
-  border-right: var(--tab-curve-half-width) solid transparent;
-  margin: 0 calc(-1 * var(--tab-curve-half-width));
-}
-
 .tab-content {
   padding-inline-end: 9px;
   padding-inline-start: 9px;
 }
 
 .tab-content[pinned] {
   padding-inline-end: 3px;
 }
@@ -241,35 +227,23 @@
 }
 
 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }
 
-.tab-background,
-.tabs-newtab-button {
-  /* overlap the tab curves */
-  margin-inline-end: calc(-1 * var(--tab-curve-half-width));
-  margin-inline-start: calc(-1 * var(--tab-curve-half-width));
-}
-
-.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-  padding-inline-end: var(--tab-curve-half-width);
-  padding-inline-start: var(--tab-curve-half-width);
-}
-
 /* Tab Overflow */
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
   background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
   background-size: 100% 100%;
   width: 19px;
-  margin-bottom: calc(var(--navbar-tab-toolbar-highlight-overlap) + var(--tab-toolbar-navbar-overlap));
+  margin-bottom: var(--tab-toolbar-navbar-overlap);
   pointer-events: none;
   position: relative;
   z-index: 3; /* the selected tab's z-index + 1 */
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
   transform: scaleX(-1);
@@ -290,180 +264,89 @@
   opacity: 0;
 }
 
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
   transition: opacity 150ms ease;
 }
 
-.tab-background-start[selected=true]::after,
-.tab-background-start[selected=true]::before,
-.tab-background-start,
-.tab-background-end,
-.tab-background-end[selected=true]::after,
-.tab-background-end[selected=true]::before {
-  min-height: var(--tab-min-height);
-  width: var(--tab-curve-width);
-}
-
 .tabbrowser-tab:not([visuallyselected=true]),
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
-/* Selected tab */
-
-/*
- Tab background pseudo-elements which are positioned above .tab-background-start/end:
-   - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where
-                pointer events go for the curve.
-   - ::after  - provides the border/stroke of the tab curve and is overlayed above ::before.  Pointer
-                events go through to ::before to get the proper shape.
- */
-
-
-.tab-background-start[selected=true]::after,
-.tab-background-end[selected=true]::after {
-  /* position ::after on top of its parent */
-  margin-inline-start: calc(-1 * var(--tab-curve-width));
-  background-size: 100% 100%;
-  content: "";
-  display: -moz-box;
-  position: relative;
+.tab-line {
+  height: 2px;
 }
 
-.tab-background-start[selected=true]::before,
-.tab-background-end[selected=true]::before {
-  /* all ::before pseudo elements */
-  content: "";
-  display: -moz-box;
-}
+/* Selected tab */
 
-.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
-.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg);
-  background-size: 100% 100%;
-}
-
-.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
-.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg);
-  background-size: 100% 100%;
-}
-
-/* For lightweight themes, clip the header image on start, middle, and end. */
-.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
-.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
-  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
+.tab-background {
+  border: 1px none transparent;
+  background-clip: padding-box;
 }
 
-.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
-.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
-  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
-}
-
-.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
-.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
-}
-
-.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
-.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
+#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
+  border-top-style: solid;
 }
 
-.tab-background-middle[selected=true] {
-  background-clip: padding-box, padding-box, content-box;
-  background-color: @fgTabBackgroundColor@;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTexture@,
-                    none;
+.tab-background[selected=true] {
+  border-left-style: solid;
+  border-right-style: solid;
+  border-color: var(--tabs-border);
+  background-color: var(--toolbar-bgcolor);
+  background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
-  background-size: var(--tab-stroke-background-size), auto 100%;
-  /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the
-     background-color doesn't extend above the top border. */
-  padding-top: 2px;
 }
 
-/* Selected tab lightweight theme styles.
-   See the "Lightweight theme on tabs" section of this file
-   for information about run-time changes to LWT styles. */
-.tab-background-middle[selected=true]:-moz-lwtheme {
-  background-color: transparent;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTextureLWT@;
-  /* Don't stretch the LWT header images */
-  background-size: var(--tab-stroke-background-size), auto 100%, auto auto;
-}
-
-/* These LWT styles are normally overridden by the "Lightweight theme on tabs"
-   section of this file. */
-.tab-background-start[selected=true]:-moz-lwtheme::before,
-.tab-background-end[selected=true]:-moz-lwtheme::before {
-  background-image: @fgTabTextureLWT@;
-}
-
-.tab-background-start[selected=true]:-moz-lwtheme::before,
-.tab-background-end[selected=true]:-moz-lwtheme::before,
-.tab-background-middle[selected=true]:-moz-lwtheme {
-  background-color: transparent;
+.tab-line[selected=true] {
+  background-color: Highlight;
 }
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
  * image to the lwt-header-image variable, used in each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
-#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start[selected=true]:-moz-lwtheme::before,
-#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
   background-attachment: scroll, fixed;
   background-color: transparent;
-  background-image: @fgTabTextureLWT@, var(--lwt-header-image);
+  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+                    var(--lwt-header-image);
   background-position: 0 0, right top;
   background-repeat: repeat-x, no-repeat;
+  background-size: auto 100%, auto auto;
 }
 
-#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
-  background-attachment: scroll, scroll, fixed;
-  background-color: transparent;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTextureLWT@,
-                    var(--lwt-header-image);
-  background-position: 0 0, 0 0, right top;
-  background-repeat: repeat-x, repeat-x, no-repeat;
+/* Tab hover */
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+  background-color: rgba(0,0,0,.1);
 }
 
-/* End selected tab */
-
-/* new tab button border and gradient on hover */
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
-.tabs-newtab-button:hover {
-  background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
-                    url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
-                    url(chrome://browser/skin/tabbrowser/tab-background-end.png);
-  background-position: left bottom, var(--tab-curve-width) bottom, right bottom;
-  background-repeat: no-repeat;
-  background-size: var(--tab-curve-width) 100%, calc(100% - (2 * var(--tab-curve-width))) 100%, var(--tab-curve-width) 100%;
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+  background-color: rgba(255,255,255,.1);
 }
 
-/* Tab pointer-events */
-.tabbrowser-tab {
-  pointer-events: none;
+.tab-line:not([selected=true]) {
+  opacity: 0;
+  transform: scaleX(0);
+  transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
 }
 
-.tab-background-middle,
-.tabs-newtab-button,
-.tab-icon-overlay[soundplaying],
-.tab-icon-overlay[muted]:not([crashed]),
-.tab-icon-overlay[activemedia-blocked]:not([crashed]),
-.tab-icon-sound,
-.tab-close-button {
-  pointer-events: auto;
+.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
+  background-color: rgba(0,0,0,.2);
+  opacity: 1;
+  transform: none;
+}
+
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
+  background-color: rgba(255,255,255,.2);
 }
 
 /* Pinned tabs */
 
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
   height: 100%;
   position: absolute;
@@ -546,66 +429,20 @@
 #TabsToolbar > toolbarpaletteitem > #new-tab-button {
   list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg);
   -moz-context-properties: fill;
   fill: currentColor;
   color: inherit;
 }
 
 .tabs-newtab-button {
-  width: calc(36px + var(--tab-curve-width));
-}
-
-.tabs-newtab-button > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
-.tabs-newtab-button > .toolbarbutton-icon {
-  /* override drop marker image padding */
-  margin-inline-end: 0;
+  width: 36px;
 }
 
 @media (min-resolution: 1.1dppx) {
-  /* image preloading hack from like lowdpi styles */
-  #tabbrowser-tabs::before {
-    background-image:
-      url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
-      url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
-      url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
-  }
-
-  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
-  .tabs-newtab-button:hover {
-    background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
-                      url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
-                      url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
-  }
-
-  .tab-background-middle[selected=true] {
-    background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
-                      @fgTabTexture@,
-                      none;
-  }
-
-  .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
-  .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
-    background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png);
-  }
-
-  .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
-  .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
-    background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png);
-  }
-
-  #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
-    background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
-                      @fgTabTextureLWT@,
-                      var(--lwt-header-image);
-  }
-
   .tab-throbber[busy] {
     list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png");
   }
 
   .tab-throbber[progress] {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,16 +1,16 @@
 /* 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/. */
 
+%ifndef MOZ_PHOTON_THEME
 %filter substitution
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 %define forwardTransitionLength 150ms
-%ifndef MOZ_PHOTON_THEME
 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
 %endif
 
 :root {
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
   --toolbarbutton-active-background: hsla(240,5%,5%,.15);
 
@@ -96,17 +96,17 @@ toolbar[brighttext] .toolbarbutton-1 > .
 :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon,
 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   max-width: 16px;
 }
 
 #TabsToolbar .toolbarbutton-1,
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
-  margin: 0 0 calc(var(--navbar-tab-toolbar-highlight-overlap) + var(--tab-toolbar-navbar-overlap));
+  margin: 0 0 var(--tab-toolbar-navbar-overlap);
 }
 
 #TabsToolbar .toolbarbutton-1,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-appearance: none;
   padding: 0;
deleted file mode 100644
--- a/browser/themes/tab-svgs.mozbuild
+++ /dev/null
@@ -1,22 +0,0 @@
-# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
-# vim: set filetype=python:
-# 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/.
-
-script = '/browser/themes/preprocess-tab-svgs.py'
-input = ['/browser/themes/shared/tab-selected.svg']
-
-# Context variables can't be used inside functions, so hack around that.
-generated_files = GENERATED_FILES
-
-def generate_svg(svg_name, script_function):
-    global generated_files
-    generated_files += [svg_name]
-    svg = generated_files[svg_name]
-    svg.script = script + ':' + script_function
-    svg.inputs = input
-
-generate_svg('tab-selected-end.svg', 'tab_side_end')
-generate_svg('tab-selected-start.svg', 'tab_side_start')
-
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -17,26 +17,16 @@
     -moz-appearance: none;
     border-bottom: none;
   }
 
   .menu-accel,
   .menu-iconic-accel {
     color: graytext;
   }
-%ifndef MOZ_PHOTON_THEME
-  @media (-moz-os-version: windows-win7) {
-    #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme),
-    #browser-bottombox:not(:-moz-lwtheme),
-    .browserContainer > findbar,
-    .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
-      background-color: @customToolbarColor@;
-    }
-  }
-%endif
 }
 
 @media (-moz-windows-compositor) {
   #main-window {
     -moz-appearance: -moz-win-glass;
   }
 
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -4,24 +4,31 @@
 
 @import url("chrome://global/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 @namespace svg url("http://www.w3.org/2000/svg");
 
 %include ../shared/browser.inc
-%include windowsShared.inc
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 
 %include ../shared/browser.inc.css
 
 :root {
   --titlebar-text-color: currentColor;
 
+  --tabs-border: threedshadow;
+
+  --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);
+
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 2px;
 %else
   --space-above-tabbar: 15px;
 
   --toolbarbutton-border-radius: 1px;
@@ -55,20 +62,33 @@
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDLightShadow;
 }
 
 @media (-moz-windows-default-theme) {
   :root {
+    --tabs-border: rgba(0,0,0,.3);
+
+    --toolbar-non-lwt-bgcolor: #f9f9fa;
+    --toolbar-non-lwt-textcolor: #0c0c0d;
+    --toolbar-non-lwt-bgimage: none;
+
     --panel-separator-color: hsla(210,4%,10%,.14);
   }
 }
 
+:root:-moz-lwtheme {
+  --tabs-border: rgba(0,0,0,.3);
+
+  --toolbar-bgcolor: rgba(255,255,255,.4);
+  --toolbar-bgimage: none;
+}
+
 %ifndef MOZ_PHOTON_THEME
 toolbar[brighttext] {
   --toolbarbutton-hover-background: rgba(255,255,255,.25);
   --toolbarbutton-hover-bordercolor: rgba(255,255,255,.5);
 
   --toolbarbutton-active-background: rgba(255,255,255,.4);
   --toolbarbutton-active-bordercolor: rgba(255,255,255,.7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255,255,255,.4) inset;
@@ -131,35 +151,37 @@ toolbar[brighttext] {
     }
   }
 }
 
 #navigator-toolbox:-moz-lwtheme::after {
   border-bottom-color: rgba(0,0,0,.3);
 }
 
+:root[customizing] #navigator-toolbox::after {
+  display: none;
+}
+
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+  background-color: var(--toolbar-bgcolor);
+  background-image: var(--toolbar-bgimage);
   background-clip: padding-box;
-  background-image: linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
 }
 
 %ifndef MOZ_PHOTON_THEME
 @media (-moz-os-version: windows-win7) {
   #nav-bar {
     background-image: linear-gradient(@toolbarHighlight@, transparent) !important;
   }
 
   #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
     background-image: none;
   }
 }
 %endif
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
-  background-color: -moz-Dialog;
-}
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
   overflow: -moz-hidden-unscrollable;
   max-height: 4em;
   transition: min-height 170ms ease-out, max-height 170ms ease-out;
   padding: 0 5px;
 }
 
@@ -253,67 +275,39 @@ toolbar[brighttext] {
     position: relative;
   }
 
   /* Need to constrain the box shadow fade to avoid overlapping layers, see bug 886281. */
   #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
     overflow: -moz-hidden-unscrollable;
   }
 
-  /**
-   * When the tabstrip is overflowed, pinned tab separators get position: absolute,
-   * which makes the pinned tab separators leak over the nav-bar highlight. Forcing
-   * the element to snap to the bottom of the client rect works around the issue.
-   */
-  #main-window[tabsintitlebar] #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
-    bottom: 0px;
-  }
-
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1 {
-    position: relative;
-    z-index: 1;
-  }
-
-  /**
-   * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
-   * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
-   * border forces the scrollbox button borders to terminate a pixel early, working
-   * around the issue.
-   */
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
-  #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down {
-    border-bottom: 1px solid transparent;
-  }
-
   #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
     /* Render a window top border: */
     background-image: linear-gradient(to bottom,
           ThreeDLightShadow 0, ThreeDLightShadow 1px,
           ThreeDHighlight 1px, ThreeDHighlight 2px,
           ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
   }
 
   /* End classic titlebar gradient */
 
   #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
     color: inherit;
   }
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
-  /* 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 {
-  border-top: 1px solid @toolbarShadowColor@ !important;
-  box-shadow: 0 1px 0 @toolbarHighlight@ inset;
+  border-top: 1px solid var(--tabs-border) !important;
 }
 @media (-moz-windows-compositor: 0) {
   #TabsToolbar[collapsed="true"] + #nav-bar {
     border-top-style: none !important;
   }
 }
 
 #personal-bookmarks {
@@ -1390,41 +1384,16 @@ treechildren.searchbar-treebody::-moz-tr
 #TabsToolbar {
   min-height: 0;
   padding: 0;
   margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
 }
 
 %include ../shared/tabs.inc.css
 
-/* Remove border between tab strip and navigation toolbar on Windows 10+ */
-@media not all and (-moz-os-version: windows-win7) {
-  @media not all and (-moz-os-version: windows-win8) {
-    @media (-moz-windows-default-theme) {
-      .tab-background-end[selected=true]::after,
-      .tab-background-start[selected=true]::after {
-        content: none;
-      }
-
-      #TabsToolbar {
-        --tab-stroke-background-size: 0 0;
-      }
-
-      :root {
-        --tab-toolbar-navbar-overlap: 0px;
-      }
-
-      #nav-bar {
-        border-top-style: none !important;
-        box-shadow: none;
-      }
-    }
-  }
-}
-
 /* Invert the unhovered close tab icons on bright-text tabs */
 @media not all and (min-resolution: 1.1dppx) {
   .tab-close-button:-moz-lwtheme-brighttext,
   #TabsToolbar[brighttext] .tab-close-button:not([selected="true"]) {
     list-style-image: url("chrome://global/skin/icons/close-inverted.png");
   }
 }
 
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -29,20 +29,16 @@
     background: transparent !important;
   }
 }
 
 #TabsToolbar::after {
   display: none;
 }
 
-.tabbrowser-tab {
-  background-color: var(--tab-background-color);
-}
-
 #toolbar-menubar {
   text-shadow: none !important;
 }
 
 .findbar-closebutton:-moz-lwtheme-brighttext,
 /* Tab styling - make sure to use an inverted icon for the selected tab
    (brighttext only covers the unselected tabs) */
 .tab-close-button[selected=true] {
@@ -82,49 +78,31 @@
      need to handle overflowing and non-overflowing tabs separately.
 
      In the case of overflowing tabs, set a border-top on the entire container,
      otherwise we need to set it on each element individually */
   #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
     background-clip: padding-box;
     border-top: 1px solid var(--chrome-nav-bar-separator-color);
     border-inline-end: 1px solid var(--chrome-nav-bar-separator-color);
-    background-color: var(--tab-background-color); /* Make sure there is no transparent gap during tab close animation */
   }
 
   /* Add a border to the left of the first tab (or scroll arrow).  Using .tabbrowser-tabs
      instead of #TabsToolbar because it will work even in customize mode. */
   #main-window[sizemode=normal] .tabbrowser-tabs {
     background-clip: padding-box;
     border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
     border-inline-end: 1px solid transparent;
   }
 
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab,
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-down,
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabs-newtab-button {
-    background-clip: padding-box;
-    border-top: 1px solid var(--chrome-nav-bar-separator-color);
-  }
-
-  /* Allow the border-top rule to take effect */
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab {
-    -moz-border-top-colors: none;
-  }
-
   #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer {
     background-clip: padding-box;
     border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
   }
 
-  .tabs-newtab-button {
-    background: var(--tab-background-color);
-  }
-
   /* Use default window colors when in non-maximized mode */
   #tabbrowser-tabs,
   #TabsToolbar,
   #browser-panel,
   #titlebar-content {
     background: transparent;
   }
 
@@ -153,41 +131,16 @@
     :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
       --titlebar-text-color: InactiveCaptionText;
     }
 
     #main-window[tabsintitlebar] #main-menubar > menu {
       color: inherit;
     }
   }
-
-  /* Use less opacity than normal since this is very dark, and on top of the default toolbar color */
-  .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
-  .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
-    opacity: .6;
-  }
-
-  /* Override scrollbutton gradients in normal and hover state */
-  .tabbrowser-arrowscrollbox > .scrollbutton-down,
-  .tabbrowser-arrowscrollbox > .scrollbutton-up {
-    background-image: none !important;
-    transition: none; /* scrollbutton-down has an unwanted transition on background color */
-  }
-
-  /* Restore draggable space on the sides of tabs when maximized */
-  #main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-
-  /* Override the padding that's intended to compensate for tabs that can overlap border-radius on nav-bar in default theme. */
-  #main-window[sizemode=normal]:not([customizing]) #TabsToolbar {
-    padding-left: 0;
-    padding-right: 0;
-  }
 }
 
 /* Restored windows get an artificial border on windows, because the lwtheme background
  * overlaps the regular window border. That isn't the case for us, so we avoid painting
  * over the native border with our custom borders: */
 #browser-panel {
   /* These are !important to avoid specificity-wars with the selectors that add borders here. */
   background-image: none !important;
@@ -212,22 +165,16 @@
   #main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after,
   #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
     border-left: 1px solid hsla(209,67%,12%,0.35);
     border-right: 1px solid hsla(209,67%,12%,0.35);
   }
 }
 
 @media (-moz-os-version: windows-win10) {
-  /* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */
-  #main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-
   .titlebar-button:-moz-lwtheme {
     -moz-context-properties: stroke;
     stroke: currentColor;
   }
   #titlebar-min:-moz-lwtheme {
     list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
   }
   #titlebar-max:-moz-lwtheme {
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -95,40 +95,16 @@ browser.jar:
   skin/classic/browser/preferences/preferences.css             (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content-new/preferences.css      (preferences/in-content-new/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css       (preferences/in-content/dialog.css)
 * skin/classic/browser/preferences/in-content-new/dialog.css           (preferences/in-content-new/dialog.css)
   skin/classic/browser/preferences/applications.css            (preferences/applications.css)
   skin/classic/browser/social/services-16.png                  (social/services-16.png)
   skin/classic/browser/social/services-64.png                  (social/services-64.png)
-  skin/classic/browser/tabbrowser/tab-active-middle.png        (tabbrowser/tab-active-middle.png)
-  skin/classic/browser/tabbrowser/tab-active-middle@2x.png     (tabbrowser/tab-active-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-start.png     (tabbrowser/tab-background-start.png)
-  skin/classic/browser/tabbrowser/tab-background-start@2x.png  (tabbrowser/tab-background-start@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-middle.png    (tabbrowser/tab-background-middle.png)
-  skin/classic/browser/tabbrowser/tab-background-middle@2x.png (tabbrowser/tab-background-middle@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-end.png       (tabbrowser/tab-background-end.png)
-  skin/classic/browser/tabbrowser/tab-background-end@2x.png    (tabbrowser/tab-background-end@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-start-preWin10.png     (tabbrowser/tab-background-start-preWin10.png)
-  skin/classic/browser/tabbrowser/tab-background-start-preWin10@2x.png  (tabbrowser/tab-background-start-preWin10@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-middle-preWin10.png    (tabbrowser/tab-background-middle-preWin10.png)
-  skin/classic/browser/tabbrowser/tab-background-middle-preWin10@2x.png (tabbrowser/tab-background-middle-preWin10@2x.png)
-  skin/classic/browser/tabbrowser/tab-background-end-preWin10.png       (tabbrowser/tab-background-end-preWin10.png)
-  skin/classic/browser/tabbrowser/tab-background-end-preWin10@2x.png    (tabbrowser/tab-background-end-preWin10@2x.png)
-
-# NOTE: The following two files (tab-selected-end.svg, tab-selected-start.svg) get pre-processed in
-#       Makefile.in with a non-default marker of "%" and the result of that gets packaged.
-  skin/classic/browser/tabbrowser/tab-selected-end.svg         (tab-selected-end.svg)
-  skin/classic/browser/tabbrowser/tab-selected-start.svg       (tab-selected-start.svg)
-
-  skin/classic/browser/tabbrowser/tab-stroke-end.png           (tabbrowser/tab-stroke-end.png)
-  skin/classic/browser/tabbrowser/tab-stroke-end@2x.png        (tabbrowser/tab-stroke-end@2x.png)
-  skin/classic/browser/tabbrowser/tab-stroke-start.png         (tabbrowser/tab-stroke-start.png)
-  skin/classic/browser/tabbrowser/tab-stroke-start@2x.png      (tabbrowser/tab-stroke-start@2x.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png         (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/window-controls/close.svg                 (window-controls/close.svg)
   skin/classic/browser/window-controls/close-highcontrast.svg    (window-controls/close-highcontrast.svg)
   skin/classic/browser/window-controls/close-themes.svg          (window-controls/close-themes.svg)
   skin/classic/browser/window-controls/maximize.svg              (window-controls/maximize.svg)
   skin/classic/browser/window-controls/maximize-highcontrast.svg (window-controls/maximize-highcontrast.svg)
   skin/classic/browser/window-controls/maximize-themes.svg       (window-controls/maximize-themes.svg)
   skin/classic/browser/window-controls/minimize.svg              (window-controls/minimize.svg)
--- a/browser/themes/windows/moz.build
+++ b/browser/themes/windows/moz.build
@@ -6,9 +6,8 @@
 
 DIRS += ['communicator']
 
 JAR_MANIFESTS += ['jar.mn']
 
 DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1
 DEFINES['MENUBAR_CAN_AUTOHIDE'] = 1
 
-include('../tab-svgs.mozbuild')
--- a/browser/themes/windows/places/organizer.css
+++ b/browser/themes/windows/places/organizer.css
@@ -1,15 +1,12 @@
 /* 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/. */
 
-%include ../windowsShared.inc
-%filter substitution
-
 /* Toolbar */
 #placesToolbar {
   padding: 3px;
   padding-inline-end: 6px;
 }
 
 #placesToolbar > toolbarbutton[disabled] > .toolbarbutton-icon {
   opacity: .4;
@@ -165,36 +162,26 @@
     position: relative;
   }
 }
 
 @media (-moz-windows-glass) {
   #placesToolbox {
     border-top: none;
   }
-
-  #placesToolbar {
-    background-image: linear-gradient(@toolbarHighlight@, transparent);
-  }
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
   #placesView,
   #infoPane,
   #placesList,
   #placeContent {
     background-color: #EEF3FA;
   }
 
-%ifndef MOZ_PHOTON_THEME
-  #placesToolbar {
-    background-color: @customToolbarColor@;
-    color: black;
-  }
-%endif
   #detailsDeck {
     border-top-color: #A9B7C9;
   }
 
   #searchFilter {
     -moz-appearance: none;
     padding: 2px;
     padding-inline-start: 4px;
deleted file mode 100644
index b7e6d6f77ce722b405c93e4afe01869a5431cdea..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 1e92acbda39807d8823f965e8c2b998aedca3539..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index fb353b17e70657d85e501a30ca6e2e6249e83a76..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index eefb6ac47cd820af31556f1d8c6631ad36396baa..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index d68ea6da6a9834dfed10a88e73afa10ba1933099..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 8ed84ab37969668dcee44c1f5915cde2a48e59a0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 51e066c2e9c6d71f5ce4846b1b030d2f111127ef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index b26cb95de6ab3231f676a4c939a2bbf210557771..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index faaf7e38e5d9726af460735604497ee0e8eed164..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index c9d245f4f4459fe4e1265354b87f47b1e3a3ce32..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index cf0dc852ac52f8b6a1d9fdd0b6211494263aa60b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index bbfc77dd189d6885201c4d9e923836485cfd8ad1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index d1f0b5561034d68884c0c6e48f0697da4da86474..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index e860275a6435b42e181b6de2e60a0be01b031e55..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2aa5711f8a6775cd21948601b9fb6f6a281f1fda..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a87002a830abab86fc869cd77af8d0eaa8ae7662..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 4e4e41f63210c8f81954919881f9cd8a96cd438b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 13bd6add1590fa55cf0e099d23d4bc7b442bb694..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
--- a/browser/themes/windows/windowsShared.inc
+++ /dev/null
@@ -1,13 +0,0 @@
-/* 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/. */
-
-%filter substitution
-
-%define toolbarHighlight rgba(255,255,255,.4)
-%define fgTabTexture linear-gradient(transparent 2px, @toolbarHighlight@ 2px, @toolbarHighlight@)
-%define fgTabBackgroundColor -moz-dialog
-%define fgTabTextureLWT @fgTabTexture@
-%ifndef MOZ_PHOTON_THEME
-%define customToolbarColor hsl(210,75%,92%)
-%endif
--- a/toolkit/content/widgets/scrollbox.xml
+++ b/toolkit/content/widgets/scrollbox.xml
@@ -180,25 +180,16 @@
           var innerRect = {};
           innerRect.left = outerRect.left - this._scrollbox.scrollLeft;
           innerRect.top = outerRect.top - this._scrollbox.scrollTop;
           innerRect.right = innerRect.left + this._scrollbox.scrollWidth;
           innerRect.bottom = innerRect.top + this._scrollbox.scrollHeight;
           return innerRect;
         ]]></getter>
       </property>
-      <field name="scrollboxPaddingStart"><![CDATA[
-        this._isRTLScrollbox ? this.scrollboxPaddingRight : this.scrollboxPaddingLeft;
-      ]]></field>
-      <field name="scrollboxPaddingLeft"><![CDATA[
-        parseFloat(window.getComputedStyle(this._scrollbox).paddingLeft);
-      ]]></field>
-      <field name="scrollboxPaddingRight"><![CDATA[
-        parseFloat(window.getComputedStyle(this._scrollbox).paddingRight);
-      ]]></field>
       <property name="scrollPosition">
         <getter><![CDATA[
           return this.orient == "vertical" ?
                  this._scrollbox.scrollTop :
                  this._scrollbox.scrollLeft;
         ]]></getter>
         <setter><![CDATA[
           if (this.orient == "vertical")
@@ -275,22 +266,16 @@
           let style = window.getComputedStyle(this._scrollbox);
           var scrollContentRect = {
             left: scrollPaddingRect.left + parseFloat(style.paddingLeft),
             top: scrollPaddingRect.top + parseFloat(style.paddingTop),
             right: scrollPaddingRect.right - parseFloat(style.paddingRight),
             bottom: scrollPaddingRect.bottom - parseFloat(style.paddingBottom)
           };
 
-          // Provide an entry point for derived bindings to adjust these values.
-          if (this._adjustElementStartAndEnd) {
-            [elementStart, elementEnd] =
-              this._adjustElementStartAndEnd(element, elementStart, elementEnd);
-          }
-
           if (elementStart <= (vertical ? scrollContentRect.top : scrollContentRect.left)) {
             elementStart = vertical ? scrollPaddingRect.top : scrollPaddingRect.left;
           }
           if (elementEnd >= (vertical ? scrollContentRect.bottom : scrollContentRect.right)) {
             elementEnd = vertical ? scrollPaddingRect.bottom : scrollPaddingRect.right;
           }
 
           var amountToScroll;
@@ -660,35 +645,32 @@
 
               let scrolledToStart = false;
               let scrolledToEnd = false;
 
               if (this.hasAttribute("notoverflowing")) {
                 scrolledToStart = true;
                 scrolledToEnd = true;
               } else {
-                let scrollboxPaddingLeft = Math.round(this.scrollboxPaddingLeft);
-                let scrollboxPaddingRight = Math.round(this.scrollboxPaddingRight);
-
                 let [leftOrTop, rightOrBottom] = this._startEndProps;
                 let leftOrTopEdge = ele => Math.round(this._boundsWithoutFlushing(ele)[leftOrTop]);
                 let rightOrBottomEdge = ele => Math.round(this._boundsWithoutFlushing(ele)[rightOrBottom]);
 
                 let elements = this._getScrollableElements();
                 let [leftOrTopElement, rightOrBottomElement] = [elements[0], elements[elements.length - 1]];
                 if (this._isRTLScrollbox) {
                   [leftOrTopElement, rightOrBottomElement] = [rightOrBottomElement, leftOrTopElement];
                 }
 
                 if (leftOrTopElement &&
-                    leftOrTopEdge(leftOrTopElement) >= leftOrTopEdge(this._scrollbox) + scrollboxPaddingLeft) {
+                    leftOrTopEdge(leftOrTopElement) >= leftOrTopEdge(this._scrollbox)) {
                   scrolledToStart = !this._isRTLScrollbox;
                   scrolledToEnd = this._isRTLScrollbox;
                 } else if (rightOrBottomElement &&
-                           rightOrBottomEdge(rightOrBottomElement) <= rightOrBottomEdge(this._scrollbox) - scrollboxPaddingRight) {
+                           rightOrBottomEdge(rightOrBottomElement) <= rightOrBottomEdge(this._scrollbox)) {
                   scrolledToStart = this._isRTLScrollbox;
                   scrolledToEnd = !this._isRTLScrollbox;
                 }
               }
 
               if (scrolledToEnd) {
                 this.setAttribute("scrolledtoend", "true");
               } else {