Backed out changeset f3e01de682f1 (bug 1443561) on request from jaws a=backout r=jaws
authorAndreea Pavel <apavel@mozilla.com>
Sat, 14 Apr 2018 04:08:45 +0300
changeset 782064 ceac91dc08bef5d099c10dda632fc3651b23c897
parent 782003 6547c27303bc4d8961b11e656751e839807d65c7
child 782065 3d80f39117fcaf54f7448ece21079637fc147c5c
child 782071 89a91357657aa712eead21fd644cbb8a1a816ee1
child 782075 1e6f1a45c16352e4c6ac1e20925539d2c55b2e96
child 782079 a591c1d3218d24bc06810a66c5fc4b6b257f5ebb
child 782118 a3df33c5d5265805343d5a9a1359a79771112392
child 782150 c19f2cea4987db5855c65b7128f10643a4eef99b
child 784384 f6535e6bd367cf90d9348062073c6644d3517edc
child 785141 f2c29ad16a4f9ef2af5ae3fd582b1b2baa6ede21
child 785588 1bba2647fb92793b4e70ef8a4e9fdeed731df2f3
child 785822 8d1d3f7cbe9cb4111e18f295291011fa43a7db63
child 786481 c824afb2f97f37dfa9c619995d1cd8948f73c4ab
child 786482 a30d791a1558c36e3cd8e527212e0dd9eaa2494c
child 787836 7cb6484af97af898dc72ede6c04de5e2be743a03
child 800367 58562a1b80616207062f259850d1655ec66616b5
child 803268 efea59e1ee269e13acbddff05f5a55daee26a385
child 806351 fe579c3d3004337c9f6c1c70867d0d4b982590d8
child 807764 54639dad5ea683a7d2682b194b7cc51b8a79a7cc
child 809492 cfcfa8cf3f2b3b721266045ed53211e27515588b
child 809845 fb71429463615a66cebda2a6fe1a5a2cb6089236
child 811253 1485569d5dbeea4f57a5d8b340f134600954fa6b
child 821903 7f724cedae25920bbd646f702c22dc9db3b22257
child 822443 474ffaf64c6eea44bb2edbd145cd05c4ebe9b33e
push id106473
push userbmo:eoger@fastmail.com
push dateSat, 14 Apr 2018 02:05:37 +0000
reviewersbackout, jaws
bugs1443561
milestone61.0a1
backs outf3e01de682f1a39c4a906423823def6f8804ad49
Backed out changeset f3e01de682f1 (bug 1443561) on request from jaws a=backout r=jaws
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,30 +3,33 @@
  * 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) !important;
-  background-position: right top !important;
+  background-image: var(--lwt-header-image), var(--lwt-additional-images) !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
@@ -353,24 +356,16 @@ 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,25 +261,32 @@ class Theme {
       }
 
       switch (property) {
         case "additional_backgrounds_alignment": {
           if (!assertValidAdditionalBackgrounds(property, val.length)) {
             break;
           }
 
-          this.lwtStyles.backgroundsAlignment = val.join(",");
+          let alignment = [];
+          if (this.lwtStyles.headerURL) {
+            alignment.push("right top");
+          }
+          this.lwtStyles.backgroundsAlignment = alignment.concat(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,13 @@
 [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]
deleted file mode 100644
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
+++ /dev/null
@@ -1,105 +0,0 @@
-"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,68 +6,60 @@ add_task(async function setup() {
   });
 });
 
 add_task(async function test_support_backgrounds_position() {
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
-          "headerURL": "face1.png",
-          "additional_backgrounds": ["face2.png", "face2.png", "face2.png"],
+          "headerURL": "face.png",
+          "additional_backgrounds": ["face.png", "face.png", "face.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: {
-      "face1.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
-      "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
+      "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 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",
+  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",
                "The backgroundPosition should use the default value.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
-  toolboxCS = window.getComputedStyle(toolbox);
-
+  style = window.getComputedStyle(docEl);
   // Styles should've reverted to their initial values.
-  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");
+  Assert.equal(style.backgroundImage, "none");
+  Assert.equal(style.backgroundPosition, "0% 0%");
+  Assert.equal(style.backgroundRepeat, "repeat");
 });
 
 add_task(async function test_support_backgrounds_repeat() {
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "face0.png",
@@ -88,37 +80,31 @@ 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 rootCS = window.getComputedStyle(docEl);
-  let toolboxCS = window.getComputedStyle(toolbox);
-  let bgImage = rootCS.backgroundImage.split(",")[0].trim();
+  let style = window.getComputedStyle(docEl);
+  let bgImage = style.backgroundImage.split(",")[0].trim();
   Assert.ok(bgImage.includes("face0.png"),
             `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  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.");
+  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.");
 
   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({
@@ -139,30 +125,28 @@ 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 rootCS = window.getComputedStyle(docEl);
-  let toolboxCS = window.getComputedStyle(toolbox);
-  let bgImage = rootCS.backgroundImage.split(",")[0];
+  let style = window.getComputedStyle(docEl);
+  let bgImage = style.backgroundImage.split(",")[0];
   Assert.ok(bgImage.includes("face.png"),
             `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  Assert.equal("none", toolboxCS.backgroundImage,
-               "The backgroundImage should not use face.png.");
-  Assert.equal(rootCS.backgroundPosition, "100% 0%",
+  Assert.equal(bgImage + ", none", style.backgroundImage,
+               "The backgroundImage should use face.png only once.");
+  Assert.equal(style.backgroundPosition, "100% 0%",
                "The backgroundPosition should use the default value.");
-  Assert.equal(rootCS.backgroundRepeat, "no-repeat",
+  Assert.equal(style.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");
 });