Bug 1443561 - WebExtension themes additional backgrounds alignment should be relative to the toolbox r=jaws
authorVivek Dhingra <vivek3zero@gmail.com>
Thu, 12 Apr 2018 05:20:38 -0400
changeset 413093 f3e01de682f1
parent 413092 52ec9a6c12a1
child 413094 787dce710dce
push id33833
push useraiakab@mozilla.com
push dateFri, 13 Apr 2018 09:41:15 +0000
treeherdermozilla-central@260e4c83c8a9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1443561
milestone61.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 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
browser/base/content/browser.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,33 +3,30 @@
  * 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;
 }
 
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
@@ -356,16 +353,24 @@ toolbarpaletteitem {
 #main-window[inFullscreen] #high-priority-global-notificationbox {
   visibility: collapse;
 }
 
 #navigator-toolbox[fullscreenShouldAnimate] {
   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 {
   height: 16px;
   width: 16px;
 }
 
 @media not all and (min-resolution: 1.1dppx) {
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -261,32 +261,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,13 +1,14 @@
 [DEFAULT]
 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]
 [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");
 });