Bug 1053434 - Shared theme changes for window and navbar for devedition;r=Gijs,r=MattN
☠☠ backed out by c243417f2477 ☠ ☠
authorBrian Grinstead <bgrinstead@mozilla.com>
Fri, 31 Oct 2014 19:06:06 -0700
changeset 213528 019609619a48bdf303c26de0e2a68d291c2c04a8
parent 213527 c6d53703d44944687ee1b542289ae2e02b859479
child 213529 a9902edc4870d0a2d2acee34f5a13aa180d0b0e1
push id27754
push userphilringnalda@gmail.com
push dateSun, 02 Nov 2014 16:56:35 +0000
treeherdermozilla-central@6ca3405c22e8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, MattN
bugs1053434
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
@@ -1812,17 +1812,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
@@ -193,16 +193,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), transparent) 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
@@ -320,16 +320,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, 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);
-  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
@@ -228,16 +228,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)
@@ -659,16 +661,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)