Bug 1354145 - fix background colour across customize mode as well as integration with the footer, r=daleharvey
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 28 Jun 2017 22:03:04 +0100
changeset 366581 518a396f9e783431fffad19b77cf83df44e0b5f8
parent 366580 0896f6d55565f5a9ff866520fbbe6e3b47b074f3
child 366582 8b016e1da34dba7e42d07efca4e7b15a813fd99e
push id45668
push usergijskruitbosch@gmail.com
push dateThu, 29 Jun 2017 09:04:56 +0000
treeherderautoland@99e8731d94f0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaleharvey
bugs1354145
milestone56.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 1354145 - fix background colour across customize mode as well as integration with the footer, r=daleharvey MozReview-Commit-ID: 5zjp4i5HYmp
browser/base/content/browser.css
browser/themes/linux/jar.mn
browser/themes/osx/jar.mn
browser/themes/shared/browser.inc.css
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/windows/jar.mn
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1226,16 +1226,21 @@ toolbarpaletteitem[place="palette"] > #d
   flex-grow: 1; /* Grow so there isn't empty space below the footer */
   min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */
 }
 
 #customization-container[photon] > #customization-content-container > #customization-palette-container {
   flex-grow: 1;
 }
 
+#customization-container[photon] #customization-panelHolder {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 #customization-panelHolder > #widget-overflow-fixed-list {
   padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
   flex: 0 1 auto; /* Size to content, but allow ourselves to shrink */
   display: flex;
   flex-direction: column;
   overflow-y: auto;
 }
 
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -29,18 +29,20 @@ browser.jar:
   skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/Toolbar-small.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
   skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
+#ifndef MOZ_PHOTON_THEME
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
+#endif
 * skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png (downloads/download-glow-menuPanel.png)
   skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png)
 * skin/classic/browser/downloads/downloads.css        (downloads/downloads.css)
   skin/classic/browser/feeds/feedIcon.png             (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png           (feeds/feedIcon16.png)
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -47,18 +47,20 @@ browser.jar:
   skin/classic/browser/webRTC-sharingMicrophone-menubar.png
   skin/classic/browser/webRTC-sharingMicrophone-menubar@2x.png
   skin/classic/browser/webRTC-sharingScreen-menubar.png
   skin/classic/browser/webRTC-sharingScreen-menubar@2x.png
   skin/classic/browser/webRTC-indicator.css
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
   skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
+#ifndef MOZ_PHOTON_THEME
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
+#endif
 * skin/classic/browser/customizableui/panelUI.css    (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png (downloads/download-glow-menuPanel.png)
   skin/classic/browser/downloads/download-glow-menuPanel@2x.png (downloads/download-glow-menuPanel@2x.png)
   skin/classic/browser/downloads/download-notification-finish.png  (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-finish@2x.png  (downloads/download-notification-finish@2x.png)
   skin/classic/browser/downloads/download-notification-start.png  (downloads/download-notification-start.png)
   skin/classic/browser/downloads/download-notification-start@2x.png  (downloads/download-notification-start@2x.png)
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -12,16 +12,36 @@
 %else
 :root[tabsintitlebar][sizemode=normal] #TabsToolbar
 %endif
 {
   padding-inline-start: 40px;
 }
 %endif
 
+%ifdef MOZ_PHOTON_THEME
+:root {
+  --toolbar-background-color: -moz-dialog;
+  --toolbar-foreground-color: -moz-dialogtext;
+}
+/* Colour to use for toolbars and customize mode */
+%if defined(XP_WIN) || defined(XP_MACOSX)
+%ifdef XP_WIN
+@media (-moz-windows-default-theme) {
+%endif
+:root {
+  --toolbar-background-color: #f9f9fa;
+  --toolbar-foreground-color: #0c0c0d;
+}
+%ifdef XP_WIN
+}
+%endif
+%endif
+
+
 /* Go button */
 .urlbar-go-button {
   padding: 0 3px;
   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
 }
 
 .urlbar-go-button {
   -moz-image-region: rect(0, 42px, 14px, 28px);
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -100,18 +100,23 @@
 
 #main-window[customizing] .customization-target:not(#PanelUI-contents):not(#widget-overflow-fixed-list) {
   min-width: 100px;
   padding-left: 10px;
   padding-right: 10px;
 }
 
 #customization-container {
+%ifdef MOZ_PHOTON_THEME
+  background-color: var(--toolbar-background-color);
+  color: var(--toolbar-foreground-color);
+%else
   background-color: -moz-field;
   color: -moz-fieldText;
+%endif
   text-shadow: none;
 }
 
 #customization-palette,
 #customization-empty {
   padding: 5px 25px 25px;
 }
 
@@ -121,27 +126,33 @@
   color: GrayText;
   font-weight: 200;
   margin: 25px 25px 12px;
   padding-bottom: 12px;
   border-bottom: 1px solid ThreeDLightShadow;
 }
 
 #customization-panel-container {
+%ifndef MOZ_PHOTON_THEME
   padding: 15px 25px 25px;
   background-image: linear-gradient(to bottom, #3e86ce, #3878ba);
+%else
+  padding: 0 25px 25px;
+%endif
 }
 
+%ifndef MOZ_PHOTON_THEME
 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
 #customization-footer {
   background-color: -moz-dialog;
 }
+%endif
 
 #customization-footer {
-  border-top: 1px solid ThreeDLightShadow;
+  border-top: 2px solid ThreeDLightShadow;
   padding: 10px;
 }
 
 %if defined(XP_MACOSX) || defined(XP_WIN)
 %ifdef XP_WIN
 @media (-moz-windows-default-theme) {
 %endif
 
@@ -237,27 +248,29 @@
 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
   width: 16px;
   height: 16px;
   border-radius: 2px;
   background-image: url("chrome://browser/content/default-theme-icon.svg");
   background-size: contain;
 }
 
+%ifndef MOZ_PHOTON_THEME
 #main-window[customize-entered] #customization-panel-container {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"),
                     url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"),
                     url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
                     linear-gradient(to bottom, #3e86ce, #3878ba);
   background-position: center top, left center, left top, left top, left top;
   background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
   background-size: auto 12px, 12px 100%, auto, auto, auto;
   background-attachment: scroll, scroll, fixed, fixed, scroll;
 }
+%endif
 
 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
 toolbarpaletteitem[place="toolbar"] {
   transition: border-width 250ms ease-in-out;
 }
 
 toolbarpaletteitem[mousedown] {
   cursor: -moz-grabbing;
@@ -482,22 +495,20 @@ toolbarpaletteitem[place="toolbar"]:not(
   border-inline-end: 1px solid var(--panel-separator-color);
 }
 
 #customization-panelWrapper > .panel-arrowcontent {
   color: var(--arrowpanel-color);
   background: var(--arrowpanel-background);
   background-clip: padding-box;
   border: 1px solid var(--arrowpanel-border-color);
+  box-shadow: 0 0 10px hsla(0,0%,0%,.2);
 %ifdef XP_MACOSX
-  box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
   -moz-appearance: none;
   border-radius: var(--arrowpanel-border-radius);
-%else
-  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
 %endif
 }
 
 #customization-panelWrapper > .panel-arrowbox {
   position: relative;
   height: 10px;
 %ifndef XP_MACOSX
   margin-bottom: 2px;
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -49,20 +49,22 @@ browser.jar:
   skin/classic/browser/toolbarbutton-dropdown-arrow-win7.png
   skin/classic/browser/urlbar-popup-blocked.png
   skin/classic/browser/urlbar-history-dropmarker.png
   skin/classic/browser/urlbar-history-dropmarker@2x.png
   skin/classic/browser/urlbar-history-dropmarker-win7.png
   skin/classic/browser/urlbar-history-dropmarker-win7@2x.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)
+  skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
+#ifndef MOZ_PHOTON_THEME
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
-  skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
+#endif
   skin/classic/browser/customizableui/menu-arrow.svg           (customizableui/menu-arrow.svg)
 * skin/classic/browser/customizableui/panelUI.css       (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png   (downloads/download-glow-menuPanel.png)
   skin/classic/browser/downloads/download-glow-menuPanel-win7.png   (downloads/download-glow-menuPanel-win7.png)
   skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png)
 * skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)