Bug 1390917 - Accept data:image/png and data:image/jpeg as theme background; r=aswan,mikedeboer

MozReview-Commit-ID: 2roQoBrc7mv

--HG--
extra : rebase_source : 286fce68b0dea32e12f86ca92838d5f04d3efbb7

toolkit/components/extensions/Schemas.jsm

@@ -933,6 +933,19 @@ const FORMATS = {
     throw new SyntaxError(`String ${JSON.stringify(string)} must be a relative URL`);
   },
 
+  imageDataOrStrictRelativeUrl(string, context) {
+    // Do not accept a string which resolves as an absolute URL, or any
+    // protocol-relative URL, except PNG or JPG data URLs
+    if (!string.startsWith("data:image/png;base64,") && !string.startsWith("data:image/jpeg;base64,")) {
+      try {
+        return FORMATS.strictRelativeUrl(string, context);
+      } catch (e) {
+        throw new SyntaxError(`String ${JSON.stringify(string)} must be a relative or PNG or JPG data:image URL`);
+      }
+    }
+    return string;
+  },
+
   contentSecurityPolicy(string, context) {
     let error = contentPolicyService.validateAddonCSP(string);
     if (error != null) {

toolkit/components/extensions/schemas/manifest.json

@@ -271,6 +271,11 @@
         "type": "string",
         "format": "strictRelativeUrl"
       },
+      {
+        "id": "ImageDataOrExtensionURL",
+        "type": "string",
+        "format": "imageDataOrStrictRelativeUrl"
+      },
       {
         "id": "ExtensionID",
         "choices": [

toolkit/components/extensions/schemas/theme.json

@@ -25,15 +25,15 @@
             "properties": {
               "additional_backgrounds": {
                 "type": "array",
-                "items": { "$ref": "ExtensionURL" },
+                "items": { "$ref": "ImageDataOrExtensionURL" },
                 "optional": true
               },
               "headerURL": {
-                "$ref": "ExtensionURL",
+                "$ref": "ImageDataOrExtensionURL",
                 "optional": true
               },
               "theme_frame": {
-                "$ref": "ExtensionURL",
+                "$ref": "ImageDataOrExtensionURL",
                 "optional": true
               }
             },

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

@@ -109,3 +109,67 @@ add_task(async function test_dynamic_theme_updates() {
   let docEl = window.document.documentElement;
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });
+
+add_task(async function test_dynamic_theme_updates_with_data_url() {
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      permissions: ["theme"],
+    },
+    background() {
+      browser.test.onMessage.addListener((msg, details) => {
+        if (msg === "update-theme") {
+          browser.theme.update(details).then(() => {
+            browser.test.sendMessage("theme-updated");
+          });
+        } else {
+          browser.theme.reset().then(() => {
+            browser.test.sendMessage("theme-reset");
+          });
+        }
+      });
+    },
+  });
+
+  let defaultStyle = window.getComputedStyle(window.document.documentElement);
+  await extension.startup();
+
+  extension.sendMessage("update-theme", {
+    "images": {
+      "headerURL": BACKGROUND_1,
+    },
+    "colors": {
+      "accentcolor": ACCENT_COLOR_1,
+      "textcolor": TEXT_COLOR_1,
+    },
+  });
+
+  await extension.awaitMessage("theme-updated");
+
+  validateTheme(BACKGROUND_1, ACCENT_COLOR_1, TEXT_COLOR_1, true);
+
+  extension.sendMessage("update-theme", {
+    "images": {
+      "headerURL": BACKGROUND_2,
+    },
+    "colors": {
+      "accentcolor": ACCENT_COLOR_2,
+      "textcolor": TEXT_COLOR_2,
+    },
+  });
+
+  await extension.awaitMessage("theme-updated");
+
+  validateTheme(BACKGROUND_2, ACCENT_COLOR_2, TEXT_COLOR_2, true);
+
+  extension.sendMessage("reset-theme");
+
+  await extension.awaitMessage("theme-reset");
+
+  let {backgroundImage, backgroundColor, color} = defaultStyle;
+  validateTheme(backgroundImage, backgroundColor, color, false);
+
+  await extension.unload();
+
+  let docEl = window.document.documentElement;
+  Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
+});

toolkit/components/extensions/test/xpcshell/test_ext_schemas.js

@@ -217,6 +217,7 @@ let json = [
              url: {type: "string", "format": "url", "optional": true},
              relativeUrl: {type: "string", "format": "relativeUrl", "optional": true},
              strictRelativeUrl: {type: "string", "format": "strictRelativeUrl", "optional": true},
+             imageDataOrStrictRelativeUrl: {type: "string", "format": "imageDataOrStrictRelativeUrl", "optional": true},
            },
          },
        ],
@@ -628,6 +629,7 @@ add_task(async function() {
 
   root.testing.format({hostname: "foo"});
   verify("call", "testing", "format", [{hostname: "foo",
+                                        imageDataOrStrictRelativeUrl: null,
                                         relativeUrl: null,
                                         strictRelativeUrl: null,
                                         url: null}]);
@@ -642,6 +644,7 @@ add_task(async function() {
   root.testing.format({url: "http://foo/bar",
                        relativeUrl: "http://foo/bar"});
   verify("call", "testing", "format", [{hostname: null,
+                                        imageDataOrStrictRelativeUrl: null,
                                         relativeUrl: "http://foo/bar",
                                         strictRelativeUrl: null,
                                         url: "http://foo/bar"}]);
@@ -649,11 +652,37 @@ add_task(async function() {
 
   root.testing.format({relativeUrl: "foo.html", strictRelativeUrl: "foo.html"});
   verify("call", "testing", "format", [{hostname: null,
+                                        imageDataOrStrictRelativeUrl: null,
                                         relativeUrl: `${wrapper.url}foo.html`,
                                         strictRelativeUrl: `${wrapper.url}foo.html`,
                                         url: null}]);
   tallied = null;
 
+  root.testing.format({imageDataOrStrictRelativeUrl: "data:image/png;base64,A"});
+  verify("call", "testing", "format", [{hostname: null,
+                                        imageDataOrStrictRelativeUrl: "data:image/png;base64,A",
+                                        relativeUrl: null,
+                                        strictRelativeUrl: null,
+                                        url: null}]);
+  tallied = null;
+
+  root.testing.format({imageDataOrStrictRelativeUrl: "data:image/jpeg;base64,A"});
+  verify("call", "testing", "format", [{hostname: null,
+                                        imageDataOrStrictRelativeUrl: "data:image/jpeg;base64,A",
+                                        relativeUrl: null,
+                                        strictRelativeUrl: null,
+                                        url: null}]);
+  tallied = null;
+
+  root.testing.format({imageDataOrStrictRelativeUrl: "foo.html"});
+  verify("call", "testing", "format", [{hostname: null,
+                                        imageDataOrStrictRelativeUrl: `${wrapper.url}foo.html`,
+                                        relativeUrl: null,
+                                        strictRelativeUrl: null,
+                                        url: null}]);
+
+  tallied = null;
+
   for (let format of ["url", "relativeUrl"]) {
     Assert.throws(() => root.testing.format({[format]: "chrome://foo/content/"}),
                   /Access denied/,
@@ -666,6 +695,10 @@ add_task(async function() {
                   "should throw for non-relative URL");
   }
 
+  Assert.throws(() => root.testing.format({imageDataOrStrictRelativeUrl: "data:image/svg+xml;utf8,A"}),
+                  /must be a relative or PNG or JPG data:image URL/,
+                  "should throw for non-relative or non PNG/JPG data URL");
+
   const dates = [
     "2016-03-04",
     "2016-03-04T08:00:00Z",