Bug 1486202 - Port bug 1443561 to TB: WebExtension themes additional backgrounds alignment should be relative to the toolbox. r+a=jorgk BETA_60_CONTINUATION
authorRichard Marti <richard.marti@gmail.com>
Wed, 22 Aug 2018 10:31:26 +0200
branchBETA_60_CONTINUATION
changeset 32455 f1db5fa3f2fa
parent 32454 3631b10bbfed
child 32456 65b4b82776c4
push id385
push userclokep@gmail.com
push dateTue, 04 Sep 2018 23:26:14 +0000
bugs1486202, 1443561
Bug 1486202 - Port bug 1443561 to TB: WebExtension themes additional backgrounds alignment should be relative to the toolbox. r+a=jorgk
mail/base/content/messageWindow.xul
mail/base/content/messenger.css
mail/base/content/messenger.xul
mail/base/content/msgMail3PaneWindow.js
mail/themes/linux/mail/addrbook/addressbook.css
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/osx/mail/addrbook/addressbook.css
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/osx/mail/primaryToolbar.css
mail/themes/shared/mail/addressbook.css
mail/themes/shared/mail/messengercompose.css
mail/themes/windows/mail/addrbook/addressbook.css
mail/themes/windows/mail/compose/messengercompose.css
mail/themes/windows/mail/primaryToolbar.css
--- a/mail/base/content/messageWindow.xul
+++ b/mail/base/content/messageWindow.xul
@@ -123,16 +123,19 @@
           <toolbarbutton class="titlebar-button" id="titlebar-close" oncommand="window.close()"/>
         </hbox>
       </hbox>
       <hbox id="titlebar-fullscreen-button"/>
     </hbox>
   </vbox>
 #endif
 
+  <!-- Placeholder box for drawing additional background images. -->
+  <hbox id="LW-background-box"/>
+
   <!-- navigation-toolbox is provided by mailWindowOverlay.xul -->
   <toolbox id="navigation-toolbox" class="toolbox-top" />
 
   <!-- mail-toolbox is provided by mailWindowOverlay.xul -->
   <toolbox id="mail-toolbox" />
 
   <tooltip id="aHTMLTooltip" page="true"/>
 
--- a/mail/base/content/messenger.css
+++ b/mail/base/content/messenger.css
@@ -201,29 +201,61 @@ menupopup[type="folder"] {
   -moz-binding: url("chrome://messenger/content/addressbook/addrbookWidgets.xml#map-list");
 }
 
 /* Lightweight themes support */
 
 :root:-moz-lwtheme {
   color: var(--lwt-text-color) !important;
   background-color: var(--lwt-accent-color) !important;
-  background-image: var(--lwt-additional-images) !important;
-  background-position: var(--lwt-background-alignment) !important;
-  background-repeat: var(--lwt-background-tiling) !important;
 }
 
 :root:-moz-lwtheme[lwtheme-image] {
-  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
+  background-image: var(--lwt-header-image) !important;
+  background-repeat: no-repeat;
+  background-position: right top !important;
 }
 
 :root:-moz-lwtheme:-moz-window-inactive {
   background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
 }
 
+/* Set position: relative to let the LW-background-box be behind them. */
+#navigation-toolbox:-moz-lwtheme,
+#tabmail-container:-moz-lwtheme,
+#mail-toolbox:-moz-lwtheme,
+#messagepaneboxwrapper:-moz-lwtheme {
+  position: relative;
+}
+
+#LW-background-box {
+  display: none;
+}
+
+/* Add a box to draw additional background images. */
+#LW-background-box:-moz-lwtheme {
+  display: -moz-box;
+  height: 60px;
+  position: fixed;
+  pointer-events: none;
+  top: 0;
+  width: -moz-available;
+}
+
+/* Set additional backgrounds alignment relative to toolbox.
+   This rule needs to be in content to avoid CSP issues. */
+#LW-background-box:-moz-lwtheme,
+#status-bar:-moz-lwtheme,
+#ab-toolbox:-moz-lwtheme,
+#compose-toolbox:-moz-lwtheme {
+  background-image: var(--lwt-additional-images);
+  background-position: var(--lwt-background-alignment);
+  background-repeat: var(--lwt-background-tiling);
+}
+
 :root[lwthemefooter="true"] #status-bar:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: bottom left;
   background-color: var(--lwt-accent-color);
   background-image: var(--lwt-footer-image);
 }
 
 /* AppButton support */
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -247,16 +247,19 @@
     </hbox>
 #ifdef XP_MACOSX
     <hbox id="titlebar-fullscreen-button"/>
 #endif
   </hbox>
 </vbox>
 #endif
 
+  <!-- Placeholder box for drawing additional background images. -->
+  <hbox id="LW-background-box"/>
+
   <!-- navigation-toolbox is augmented by mailWindowOverlay.xul -->
   <toolbox id="navigation-toolbox" class="toolbox-top">
 
     <toolbar id="tabs-toolbar">
       <!-- class tabmail-tabs is unused and only maintained for add-ons. -->
       <tabs flex="1"
             id="tabmail-tabs"
             align="end"
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -1907,16 +1907,26 @@ var TabsInTitlebar = {
         titlebarContent.style.removeProperty("margin-bottom");
       }
 
       // Then add a negative margin to the titlebar, so that the following elements
       // will overlap it by the greater of the titlebar height or the tabstrip+menu.
       let maxTitlebarOrTabsHeight = Math.max(titlebarContentHeight, tabAndMenuHeight);
       titlebar.style.marginBottom = "-" + maxTitlebarOrTabsHeight + "px";
 
+      // Calculate the LW-backgroundBox height to place the images correctly.
+      let root = $("messengerWindow");
+      let bgBox = $("LW-background-box");
+      if (root.getAttribute("lwtheme-image")) {
+        let bgBoxHeight = rect($("navigation-toolbox")).height + rect($("mail-toolbox")).height;
+        bgBox.style.height = bgBoxHeight + "px";
+      } else {
+        bgBox.style.removeProperty("height");
+      }
+
       // Finally, size the placeholders:
       if (AppConstants.platform == "macosx") {
         this._sizePlaceholder("fullscreen-button", secondaryButtonsWidth);
       }
 
       this._sizePlaceholder("caption-buttons", captionButtonsBoxWidth);
 
     } else {
--- a/mail/themes/linux/mail/addrbook/addressbook.css
+++ b/mail/themes/linux/mail/addrbook/addressbook.css
@@ -10,22 +10,16 @@
 @import url("chrome://messenger/skin/shared/addressbook.css");
 
 #ab-toolbox {
   -moz-appearance: none;
   background-color: var(--toolbar-bgcolor);
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
-/* Uses a background image instead of a border to avoid jumping of the toolbar
-   when a theme is enabled. */
-#ab-toolbox:-moz-lwtheme {
-  background-image: linear-gradient(to bottom, var(--tabs-border-color, transparent) 1px, transparent 1px);
-}
-
 #ab-toolbox > toolbar {
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;
 }
 
 /* ::::: directory pane adjustments ::::: */
 
 #abDirTreeHeader {
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -27,29 +27,20 @@
   border-top-color: Highlight;
 }
 
 #attachmentBucket attachmentitem[dropOn="bottom"] {
   border-bottom-color: Highlight;
 }
 
 #compose-toolbox {
-  -moz-appearance: none;
   background-color: var(--toolbar-bgcolor);
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
-#compose-toolbox:-moz-lwtheme {
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, inherit);
-  /* Uses a background image instead of a border to avoid jumping of the toolbar
-     when a theme is enabled. */
-  background-image: linear-gradient(to bottom, var(--tabs-border-color, transparent) 1px, transparent 1px);
-}
-
 /** Stock icons for the menu items. */
 
 #fontFaceMenu {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic");
   list-style-image: url("moz-icon://stock/gtk-select-font?size=menu");
 }
 
 #increaseIndent {
--- a/mail/themes/osx/mail/addrbook/addressbook.css
+++ b/mail/themes/osx/mail/addrbook/addressbook.css
@@ -10,24 +10,23 @@
 @import url("chrome://messenger/skin/shared/addressbook.css");
 
 #ab-bar2 {
   padding: 0 4px;
 }
 
 #ab-toolbox:-moz-lwtheme {
   -moz-appearance: none;
-  /* Uses a background image instead of a border to avoid jumping of the toolbar
-     when a theme is enabled. */
-  background-image: linear-gradient(to bottom, var(--tabs-border-color, transparent) 1px, transparent 1px);
 }
 
-#ab-toolbox:-moz-lwtheme::after {
+#ab-toolbox:-moz-lwtheme::before {
   content: "";
   display: -moz-box;
+  position: absolute;
+  top: 100%;
   margin-top: -1px;
   height: 1px;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
 #ab-toolbox > toolbar {
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -6,28 +6,21 @@
   == Styles for the main Messenger Compose window.
   ======================================================================= */
 
 @import url("chrome://messenger/skin/");
 @import url("chrome://messenger/skin/shared/messengercompose.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#compose-toolbox:-moz-lwtheme {
-  -moz-appearance: none;
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, inherit);
-  /* Uses a background image instead of a border to avoid jumping of the toolbar
-     when a theme is enabled. */
-  background-image: linear-gradient(to bottom, var(--tabs-border-color, transparent) 1px, transparent 1px);
-}
-
-#compose-toolbox:-moz-lwtheme::after {
+#compose-toolbox:-moz-lwtheme::before {
   content: "";
   display: -moz-box;
+  position: absolute;
+  top: 100%;
   margin-top: -1px;
   height: 1px;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
 #attachments-box[empty] > #attachmentBucket:focus {
   box-shadow: 0 0 1.5px 1px -moz-mac-focusring inset;
 }
@@ -49,21 +42,20 @@
 #compose-toolbox toolbarbutton[checked="true"] {
   background-color: transparent;
 }
 
 /* Inactive window state */
 #compose-toolbox > toolbar:-moz-window-inactive {
   border-top-color: rgba(255,255,255,0.45);
   border-bottom-color: rgba(0,0,0,0.35);
-  background-color: #cfcfcf;
 }
 
-#compose-toolbox > toolbar:-moz-lwtheme {
-  background-color: transparent;
+#compose-toolbox > toolbar:not(:-moz-lwtheme) {
+  background-color: #cfcfcf;
 }
 
 #composeToolbar2 {
   padding: 0 4px;
 }
 
 toolbar[nowindowdrag="true"] {
   -moz-appearance: none;
--- a/mail/themes/osx/mail/primaryToolbar.css
+++ b/mail/themes/osx/mail/primaryToolbar.css
@@ -21,23 +21,32 @@
   background: var(--toolbar-bgcolor);
 }
 
 .mail-toolbox:-moz-lwtheme,
 .contentTabToolbox:-moz-lwtheme {
   color: var(--toolbar-color, inherit);
 }
 
+/*
+  This is a workaround for Bug 1482157
+  -moz-appearance: toolbox; makes the macOS sheets attached to the element's
+  bottom border. We cannot put this property on the toolbox itself as it
+  cancels all backgrounds that are there, so we set it on the toolbox bottom
+  border.
+*/
 .mail-toolbox::after,
 .contentTabToolbox::after {
+  -moz-appearance: toolbox;
   content: "";
   display: -moz-box;
   margin-top: -1px;
   height: 1px;
-  border-bottom: 1px solid var(--toolbox-border-bottom-color);
+  /* use inset box-shadow instead of border because -moz-appearance hides the border */
+  box-shadow: inset 0 -1px var(--toolbox-border-bottom-color);
 }
 
 .mail-bar3 {
   padding: 4px 4px 0;
 }
 
 .mail-toolbox > toolbar
 .contentTabToolbox > toolbar {
--- a/mail/themes/shared/mail/addressbook.css
+++ b/mail/themes/shared/mail/addressbook.css
@@ -1,18 +1,39 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
+:root {
+  --lwt-additional-images: none;
+  --lwt-background-alignment: right top;
+  --lwt-background-tiling: no-repeat;
+}
+
 #ab-toolbox:-moz-lwtheme {
+  position: relative;
+  color: var(--toolbar-color, inherit);
+}
+
+#ab-toolbox > toolbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, inherit);
+}
+
+#ab-toolbox:-moz-lwtheme::after {
+  content: "";
+  display: -moz-box;
+  position: absolute;
+  pointer-events: none;
+  top: -1px;
+  width: -moz-available;
+  height: 1px;
+  border-bottom: 1px solid var(--tabs-border-color, transparent);
 }
 
 toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   text-align: start;
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -1,14 +1,20 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+:root {
+  --lwt-additional-images: none;
+  --lwt-background-alignment: right top;
+  --lwt-background-tiling: no-repeat;
+}
+
 #attachmentBucket {
   width: 15em;
   min-width: 15em;
 }
 
 #attachmentBucket > scrollbox > .scrollbox-innerbox {
   padding: 1px;
 }
@@ -29,16 +35,38 @@
   background-color: var(--toolbarbutton-active-background);
 }
 
 #compose-toolbox > toolbar {
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;
 }
 
+#compose-toolbox:-moz-lwtheme {
+  -moz-appearance: none;
+  position: relative;
+  background-color: none;
+  color: var(--toolbar-color, inherit);
+}
+
+#compose-toolbox:-moz-lwtheme::after {
+  content: "";
+  display: -moz-box;
+  position: absolute;
+  pointer-events: none;
+  top: -1px;
+  width: -moz-available;
+  height: 1px;
+  border-bottom: 1px solid var(--tabs-border-color, transparent);
+}
+
+#compose-toolbox > toolbar:-moz-lwtheme {
+  background-color: var(--toolbar-bgcolor);
+}
+
 #composeContentBox {
   /*
   * In order to remove the shadow border on left/right edges elegantly,
   * use left/right margins of -3px. We make up for this by adding 3px
   * of padding instead.
   */
   margin-right: -3px;
   margin-left: -3px;
--- a/mail/themes/windows/mail/addrbook/addressbook.css
+++ b/mail/themes/windows/mail/addrbook/addressbook.css
@@ -54,22 +54,16 @@
 /* :::: Toolbar :::: */
 
 #ab-toolbox {
   -moz-appearance: none;
   background-color: var(--toolbar-bgcolor);
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
-/* Uses a background image instead of a border to avoid jumping of the toolbar
-   when a theme is enabled. */
-#ab-toolbox:-moz-lwtheme {
-  background-image: linear-gradient(to bottom, var(--tabs-border-color, transparent) 1px, transparent 1px);
-}
-
 @media (-moz-windows-default-theme) {
   @media (-moz-os-version: windows-win8),
          (-moz-os-version: windows-win10) {
     #ab-toolbox:not(:-moz-lwtheme) {
       --toolbox-border-bottom-color: #c2c2c2;
     }
   }
 }
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -566,24 +566,16 @@ toolbarbutton.formatting-button[disabled
   @media (-moz-os-version: windows-win8),
          (-moz-os-version: windows-win10) {
     #compose-toolbox:not(:-moz-lwtheme) {
       --toolbox-border-bottom-color: #c2c2c2;
     }
   }
 }
 
-#compose-toolbox:-moz-lwtheme {
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color, inherit);
-  /* Uses a background image instead of a border to avoid jumping of the toolbar
-     when a theme is enabled. */
-  background-image: linear-gradient(to bottom, var(--tabs-border-color, transparent) 1px, transparent 1px);
-}
-
 toolbar:not(:-moz-lwtheme) {
   -moz-appearance: none;
 }
 
 #compose-toolbox > toolbar:not([type="menubar"]) {
   padding: 2px 1px;
 }
 
--- a/mail/themes/windows/mail/primaryToolbar.css
+++ b/mail/themes/windows/mail/primaryToolbar.css
@@ -27,17 +27,18 @@
     color: CaptionText;
   }
 
   #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
     color: InactiveCaptionText;
   }
 }
 
-#navigation-toolbox {
+#navigation-toolbox,
+#mail-toolbar-menubar2 {
   -moz-appearance: none;
 }
 
 @media (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
   #menubar-items > #mail-menubar > menu {
     -moz-appearance: none;
     border-style: none;
   }