Bug 1443561 - Part 1: Make additional backgrounds alignment relative to toolbox. r=jaws
authorVivek Dhingra <vivek3zero@gmail.com>
Fri, 17 Aug 2018 09:57:25 +0100
changeset 432602 6086b5e84d5b
parent 432601 7555241630ce
child 432603 edc9c6244815
push id34482
push usertoros@mozilla.com
push dateTue, 21 Aug 2018 21:56:56 +0000
treeherdermozilla-central@7c96ad3ab673 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1443561
milestone63.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 - Part 1: Make additional backgrounds alignment relative to toolbox. r=jaws 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,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
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -19,20 +19,29 @@
   --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@;
 }
 
+/* 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);
+}
+
 /* Toolbar / content area border */
 
 #navigator-toolbox::after {
   content: "";
   display: -moz-box;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -303,32 +303,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;
         }
         default: {
           if (this.experiment && this.experiment.properties && property in this.experiment.properties) {
--- 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_experiment.js]
 [browser_ext_themes_getCurrent_differentExt.js]
 [browser_ext_themes_lwtsupport.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
@@ -1,59 +1,67 @@
 "use strict";
 
 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",
@@ -74,31 +82,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({
@@ -119,28 +133,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");
 });