Bug 921038 - Move selected tab curve clip-paths into SVG-as-an-image so it is cached. r=mconley,gps
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Mon, 28 Oct 2013 00:49:37 -0700
changeset 164963 e771168640a7b3bf0b070de3ebd2d5e2fa18567f
parent 164962 e96ae667f6696e3eb142c2b2c49d42bda04daca9
child 164964 dfb4db3ac4460112f98fa0b2277f8ccb3c129c4c
push id4703
push userakeybl@mozilla.com
push dateMon, 09 Dec 2013 20:24:19 +0000
treeherdermozilla-aurora@20af7fbd96c1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley, gps
bugs921038
milestone27.0a1
Bug 921038 - Move selected tab curve clip-paths into SVG-as-an-image so it is cached. r=mconley,gps
browser/base/content/browser.xul
browser/base/content/tab-shape.inc.svg
browser/themes/linux/Makefile.in
browser/themes/linux/jar.mn
browser/themes/osx/Makefile.in
browser/themes/osx/jar.mn
browser/themes/osx/shared.inc
browser/themes/shared/tab-selected.svg
browser/themes/shared/tabs.inc.css
browser/themes/windows/Makefile.in
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/jar.mn
browser/themes/windows/places/organizer-aero.css
browser/themes/windows/windowsShared.inc
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1116,22 +1116,17 @@
                          class="devtools-closebutton"
                          oncommand="DeveloperToolbar.hide();"
                          tooltiptext="&devToolbarCloseButton.tooltiptext;"/>
 #endif
    </toolbar>
   </vbox>
 
   <svg:svg height="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>
+#include tab-shape.inc.svg
 
 #ifndef XP_UNIX
     <svg:clipPath id="windows-keyhole-forward-clip-path" clipPathUnits="objectBoundingBox">
       <svg:path d="M 0,0 C 0.16,0.11 0.28,0.29 0.28,0.5 0.28,0.71 0.16,0.89 0,1 L 1,1 1,0 0,0 z"/>
     </svg:clipPath>
     <svg:clipPath id="windows-urlbar-back-button-clip-path" clipPathUnits="userSpaceOnUse">
       <svg:path d="m 0,-5 l 0,7.8 c 2.5,3.2 4,6.2 4,10.2 c 0,4 -1.5,7 -4,10 l 0,22l10000,0 l 0,-50 l -10000,0 z"/>
     </svg:clipPath>
new file mode 100644
--- /dev/null
+++ b/browser/base/content/tab-shape.inc.svg
@@ -0,0 +1,11 @@
+<!-- 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/themes/linux/Makefile.in
+++ b/browser/themes/linux/Makefile.in
@@ -1,7 +1,27 @@
 # 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/.
 
 ICON_FILES := icon.png
 ICON_DEST = $(FINAL_TARGET)/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}
 INSTALL_TARGETS += ICON
+
+# 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 this directory.
+tab-selected-svg: $(srcdir)/../shared/tab-selected.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=start \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-start.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=end \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-end.svg
+
+.PHONY: tab-selected-svg
+
+export:: tab-selected-svg
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -126,16 +126,22 @@ browser.jar:
   skin/classic/browser/tabbrowser/connecting.png      (tabbrowser/connecting.png)
   skin/classic/browser/tabbrowser/loading.png         (tabbrowser/loading.png)
   skin/classic/browser/tabbrowser/tab.png             (tabbrowser/tab.png)
   skin/classic/browser/tabbrowser/tab-active-middle.png     (tabbrowser/tab-active-middle.png)
   skin/classic/browser/tabbrowser/tab-background-end.png    (tabbrowser/tab-background-end.png)
   skin/classic/browser/tabbrowser/tab-background-middle.png (tabbrowser/tab-background-middle.png)
   skin/classic/browser/tabbrowser/tab-background-start.png  (tabbrowser/tab-background-start.png)
   skin/classic/browser/tabbrowser/tab-overflow-border.png   (tabbrowser/tab-overflow-border.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-start.png      (tabbrowser/tab-stroke-start.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png      (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabbrowser/tab-separator.png         (tabbrowser/tab-separator.png)
   skin/classic/browser/tabview/edit-light.png         (tabview/edit-light.png)
   skin/classic/browser/tabview/search.png             (tabview/search.png)
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
--- a/browser/themes/osx/Makefile.in
+++ b/browser/themes/osx/Makefile.in
@@ -1,7 +1,27 @@
 # 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/.
 
 ICON_FILES := icon.png
 ICON_DEST = $(FINAL_TARGET)/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}
 INSTALL_TARGETS += ICON
+
+# 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 this directory.
+tab-selected-svg: $(srcdir)/../shared/tab-selected.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=start \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-start.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=end \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-end.svg
+
+.PHONY: tab-selected-svg
+
+export:: tab-selected-svg
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -218,16 +218,22 @@ browser.jar:
   skin/classic/browser/tabbrowser/tab-arrow-right-inverted.png           (tabbrowser/tab-arrow-right-inverted.png)
   skin/classic/browser/tabbrowser/tab-arrow-right-inverted@2x.png        (tabbrowser/tab-arrow-right-inverted@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/tabbar-bottom-bg-active.png            (tabbrowser/tabbar-bottom-bg-active.png)
   skin/classic/browser/tabbrowser/tabbar-bottom-bg-inactive.png          (tabbrowser/tabbar-bottom-bg-inactive.png)
   skin/classic/browser/tabbrowser/tabbar-top-bg-active.png               (tabbrowser/tabbar-top-bg-active.png)
   skin/classic/browser/tabbrowser/tabbar-top-bg-inactive.png             (tabbrowser/tabbar-top-bg-inactive.png)
--- a/browser/themes/osx/shared.inc
+++ b/browser/themes/osx/shared.inc
@@ -1,10 +1,12 @@
 %include ../../../toolkit/themes/osx/global/shared.inc
 %include ../shared/browser.inc
 
+%filter substitution
+
 %define fgTabTexture linear-gradient(transparent, transparent 2px, hsla(0,0%,100%,0.6) 2px, hsla(0,0%,100%,0.6) 3px, hsl(0,0%,99%) 3px, hsl(0,0%,93%))
 %define toolbarColorLWT rgba(253,253,253,0.45)
 %define fgTabTextureLWT linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.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);
 %define hudButtonFocused box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/tab-selected.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- 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 version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     x="0px"
+     y="0px"
+     width="30px"
+     height="31px"
+     preserveAspectRatio="none"
+     xml:space="preserve">
+  <defs>
+    <style><![CDATA[
+
+%filter substitution
+
+%ifdef XP_MACOSX
+%include ../osx/shared.inc
+%elifdef XP_LINUX
+%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%;
+      }
+
+%ifdef WINDOWS_AERO
+      @media (-moz-windows-default-theme) {
+        #tab-background-fill {
+          background-color: @customToolbarColor@;
+        }
+      }
+%endif
+    ]]></style>
+
+%include ../../base/content/tab-shape.inc.svg
+  </defs>
+
+  <foreignObject class="node" x="0" y="0" width="30" height="31" clip-path="url(#tab-curve-clip-path-@TAB_SIDE@)">
+    <body xmlns="http://www.w3.org/1999/xhtml" style="all:unset">
+      <div id="tab-background-fill"></div>
+    </body>
+  </foreignObject>
+</svg>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -146,43 +146,49 @@
 
 .tab-background-start[selected=true]::before,
 .tab-background-end[selected=true]::before {
   /* all ::before pseudo elements */
   content: "";
   display: -moz-box;
 }
 
-.tab-background-start[selected=true]:-moz-locale-dir(ltr)::before,
-.tab-background-end[selected=true]:-moz-locale-dir(rtl)::before {
+.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-end[selected=true]:-moz-locale-dir(ltr)::before,
-.tab-background-start[selected=true]:-moz-locale-dir(rtl)::before {
+.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);
 }
 
-.tab-background-start[selected=true]::before,
-.tab-background-end[selected=true]::before {
-  background-color: @fgTabBackgroundColor@;
-  background-image: @fgTabTexture@;
-  background-repeat: no-repeat;
-}
-
 .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;
   background-repeat: repeat-x;
   background-size: auto 100%;
@@ -193,16 +199,17 @@
 
 /* Selected tab lightweight theme styles */
 .tab-background-middle[selected=true]:-moz-lwtheme {
   background-color: transparent;
   /* Don't stretch the LWT header images */
   background-size: auto 100%, auto 100%, auto auto;
 }
 
+/* These LWT styles are normally overridden by browser-lightweightTheme.css */
 .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 {
--- a/browser/themes/windows/Makefile.in
+++ b/browser/themes/windows/Makefile.in
@@ -1,7 +1,36 @@
 # 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/.
 
 ICON_FILES := icon.png
 ICON_DEST = $(FINAL_TARGET)/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}
 INSTALL_TARGETS += ICON
+
+# 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 this directory.
+tab-selected-svg: $(srcdir)/../shared/tab-selected.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=start \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-start.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=end \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-end.svg
+# Same as above for aero.
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=start -D WINDOWS_AERO \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-start-aero.svg
+	$(PYTHON) $(topsrcdir)/config/Preprocessor.py \
+	  --marker "%" -D TAB_SIDE=end -D WINDOWS_AERO \
+	  $(ACDEFINES) \
+	  $(srcdir)/../shared/tab-selected.svg > tab-selected-end-aero.svg
+
+.PHONY: tab-selected-svg
+
+export:: tab-selected-svg
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -1,17 +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/. */
 
 %define WINDOWS_AERO
 %include browser.css
 %undef WINDOWS_AERO
 
-%define customToolbarColor hsl(210,75%,92%)
 %define glassActiveBorderColor rgb(37, 44, 51)
 %define glassInactiveBorderColor rgb(102, 102, 102)
 
 %include downloads/indicator-aero.css
 
 @media not all and (-moz-windows-classic) {
   #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
     margin-top: 1px;
@@ -24,22 +23,16 @@
 
 @media (-moz-windows-default-theme) {
   #navigator-toolbox > toolbar:not(:-moz-lwtheme),
   #browser-bottombox:not(:-moz-lwtheme),
   .browserContainer > findbar {
     background-color: @customToolbarColor@;
   }
 
-  .tab-background-start[selected=true]:not(:-moz-lwtheme)::before,
-  .tab-background-end[selected=true]:not(:-moz-lwtheme)::before {
-    background-color: @customToolbarColor@;
-    background-image: @fgTabTexture@;
-  }
-
   .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
     background-color: @customToolbarColor@;
   }
 
   #navigator-toolbox:not(:-moz-lwtheme)::after {
     background-color: #aabccf;
   }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -6,17 +6,16 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../shared/browser.inc
 %include windowsShared.inc
 %filter substitution
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
-%define fgTabBackgroundColor -moz-dialog
 %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.32);
 %define forwardTransitionLength 150ms
 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-container
 %define conditionalForwardWithUrlbarWidth 27
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -146,16 +146,22 @@ browser.jar:
         skin/classic/browser/tabbrowser/tab.png                      (tabbrowser/tab.png)
         skin/classic/browser/tabbrowser/tab-active-middle.png        (tabbrowser/tab-active-middle.png)
         skin/classic/browser/tabbrowser/tab-arrow-left.png           (tabbrowser/tab-arrow-left.png)
         skin/classic/browser/tabbrowser/tab-arrow-left-inverted.png  (tabbrowser/tab-arrow-left-inverted.png)
         skin/classic/browser/tabbrowser/tab-background-start.png     (tabbrowser/tab-background-start.png)
         skin/classic/browser/tabbrowser/tab-background-middle.png    (tabbrowser/tab-background-middle.png)
         skin/classic/browser/tabbrowser/tab-background-end.png       (tabbrowser/tab-background-end.png)
         skin/classic/browser/tabbrowser/tab-overflow-border.png      (tabbrowser/tab-overflow-border.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-start.png         (tabbrowser/tab-stroke-start.png)
         skin/classic/browser/tabbrowser/tabDragIndicator.png         (tabbrowser/tabDragIndicator.png)
         skin/classic/browser/tabbrowser/tab-separator-luna-blue.png  (tabbrowser/tab-separator-luna-blue.png)
         skin/classic/browser/tabbrowser/tab-separator.png            (tabbrowser/tab-separator.png)
         skin/classic/browser/tabview/close.png                      (tabview/close.png)
         skin/classic/browser/tabview/edit-light.png                 (tabview/edit-light.png)
         skin/classic/browser/tabview/grain.png                      (tabview/grain.png)
@@ -436,16 +442,22 @@ browser.jar:
         skin/classic/aero/browser/tabbrowser/tab.png                 (tabbrowser/tab.png)
         skin/classic/aero/browser/tabbrowser/tab-active-middle.png   (tabbrowser/tab-active-middle.png)
         skin/classic/aero/browser/tabbrowser/tab-arrow-left.png      (tabbrowser/tab-arrow-left.png)
         skin/classic/aero/browser/tabbrowser/tab-arrow-left-inverted.png (tabbrowser/tab-arrow-left-inverted.png)
         skin/classic/aero/browser/tabbrowser/tab-background-start.png    (tabbrowser/tab-background-start.png)
         skin/classic/aero/browser/tabbrowser/tab-background-middle.png   (tabbrowser/tab-background-middle.png)
         skin/classic/aero/browser/tabbrowser/tab-background-end.png      (tabbrowser/tab-background-end.png)
         skin/classic/aero/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.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/aero/browser/tabbrowser/tab-selected-end.svg    (tab-selected-end-aero.svg)
+        skin/classic/aero/browser/tabbrowser/tab-selected-start.svg  (tab-selected-start-aero.svg)
+
         skin/classic/aero/browser/tabbrowser/tab-stroke-end.png      (tabbrowser/tab-stroke-end.png)
         skin/classic/aero/browser/tabbrowser/tab-stroke-start.png    (tabbrowser/tab-stroke-start.png)
         skin/classic/aero/browser/tabbrowser/tabDragIndicator.png    (tabbrowser/tabDragIndicator.png)
         skin/classic/aero/browser/tabbrowser/tab-separator.png       (tabbrowser/tab-separator-aero.png)
         skin/classic/aero/browser/tabview/close.png                  (tabview/close.png)
         skin/classic/aero/browser/tabview/edit-light.png             (tabview/edit-light.png)
         skin/classic/aero/browser/tabview/grain.png                  (tabview/grain.png)
         skin/classic/aero/browser/tabview/search.png                 (tabview/search.png)
--- a/browser/themes/windows/places/organizer-aero.css
+++ b/browser/themes/windows/places/organizer-aero.css
@@ -1,17 +1,18 @@
 /* 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/. */
 
+%define WINDOWS_AERO
+%include ../windowsShared.inc
 %include organizer.css
+%undef WINDOWS_AERO
 
 %filter substitution
-%define toolbarHighlight rgba(255,255,255,.5)
-%define customToolbarColor hsl(210,75%,92%)
 
 #placesView {
   border-top: none;
 }
 
 @media not all and (-moz-windows-classic) {
   #placesToolbox {
     -moz-appearance: none;
--- a/browser/themes/windows/windowsShared.inc
+++ b/browser/themes/windows/windowsShared.inc
@@ -1,9 +1,13 @@
 /* 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(253,253,253,0.45)
 %define fgTabTexture linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.72) 2px, rgba(254,254,254,0.72) 2px, rgba(250,250,250,0.88) 3px, rgba(250,250,250,0.88) 3px, rgba(254,254,254,0.72) 4px, rgba(254,254,254,0.72) 4px, @toolbarHighlight@)
+%define fgTabBackgroundColor -moz-dialog
 %define fgTabTextureLWT @fgTabTexture@
+
+% Aero-only defines
+%define customToolbarColor hsl(210,75%,92%)