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 413278 ceac91dc08be
parent 413277 6547c27303bc
child 413309 c19f2cea4987
child 413350 a3df33c5d526
push id33841
push userapavel@mozilla.com
push dateSat, 14 Apr 2018 01:09:00 +0000
treeherdermozilla-central@ceac91dc08be [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout, jaws
bugs1443561
milestone61.0a1
backs outf3e01de682f1
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
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");
 });