Bug 1443561 - Part 1: Make additional backgrounds alignment relative to toolbox. r=jaws, a=RyanVM DEVEDITION_62_0b20_BUILD1 DEVEDITION_62_0b20_RELEASE FIREFOX_62_0b20_BUILD1 FIREFOX_62_0b20_RELEASE
authorVivek Dhingra <vivek3zero@gmail.com>
Fri, 17 Aug 2018 09:57:25 +0100
changeset 481063 7fda8e538067e826e61f6d4f6f9c3e955b0597aa
parent 481062 6cbbaad0935bc276da68a79559a7dbb7419baf23
child 481064 6cbc295665d96cc6a528e1a374847f2b9b235aa6
push id1757
push userffxbld-merge
push dateFri, 24 Aug 2018 17:02:43 +0000
treeherdermozilla-release@736023aebdb1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, RyanVM
bugs1443561
milestone62.0
Bug 1443561 - Part 1: Make additional backgrounds alignment relative to toolbox. r=jaws, a=RyanVM MozReview-Commit-ID: 5gjrzZiLx0Q
browser/base/content/browser.css
browser/themes/shared/browser.inc.css
toolkit/components/extensions/parent/ext-theme.js
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -3,39 +3,44 @@
  * 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 {
   --panelui-subview-transition-duration: 150ms;
   --lwt-additional-images: none;
-  --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
 }
 
 :root:-moz-lwtheme {
   color: var(--lwt-text-color) !important;
 }
 
 :root:-moz-lwtheme {
   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-position: right top !important;
 }
 
 :root:-moz-lwtheme:-moz-window-inactive {
   background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
 }
 
+/* Set additional backgrounds alignment relative to toolbox */
+
+#navigator-toolbox:-moz-lwtheme {
+  background-image: var(--lwt-additional-images);
+  background-position: var(--lwt-background-alignment);
+  background-repeat: var(--lwt-background-tiling);
+}
+
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else
   min-width: 300px;
 %endif
 }
 
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -19,16 +19,17 @@
   --space-above-tabbar: 8px;
 }
 
 :root[sessionrestored]:-moz-lwtheme {
   transition: @themeTransition@;
 }
 
 /* Increase contrast of UI links on dark themes */
+
 :root[lwt-popup-brighttext] panel .text-link {
   color: @lwtPopupBrighttextLinkColor@;
 }
 
 /* Toolbar / content area border */
 
 #navigator-toolbox::after {
   content: "";
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -262,32 +262,25 @@ class Theme {
       }
 
       switch (property) {
         case "additional_backgrounds_alignment": {
           if (!assertValidAdditionalBackgrounds(property, val.length)) {
             break;
           }
 
-          let alignment = [];
-          if (this.lwtStyles.headerURL) {
-            alignment.push("right top");
-          }
-          this.lwtStyles.backgroundsAlignment = alignment.concat(val).join(",");
+          this.lwtStyles.backgroundsAlignment = val.join(",");
           break;
         }
         case "additional_backgrounds_tiling": {
           if (!assertValidAdditionalBackgrounds(property, val.length)) {
             break;
           }
 
           let tiling = [];
-          if (this.lwtStyles.headerURL) {
-            tiling.push("no-repeat");
-          }
           for (let i = 0, l = this.lwtStyles.additionalBackgrounds.length; i < l; ++i) {
             tiling.push(val[i] || "no-repeat");
           }
           this.lwtStyles.backgroundsTiling = tiling.join(",");
           break;
         }
       }
     }
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -1,14 +1,15 @@
 [DEFAULT]
 support-files =
   head.js
 
 [browser_ext_management_themes.js]
 skip-if = verify
+[browser_ext_themes_additional_backgrounds_alignment.js]
 [browser_ext_themes_alpha_accentcolor.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_getCurrent.js]
 [browser_ext_themes_dynamic_onUpdated.js]
 [browser_ext_themes_dynamic_updates.js]
 [browser_ext_themes_getCurrent_differentExt.js]
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
@@ -0,0 +1,105 @@
+"use strict";
+
+/* globals InspectorUtils */
+
+// Case 1 - When there is a headerURL image and additional_backgrounds_alignment is not specified.
+// So background-position should default to "left top"
+add_task(async function test_default_additional_backgrounds_alignment() {
+  const LEFT_TOP = "0% 0%";
+  const RIGHT_TOP = "100% 0%";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+          "additional_backgrounds": ["image1.png", "image1.png"],
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+
+  });
+
+  await extension.startup();
+
+  let docEl = document.documentElement;
+  let rootCS = window.getComputedStyle(docEl);
+
+  Assert.equal(
+    rootCS.getPropertyValue("background-position"),
+    RIGHT_TOP,
+    "root only contains headerURL alignment property"
+  );
+
+
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let toolboxCS = window.getComputedStyle(toolbox);
+
+  Assert.equal(
+    toolboxCS.getPropertyValue("background-position"),
+    LEFT_TOP,
+    toolbox.id + " only contains default additional backgrounds alignment property"
+  );
+
+  await extension.unload();
+});
+
+
+// Case 2 - When there is a headerURL image and additional_backgrounds_alignment is specified.
+add_task(async function test_additional_backgrounds_alignment() {
+  const LEFT_BOTTOM = "0% 100%";
+  const CENTER_CENTER = "50% 50%";
+  const RIGHT_TOP = "100% 0%";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+          "additional_backgrounds": ["image1.png", "image1.png", "image1.png"],
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+        },
+        "properties": {
+          additional_backgrounds_alignment: ["left bottom", "center center", "right top"],
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+
+  });
+
+  await extension.startup();
+
+  let docEl = document.documentElement;
+  let rootCS = window.getComputedStyle(docEl);
+
+  Assert.equal(
+    rootCS.getPropertyValue("background-position"),
+    RIGHT_TOP,
+    "root only contains headerURL alignment property"
+  );
+
+
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let toolboxCS = window.getComputedStyle(toolbox);
+
+  Assert.equal(
+    toolboxCS.getPropertyValue("background-position"),
+    LEFT_BOTTOM + ", " + CENTER_CENTER + ", " + RIGHT_TOP,
+    toolbox.id + " contains additional backgrounds alignment properties"
+  );
+
+  await extension.unload();
+});
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
@@ -6,60 +6,68 @@ add_task(async function setup() {
   });
 });
 
 add_task(async function test_support_backgrounds_position() {
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
-          "headerURL": "face.png",
-          "additional_backgrounds": ["face.png", "face.png", "face.png"],
+          "headerURL": "face1.png",
+          "additional_backgrounds": ["face2.png", "face2.png", "face2.png"],
         },
         "colors": {
           "accentcolor": `rgb(${FRAME_COLOR.join(",")})`,
           "textcolor": `rgb(${TAB_BACKGROUND_TEXT_COLOR.join(",")})`,
         },
         "properties": {
           "additional_backgrounds_alignment": ["left top", "center top", "right bottom"],
         },
       },
     },
     files: {
-      "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
+      "face1.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
+      "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
   await extension.startup();
 
   let docEl = window.document.documentElement;
+  let toolbox = document.querySelector("#navigator-toolbox");
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  let style = window.getComputedStyle(docEl);
-  let bgImage = style.backgroundImage.split(",")[0].trim();
-  Assert.ok(bgImage.includes("face.png"),
-            `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  Assert.equal(Array(4).fill(bgImage).join(", "), style.backgroundImage,
-               "The backgroundImage should use face.png four times.");
-  Assert.equal(style.backgroundPosition, "100% 0%, 0% 0%, 50% 0%, 100% 100%",
-               "The backgroundPosition should use the four values provided.");
-  Assert.equal(style.backgroundRepeat, "no-repeat",
+  let toolboxCS = window.getComputedStyle(toolbox);
+  let rootCS = window.getComputedStyle(docEl);
+  let rootBgImage = rootCS.backgroundImage.split(",")[0].trim();
+  let bgImage = toolboxCS.backgroundImage.split(",")[0].trim();
+  Assert.ok(rootBgImage.includes("face1.png"),
+            `The backgroundImage should use face1.png. Actual value is: ${rootBgImage}`);
+  Assert.equal(toolboxCS.backgroundImage, Array(3).fill(bgImage).join(", "),
+               "The backgroundImage should use face2.png three times.");
+  Assert.equal(toolboxCS.backgroundPosition, "0% 0%, 50% 0%, 100% 100%",
+               "The backgroundPosition should use the three values provided.");
+  Assert.equal(toolboxCS.backgroundRepeat, "no-repeat",
                "The backgroundPosition should use the default value.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
-  style = window.getComputedStyle(docEl);
+  toolboxCS = window.getComputedStyle(toolbox);
+
   // Styles should've reverted to their initial values.
-  Assert.equal(style.backgroundImage, "none");
-  Assert.equal(style.backgroundPosition, "0% 0%");
-  Assert.equal(style.backgroundRepeat, "repeat");
+  Assert.equal(rootCS.backgroundImage, "none");
+  Assert.equal(rootCS.backgroundPosition, "0% 0%");
+  Assert.equal(rootCS.backgroundRepeat, "repeat");
+  Assert.equal(toolboxCS.backgroundImage, "none");
+  Assert.equal(toolboxCS.backgroundPosition, "0% 0%");
+  Assert.equal(toolboxCS.backgroundRepeat, "repeat");
 });
 
 add_task(async function test_support_backgrounds_repeat() {
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "face0.png",
@@ -80,31 +88,37 @@ add_task(async function test_support_bac
       "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
       "face3.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
   await extension.startup();
 
   let docEl = window.document.documentElement;
+  let toolbox = document.querySelector("#navigator-toolbox");
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  let style = window.getComputedStyle(docEl);
-  let bgImage = style.backgroundImage.split(",")[0].trim();
+  let rootCS = window.getComputedStyle(docEl);
+  let toolboxCS = window.getComputedStyle(toolbox);
+  let bgImage = rootCS.backgroundImage.split(",")[0].trim();
   Assert.ok(bgImage.includes("face0.png"),
             `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  Assert.equal([0, 1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
-               style.backgroundImage, "The backgroundImage should use face.png four times.");
-  Assert.equal(style.backgroundPosition, "100% 0%",
-               "The backgroundPosition should use the default value.");
-  Assert.equal(style.backgroundRepeat, "no-repeat, repeat-x, repeat-y, repeat",
-               "The backgroundPosition should use the four values provided.");
+  Assert.equal([1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
+               toolboxCS.backgroundImage, "The backgroundImage should use face.png three times.");
+  Assert.equal(rootCS.backgroundPosition, "100% 0%",
+               "The backgroundPosition should use the default value for root.");
+  Assert.equal(toolboxCS.backgroundPosition, "0% 0%",
+               "The backgroundPosition should use the default value for navigator-toolbox.");
+  Assert.equal(rootCS.backgroundRepeat, "no-repeat",
+               "The backgroundRepeat should use the default values for root.");
+  Assert.equal(toolboxCS.backgroundRepeat, "repeat-x, repeat-y, repeat",
+               "The backgroundRepeat should use the three values provided for navigator-toolbox.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });
 
 add_task(async function test_additional_images_check() {
   let extension = ExtensionTestUtils.loadExtension({
@@ -125,28 +139,30 @@ add_task(async function test_additional_
     files: {
       "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
   await extension.startup();
 
   let docEl = window.document.documentElement;
+  let toolbox = document.querySelector("#navigator-toolbox");
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  let style = window.getComputedStyle(docEl);
-  let bgImage = style.backgroundImage.split(",")[0];
+  let rootCS = window.getComputedStyle(docEl);
+  let toolboxCS = window.getComputedStyle(toolbox);
+  let bgImage = rootCS.backgroundImage.split(",")[0];
   Assert.ok(bgImage.includes("face.png"),
             `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  Assert.equal(bgImage + ", none", style.backgroundImage,
-               "The backgroundImage should use face.png only once.");
-  Assert.equal(style.backgroundPosition, "100% 0%",
+  Assert.equal("none", toolboxCS.backgroundImage,
+               "The backgroundImage should not use face.png.");
+  Assert.equal(rootCS.backgroundPosition, "100% 0%",
                "The backgroundPosition should use the default value.");
-  Assert.equal(style.backgroundRepeat, "no-repeat",
+  Assert.equal(rootCS.backgroundRepeat, "no-repeat",
                "The backgroundPosition should use only one (default) value.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });