Bug 1443561 - WebExtension themes additional backgrounds alignment should be relative to the toolbox r=jaws

This patch changes alignment property of additional backgrounds to be relative to #navigator-toolbox, instead of root.

MozReview-Commit-ID: LlSZmu39u6D

--HG--
extra : rebase_source : 1c5eda6d21f80b377c360dd26830c48c7fdc4548

browser/base/content/browser.css

@@ -8,7 +8,6 @@
 :root {
   --panelui-subview-transition-duration: 150ms;
   --lwt-additional-images: none;
-  --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
 }
 
@@ -18,13 +17,11 @@
 
 :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 {
@@ -361,6 +358,14 @@ toolbarpaletteitem {
   transition: 1.5s margin-top ease-out;
 }
 
+/* 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);
+}
+
+
 /* Rules to help integrate WebExtension buttons */
 
 .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {

toolkit/components/extensions/parent/ext-theme.js

@@ -266,11 +266,7 @@ class Theme {
             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": {
@@ -279,9 +275,6 @@ class Theme {
           }
 
           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");
           }

toolkit/components/extensions/test/browser/browser.ini

@@ -3,6 +3,7 @@ support-files =
   head.js
 
 [browser_ext_management_themes.js]
+[browser_ext_themes_additional_backgrounds_alignment.js]
 [browser_ext_themes_alpha_accentcolor.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_getCurrent.js]

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();
+});

toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js

@@ -11,8 +11,8 @@ add_task(async function test_support_backgrounds_position() {
     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(",")})`,
@@ -24,37 +24,45 @@ add_task(async function test_support_backgrounds_position() {
       },
     },
     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() {
@@ -85,21 +93,27 @@ add_task(async function test_support_backgrounds_repeat() {
   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();
 
@@ -130,20 +144,22 @@ add_task(async function test_additional_images_check() {
   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();