Bug 1053434 - Shared theme changes for window and navbar for devedition;r=Gijs,r=MattN
authorBrian Grinstead <bgrinstead@mozilla.com>
Mon, 03 Nov 2014 17:46:08 -0800
changeset 233721 f627be943750ee77da7ef2e298fb6596da625f06
parent 233720 60fa1d966ca040ea6781f52a064d33171a9f824c
child 233722 1cc7838d4c3588c1e794fff06298ed1c2bb982f8
push id4187
push userbhearsum@mozilla.com
push dateFri, 28 Nov 2014 15:29:12 +0000
treeherdermozilla-beta@f23cc6a30c11 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, MattN
bugs1053434
milestone35.0a2
Bug 1053434 - Shared theme changes for window and navbar for devedition;r=Gijs,r=MattN
browser/themes/linux/browser.css
browser/themes/linux/devedition.css
browser/themes/linux/jar.mn
browser/themes/osx/browser.css
browser/themes/osx/devedition.css
browser/themes/osx/jar.mn
browser/themes/shared/customizableui/panelUIOverlay.inc.css
browser/themes/shared/devedition.inc.css
browser/themes/shared/devedition/search.svg
browser/themes/shared/devedition/urlbar-history-dropmarker.svg
browser/themes/windows/devedition.css
browser/themes/windows/jar.mn
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1817,17 +1817,17 @@ richlistitem[type~="action"][actiontype=
   z-index: 3;
 }
 
 /* Tab close button */
 .tab-close-button:not([selected]):not(:hover) {
   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48);
 }
 
-.tab-close-button:not([selected]):not(:hover):-moz-lwtheme-brighttext {
+#TabsToolbar[brighttext] .tab-close-button:not([selected]):not(:hover) {
   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
 }
 
 .tab-close-button:not([selected]):not(:hover):-moz-lwtheme-darktext {
   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80);
 }
 
 /* Tabstrip new tab button */
--- a/browser/themes/linux/devedition.css
+++ b/browser/themes/linux/devedition.css
@@ -1,5 +1,63 @@
 % 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 ../shared/devedition.inc.css
+
+.tab-close-button[selected]:not(:hover) {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
+}
+
+/* The menubar should match the dark theme */
+#toolbar-menubar {
+  -moz-appearance: none;
+}
+#main-menubar {
+  color: var(--chrome-color);
+}
+#main-menubar > menu:not([open]) {
+  color: inherit;
+}
+
+/* Allow buttons with -moz-appearance set to look normal on hover and open states */
+#navigator-toolbox .toolbarbutton-1:not(.subviewbutton):-moz-any(:hover, [open="true"]),
+toolbarbutton.bookmark-item:not(.subviewbutton):-moz-any(:hover, [open="true"]) {
+  color: initial;
+}
+
+/* Square back and forward buttons */
+#back-button:not(:-moz-lwtheme) > .toolbarbutton-icon,
+#forward-button:not(:-moz-lwtheme) > .toolbarbutton-icon {
+  margin: 0;
+  border: none;
+  padding: 2px 6px;
+  background: #252C33;
+  box-shadow: none !important;
+}
+
+/* Override a box shadow for disabled back button */
+#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
+  box-shadow: none !important;
+}
+
+#back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
+#forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
+  background: #1B2127 !important;
+}
+
+#back-button > .toolbarbutton-icon {
+  border-radius: 2px 0 0 2px !important;
+}
+
+.urlbar-history-dropmarker {
+  -moz-appearance: none;
+  padding: 0 3px;
+  list-style-image: var(--urlbar-dropmarker-url);
+  -moz-image-region: var(--urlbar-dropmarker-region);
+}
+
+/* Add the proper background for tab overflow */
+#alltabs-button,
+#new-tab-button {
+  background: var(--chrome-background-color);
+}
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -190,16 +190,18 @@ browser.jar:
   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)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
   skin/classic/browser/translating-16.png             (../shared/translation/translating-16.png)
   skin/classic/browser/translating-16@2x.png          (../shared/translation/translating-16@2x.png)
   skin/classic/browser/translation-16.png             (../shared/translation/translation-16.png)
   skin/classic/browser/translation-16@2x.png          (../shared/translation/translation-16@2x.png)
+  skin/classic/browser/devedition/search.svg          (../shared/devedition/search.svg)
+  skin/classic/browser/devedition/urlbar-history-dropmarker.svg            (../shared/devedition/urlbar-history-dropmarker.svg)
 * skin/classic/browser/devtools/common.css            (../shared/devtools/common.css)
 * skin/classic/browser/devtools/dark-theme.css        (../shared/devtools/dark-theme.css)
 * skin/classic/browser/devtools/light-theme.css       (../shared/devtools/light-theme.css)
   skin/classic/browser/devtools/filters.svg           (../shared/devtools/filters.svg)
   skin/classic/browser/devtools/controls.png          (../shared/devtools/images/controls.png)
   skin/classic/browser/devtools/controls@2x.png       (../shared/devtools/images/controls@2x.png)
   skin/classic/browser/devtools/newtab.png             (../shared/devtools/images/newtab.png)
   skin/classic/browser/devtools/newtab@2x.png          (../shared/devtools/images/newtab@2x.png)
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -21,16 +21,17 @@
 
   --tabs-toolbar-color: #333;
   --toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
   --toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
   --toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
                                    0 1px 0 hsla(0,0%,100%,.5) inset;
 
   --toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), hsla(0,0%,0%,0)) border-box;
+  --toolbarbutton-active-bordercolor: hsla(0,0%,0%,.3);
   --toolbarbutton-active-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
                                     0 1px 0 hsla(0,0%,0%,.05) inset,
                                     0 1px 1px hsla(0,0%,0%,.2) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: hsla(0,0%,0%,.09);
 
   --toolbarbutton-combined-boxshadow: 0 0 0 1px hsla(0,0%,100%,.15);
   --toolbarbutton-combined-backgroundimage: linear-gradient(hsla(0,0%,0%,.15) 0, hsla(0,0%,0%,.15) 18px);
@@ -601,17 +602,17 @@ toolbar .toolbarbutton-1[type="menu-butt
 }
 
 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],#back-button,#forward-button)):-moz-any(:hover:active,[open],[checked]),
 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open],
 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover]:active > .toolbarbutton-menubutton-button,
 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover:active > .toolbarbutton-menubutton-dropmarker,
 toolbar .toolbarbutton-1[type="menu-button"][open]:not([disabled]) > .toolbarbutton-menubutton-dropmarker {
   background: var(--toolbarbutton-active-background);
-  border-color: hsla(0,0%,0%,.3);
+  border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
   transition-duration: 10ms;
 }
 
 toolbar .toolbarbutton-1[checked]:not(:active):hover {
   background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
   transition: background-color 250ms;
 }
--- a/browser/themes/osx/devedition.css
+++ b/browser/themes/osx/devedition.css
@@ -1,5 +1,87 @@
 % 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 ../shared/devedition.inc.css
+
+/* Include extra space on left/right for dragging since there is no space above
+   the tabs */
+#main-window[tabsintitlebar] #TabsToolbar {
+  padding-left: 50px;
+  padding-right: 50px;
+  margin-bottom: 0; /* Don't overlap the inner highlight at the top of the nav-bar */
+}
+
+/* Get rid of 1px bright strip at the top of window */
+#main-window[tabsintitlebar] #titlebar-content {
+  background: var(--chrome-background-color);
+}
+
+/* Resize things so that the native titlebar is in line with the tabs */
+#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
+#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
+  margin-top: 6px;
+}
+
+/* Square back and forward buttons.  Need !important on these because there
+   are a lot of more specific selectors sprinkled around elsewhere for changing
+   background / shadows for different states */
+#back-button,
+#forward-button {
+  height: 22px !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: #252C33 !important;
+}
+
+#back-button:hover:not([disabled="true"]),
+#forward-button:hover:not([disabled="true"]) {
+  background: #1B2127 !important;
+}
+
+#back-button {
+  border-radius: 3px 0 0 3px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+#back-button:hover:active:not([disabled="true"]) {
+  -moz-image-region: rect(18px, 54px, 36px, 36px);
+}
+
+/* Use smaller back button icon */
+@media (min-resolution: 2dppx) {
+  #back-button {
+    -moz-image-region: rect(0, 108px, 36px, 72px);
+  }
+
+  #back-button:hover:active:not([disabled="true"]) {
+    -moz-image-region: rect(36px, 108px, 72px, 72px);
+  }
+}
+
+#forward-button:hover:active:not(:-moz-lwtheme) {
+  background-image: none;
+  box-shadow: none;
+}
+
+/* Use forward-facing magnifying glass for the search box */
+.search-go-button {
+  list-style-image: url("chrome://browser/skin/devedition/search.svg#search-icon-mac-inverted");
+}
+
+/* Don't use default colors when in full screen */
+#main-window:not([customizing]) #navigator-toolbox[inFullscreen] > #TabsToolbar:not(:-moz-lwtheme) {
+  -moz-appearance: none;
+}
+
+/* Tab styling - make sure to use an inverted icon for the selected tab
+   (brighttext only covers the unselected tabs) */
+.tab-close-button[selected=true]:not(:hover) {
+  -moz-image-region: rect(0, 64px, 16px, 48px);
+}
+@media (min-resolution: 2dppx) {
+  .tab-close-button[selected=true]:not(:hover) {
+    -moz-image-region: rect(0, 128px, 32px, 96px);
+  }
+}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -318,16 +318,18 @@ browser.jar:
   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)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
   skin/classic/browser/translating-16.png                   (../shared/translation/translating-16.png)
   skin/classic/browser/translating-16@2x.png                (../shared/translation/translating-16@2x.png)
   skin/classic/browser/translation-16.png                   (../shared/translation/translation-16.png)
   skin/classic/browser/translation-16@2x.png                (../shared/translation/translation-16@2x.png)
+  skin/classic/browser/devedition/search.svg                (../shared/devedition/search.svg)
+  skin/classic/browser/devedition/urlbar-history-dropmarker.svg            (../shared/devedition/urlbar-history-dropmarker.svg)
 * skin/classic/browser/devtools/common.css                  (../shared/devtools/common.css)
 * skin/classic/browser/devtools/dark-theme.css              (../shared/devtools/dark-theme.css)
 * skin/classic/browser/devtools/light-theme.css             (../shared/devtools/light-theme.css)
   skin/classic/browser/devtools/filters.svg                 (../shared/devtools/filters.svg)
   skin/classic/browser/devtools/controls.png                (../shared/devtools/images/controls.png)
   skin/classic/browser/devtools/controls@2x.png             (../shared/devtools/images/controls@2x.png)
   skin/classic/browser/devtools/newtab.png                  (../shared/devtools/images/newtab.png)
   skin/classic/browser/devtools/newtab@2x.png               (../shared/devtools/images/newtab@2x.png)
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -15,16 +15,25 @@
 %define exitSubviewGutterWidth 38px
 %define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
 %define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
 %define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
 %define menuStateActive :not([disabled])[_moz-menuactive]:active
 
 %include ../browser.inc
 
+:root {
+  --panel-ui-button-background-image: linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, transparent),
+                    linear-gradient(to bottom, transparent, hsla(210,54%,20%,.3) 30%, hsla(210,54%,20%,.3) 70%, transparent),
+                    linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, transparent);
+  --panel-ui-button-background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px  calc(100% - 1px) !important;
+  --panel-ui-button-background-position: 0px 0px, 1px 0px, 2px 0px;
+  --panel-ui-button-background-repeat: no-repeat;
+}
+
 #PanelUI-popup #PanelUI-contents:empty {
   height: 128px;
 }
 
 #PanelUI-popup #PanelUI-contents:empty::before {
   content: "";
   background-image: url(chrome://browser/skin/customizableui/whimsy-bw.png);
   display: block;
@@ -82,22 +91,20 @@
   from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
 }
 
 @keyframes whimsyRotate {
   to { transform: perspective(5000px) rotateY(360deg); }
 }
 
 #PanelUI-button {
-  background-image: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, hsla(0,0%,100%,0)),
-                    linear-gradient(to bottom, hsla(210,54%,20%,0), hsla(210,54%,20%,.3) 30%, hsla(210,54%,20%,.3) 70%, hsla(210,54%,20%,0)),
-                    linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, hsla(0,0%,100%,0));
-  background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px  calc(100% - 1px) !important;
-  background-position: 0px 0px, 1px 0px, 2px 0px;
-  background-repeat: no-repeat;
+  background-image: var(--panel-ui-button-background-image);
+  background-size: var(--panel-ui-button-background-size);
+  background-position: var(--panel-ui-button-background-position);
+  background-repeat: var(--panel-ui-button-background-repeat);
 }
 
 #PanelUI-button:-moz-locale-dir(rtl) {
   background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;
 }
 
 .panel-subviews {
   padding: 4px;
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -1,3 +1,227 @@
 % 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/.
+
+/* devedition.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 devedition.css files. */
+
+:root {
+  /* Chrome */
+  --space-above-tabbar: 1px;
+  --chrome-background-color: #1C2126;
+  --chrome-color: #F5F7FA;
+  --chrome-secondary-background-color: #39424D;
+  --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
+
+  /* Tabs */
+  --tabs-toolbar-color: #F5F7FA;
+  --tab-background-color: #1C2126;
+  --tab-color: #ced3d9;
+  --tab-hover-background-color: hsla(206,37%,4%,.5);
+  --tab-separator-color: #464C50;
+  --tab-selection-color: #f5f7fa;
+  --tab-selection-background-color: #1a4666;
+  --tab-selection-box-shadow: 0 2px 0 #d7f1ff inset,
+                                     0 8px 3px -5px #2b82bf inset,
+                                     0 -2px 0 rgba(0,0,0,.2) inset;
+
+  /* Toolbar buttons */
+  --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
+  --toolbarbutton-hover-boxshadow: none;
+  --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
+  --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
+  --toolbarbutton-active-boxshadow: none;
+  --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
+  --toolbarbutton-checkedhover-backgroundcolor: #1D4F73;
+  --toolbarbutton-combined-boxshadow: none;
+  --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px);
+  --toolbarbutton-text-shadow: none;
+
+  /* Identity box */
+  --identity-box-chrome-color: #46afe3;
+  --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
+  --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
+  --verified-identity-box-backgroundcolor: transparent;
+
+  /* Url and search bars */
+  --url-and-searchbar-background-color: #171B1F;
+  --url-and-searchbar-color: #fff;
+  --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
+  --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
+  --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px);
+  --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
+  --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
+  --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px);
+
+  /* Menu button separator */
+  --panel-ui-button-background-image: linear-gradient(to bottom, #5E6670, #5E6670);
+  --panel-ui-button-background-size: 1px calc(100% - 1px);
+  --panel-ui-button-background-position: 1px 0px;
+}
+
+.searchbar-dropmarker-image {
+  --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
+  --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
+}
+
+/* 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;
+}
+
+.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#navigator-toolbox ::-moz-selection {
+  background-color: #074D75;
+  color: #fff;
+}
+
+/* Change the base colors for the browser chrome */
+
+#tabbrowser-tabs,
+#TabsToolbar,
+#browser-panel {
+  background: var(--chrome-background-color);
+  color: var(--chrome-color);
+}
+
+#navigator-toolbox::after {
+  background: var(--chrome-navigator-toolbox-separator-color)
+}
+
+#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
+#browser-bottombox {
+  background: var(--chrome-secondary-background-color) !important;
+  color: var(--chrome-color);
+}
+
+#navigator-toolbox .toolbarbutton-1:not(.subviewbutton):not(:hover):not([open]),
+toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not([open]) {
+  color: var(--chrome-color);
+  text-shadow: var(--toolbarbutton-text-shadow);
+}
+
+/* Using toolbar[brighttext] instead of important to override linux */
+toolbar[brighttext] #downloads-indicator-counter {
+  text-shadow: var(--toolbarbutton-text-shadow);
+  color: var(--chrome-color);
+}
+
+#TabsToolbar {
+  text-shadow: none !important;
+  color: var(--chrome-color) !important; /* Make sure that the brighttext attribute is added */
+}
+
+/* URL bar and search bar*/
+.searchbar-textbox,
+#urlbar {
+  background-color: var(--url-and-searchbar-background-color) !important;
+  background-image: none !important;
+  color: var(--url-and-searchbar-color);
+  border: none !important;
+  box-shadow: none !important;
+}
+
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
+  overflow: -moz-hidden-unscrollable;
+  clip-path: none;
+  -moz-margin-start: 0;
+}
+
+/* Make the white notication box stick out less. */
+#notification-popup-box {
+  border-radius: 0;
+  border: none;
+  background: transparent;
+}
+
+/* Nav bar specific stuff */
+#nav-bar {
+  margin-top: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: 0 -1px var(--chrome-navigator-toolbox-separator-color) !important;
+  background-image: none !important;
+}
+
+/* No extra vertical padding for nav bar */
+#nav-bar-customization-target,
+#nav-bar {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* Use smaller back button icon */
+#back-button {
+  -moz-image-region: rect(0, 54px, 18px, 36px);
+}
+
+.search-go-button {
+   /* !important is needed because searchbar.css is loaded after this */
+  -moz-image-region: auto !important;
+  list-style-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
+}
+
+.tab-background {
+  visibility: hidden;
+}
+
+#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
+.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
+#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
+  background-image: linear-gradient(to top, #474C50, #474C50);
+  background-position: 1px 0;
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down,
+.tabbrowser-arrowscrollbox > .scrollbutton-up {
+  background-color: var(--tab-background-color);
+  border-color: transparent;
+}
+
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
+.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
+  margin-bottom: 0;
+}
+
+.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;
+  color: var(--tab-color);
+  background-color: var(--tab-background-color);
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
+.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
+.tabbrowser-tab:hover {
+  background-color: var(--tab-hover-background-color);
+  color: var(--tab-hover-color);
+}
+
+.tabbrowser-tab[selected] {
+  color: var(--tab-selection-color);
+  background-color: var(--tab-selection-background-color);
+  box-shadow: var(--tab-selection-box-shadow);
+}
+
+/* New tab buttons */
+#TabsToolbar > #new-tab-button,
+.tabs-newtab-button {
+  background-image: none !important;
+  margin: 0 !important;
+  width: 35px !important;
+}
+
+#TabsToolbar > #new-tab-button:hover,
+.tabs-newtab-button:hover {
+  /* Important needed because !important is used in browser.css */
+  background-color: var(--tab-hover-background-color) !important;
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devedition/search.svg
@@ -0,0 +1,41 @@
+<?xml version="1.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:xlink="http://www.w3.org/1999/xlink"
+     x="0px" y="0px"
+     viewBox="0 0 16 16"
+     enable-background="new 0 0 16 16"
+     width="16"
+     height="16"
+     xml:space="preserve">
+<style>
+  use:not(:target) {
+    display: none;
+  }
+
+  use {
+    fill: #797C80;
+  }
+
+  use[id*="-inverted"] {
+    fill: #B6BABF;
+  }
+
+  use[id*="-mac"] {
+    transform: translate(16px) scaleX(-1);
+  }
+</style>
+<defs style="display: none;">
+  <path id="search" fill-rule="evenodd" clip-rule="evenodd" d="M9.356,1.178c-3.014,0-5.458,2.45-5.458,5.472c0,1.086,0.32,2.096,0.864,2.947
+    l-3.279,3.287c-0.396,0.397-0.396,1.041,0,1.438l0.202,0.202c0.396,0.397,1.039,0.397,1.435,0l3.275-3.283
+    c0.854,0.554,1.869,0.88,2.962,0.88c3.014,0,5.458-2.45,5.458-5.471C14.814,3.627,12.371,1.178,9.356,1.178z M9.356,10.001
+    c-1.847,0-3.344-1.501-3.344-3.352c0-1.851,1.497-3.352,3.344-3.352c1.846,0,3.344,1.501,3.344,3.352
+    C12.7,8.501,11.203,10.001,9.356,10.001z"/>
+</defs>
+<use id="search-icon"               xlink:href="#search"/>
+<use id="search-icon-inverted"      xlink:href="#search"/>
+<use id="search-icon-mac"           xlink:href="#search"/>
+<use id="search-icon-mac-inverted"  xlink:href="#search"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devedition/urlbar-history-dropmarker.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="14" viewBox="0 0 33 14" enable-background="new 0 0 33 14">
+  <defs style="display: none;">
+    <polygon points="0,0 5.5,7 11,0" id="dropmarker-shape"/>
+  </defs>
+  <style>
+    use {
+      fill: #B6BABF;
+    }
+    .hover {
+      fill: #61BDEB;
+    }
+    .active {
+      fill: #39ACE6;
+    }
+  </style>
+  <use xlink:href="#dropmarker-shape" style="transform: translate(0, 4px)"></use>
+  <use xlink:href="#dropmarker-shape" style="transform: translate(11px, 4px)" class="hover"></use>
+  <use xlink:href="#dropmarker-shape" style="transform: translate(22px, 4px)" class="active"></use>
+</svg>
--- a/browser/themes/windows/devedition.css
+++ b/browser/themes/windows/devedition.css
@@ -1,5 +1,100 @@
 % 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 ../shared/devedition.inc.css
+
+#TabsToolbar::after {
+  display: none;
+}
+
+#back-button > .toolbarbutton-icon,
+#forward-button > .toolbarbutton-icon {
+  background: #252C33 !important;
+  border-radius: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  padding: 2px 6px !important;
+  margin: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+#back-button > .toolbarbutton-icon {
+  border-radius: 2px 0 0 2px !important;
+}
+
+#nav-bar .toolbarbutton-1:not([type=menu-button]),
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+#browser-panel,
+#titlebar-content {
+  background: transparent;
+}
+
+/* Ensure that the entire background is styled when maximized */
+#main-window[sizemode="maximized"] #browser-panel {
+  background: var(--chrome-background-color) !important;
+}
+
+/* The menu items need to be visible when the entire background is styled */
+#main-window[sizemode="maximized"] #main-menubar {
+  color: var(--chrome-color);
+  background-color: transparent;
+}
+
+#main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
+  color: inherit;
+}
+
+/* Restore draggable space on the sides of tabs when maximized */
+#main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+@media (-moz-windows-classic) {
+  #main-window[sizemode="maximized"] #TabsToolbar {
+    background: transparent;
+  }
+}
+
+#toolbar-menubar {
+  text-shadow: none !important;
+}
+
+#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
+#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
+  margin-top: 22px;
+}
+
+
+/* Enough space so that the dark background doesn't begin until after the
+ * window resize controls end on Aero Basic, which has different positioning for the
+ * window caption buttons, and therefore needs to be special-cased.
+ */
+@media (-moz-windows-default-theme) {
+  @media not all and (-moz-windows-compositor) {
+    #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
+    #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
+      margin-top: 28px;
+    }
+  }
+}
+
+.searchbar-dropmarker-image {
+  /* Reset image-region from the windows theme */
+  -moz-image-region: auto !important;
+  /* Add margin otherwise it looks weird */
+  -moz-margin-start: 2px;
+}
+
+/* Tab styling - make sure to use an inverted icon for the selected tab
+   (brighttext only covers the unselected tabs) */
+.tab-close-button[selected=true]:not(:hover) {
+  -moz-image-region: rect(0, 64px, 16px, 48px);
+}
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -226,16 +226,18 @@ browser.jar:
         skin/classic/browser/tabview/stack-expander.png             (tabview/stack-expander.png)
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
         skin/classic/browser/translating-16.png                     (../shared/translation/translating-16.png)
         skin/classic/browser/translating-16@2x.png                  (../shared/translation/translating-16@2x.png)
         skin/classic/browser/translation-16.png                     (../shared/translation/translation-16.png)
         skin/classic/browser/translation-16@2x.png                  (../shared/translation/translation-16@2x.png)
+        skin/classic/browser/devedition/search.svg                  (../shared/devedition/search.svg)
+        skin/classic/browser/devedition/urlbar-history-dropmarker.svg            (../shared/devedition/urlbar-history-dropmarker.svg)
 *       skin/classic/browser/devtools/common.css                    (../shared/devtools/common.css)
 *       skin/classic/browser/devtools/dark-theme.css                (../shared/devtools/dark-theme.css)
 *       skin/classic/browser/devtools/light-theme.css               (../shared/devtools/light-theme.css)
         skin/classic/browser/devtools/filters.svg                   (../shared/devtools/filters.svg)
         skin/classic/browser/devtools/controls.png                  (../shared/devtools/images/controls.png)
         skin/classic/browser/devtools/controls@2x.png               (../shared/devtools/images/controls@2x.png)
         skin/classic/browser/devtools/newtab.png                    (../shared/devtools/images/newtab.png)
         skin/classic/browser/devtools/newtab@2x.png                 (../shared/devtools/images/newtab@2x.png)
@@ -653,16 +655,18 @@ browser.jar:
         skin/classic/aero/browser/tabview/stack-expander.png         (tabview/stack-expander.png)
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
         skin/classic/aero/browser/translating-16.png                 (../shared/translation/translating-16.png)
         skin/classic/aero/browser/translating-16@2x.png              (../shared/translation/translating-16@2x.png)
         skin/classic/aero/browser/translation-16.png                 (../shared/translation/translation-16.png)
         skin/classic/aero/browser/translation-16@2x.png              (../shared/translation/translation-16@2x.png)
+        skin/classic/aero/browser/devedition/search.svg              (../shared/devedition/search.svg)
+        skin/classic/aero/browser/devedition/urlbar-history-dropmarker.svg            (../shared/devedition/urlbar-history-dropmarker.svg)
 *       skin/classic/aero/browser/devtools/common.css                (../shared/devtools/common.css)
 *       skin/classic/aero/browser/devtools/dark-theme.css            (../shared/devtools/dark-theme.css)
 *       skin/classic/aero/browser/devtools/light-theme.css           (../shared/devtools/light-theme.css)
         skin/classic/aero/browser/devtools/filters.svg               (../shared/devtools/filters.svg)
         skin/classic/aero/browser/devtools/controls.png              (../shared/devtools/images/controls.png)
         skin/classic/aero/browser/devtools/controls@2x.png           (../shared/devtools/images/controls@2x.png)
         skin/classic/aero/browser/devtools/newtab.png                (../shared/devtools/images/newtab.png)
         skin/classic/aero/browser/devtools/newtab@2x.png             (../shared/devtools/images/newtab@2x.png)