Bug 1269081 - Only apply Firefox's default styles if the add-on author sets "browser_style" to true in the manifest. r=kmag.

MozReview-Commit-ID: JjH0sCkh1U7

--HG--
extra : rebase_source : 92b126d4acd77bb15bb7c952b82d4dd6156d5c2a

browser/components/extensions/ext-browserAction.js

@@ -38,6 +38,12 @@ function BrowserAction(options, extension) {
     popup: options.default_popup || "",
   };
 
+  this.browserStyle = options.browser_style || false;
+  if (options.browser_style === null) {
+    this.extension.logger.warn("Please specify whether you want browser_style " +
+                               "or not in your browser_action options.");
+  }
+
   this.tabContext = new TabContext(tab => Object.create(this.defaults),
                                    extension);
 
@@ -91,7 +97,7 @@ BrowserAction.prototype = {
         // open a popup.
         if (popupURL) {
           try {
-            new ViewPopup(this.extension, event.target, popupURL);
+            new ViewPopup(this.extension, event.target, popupURL, this.browserStyle);
           } catch (e) {
             Cu.reportError(e);
             event.preventDefault();

browser/components/extensions/ext-pageAction.js

@@ -26,6 +26,12 @@ function PageAction(options, extension) {
     popup: options.default_popup || "",
   };
 
+  this.browserStyle = options.browser_style || false;
+  if (options.browser_style === null) {
+    this.extension.logger.warn("Please specify whether you want browser_style " +
+                               "or not in your page_action options.");
+  }
+
   this.tabContext = new TabContext(tab => Object.create(this.defaults),
                                    extension);
 
@@ -152,7 +158,8 @@ PageAction.prototype = {
     // If it has no popup URL defined, we dispatch a click event, but do not
     // open a popup.
     if (popupURL) {
-      new PanelPopup(this.extension, this.getButton(window), popupURL);
+      new PanelPopup(this.extension, this.getButton(window), popupURL,
+                     this.browserStyle);
     } else {
       this.emit("click", tab);
     }

browser/components/extensions/ext-utils.js

@@ -159,7 +159,7 @@ XPCOMUtils.defineLazyGetter(global, "stylesheets", () => {
 });
 
 class BasePopup {
-  constructor(extension, viewNode, popupURL) {
+  constructor(extension, viewNode, popupURL, browserStyle) {
     let popupURI = Services.io.newURI(popupURL, null, extension.baseURI);
 
     Services.scriptSecurityManager.checkLoadURIWithPrincipal(
@@ -169,6 +169,7 @@ class BasePopup {
     this.extension = extension;
     this.popupURI = popupURI;
     this.viewNode = viewNode;
+    this.browserStyle = browserStyle;
     this.window = viewNode.ownerDocument.defaultView;
 
     this.contentReady = new Promise(resolve => {
@@ -212,7 +213,7 @@ class BasePopup {
         break;
 
       case "DOMWindowCreated":
-        if (event.target === this.browser.contentDocument) {
+        if (this.browserStyle && event.target === this.browser.contentDocument) {
           let winUtils = this.browser.contentWindow
               .QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils);
           for (let stylesheet of global.stylesheets) {
@@ -330,7 +331,7 @@ class BasePopup {
 }
 
 global.PanelPopup = class PanelPopup extends BasePopup {
-  constructor(extension, imageNode, popupURL) {
+  constructor(extension, imageNode, popupURL, browserStyle) {
     let document = imageNode.ownerDocument;
 
     let panel = document.createElement("panel");
@@ -341,7 +342,7 @@ global.PanelPopup = class PanelPopup extends BasePopup {
 
     document.getElementById("mainPopupSet").appendChild(panel);
 
-    super(extension, panel, popupURL);
+    super(extension, panel, popupURL, browserStyle);
 
     this.contentReady.then(() => {
       panel.openPopup(imageNode, "bottomcenter topright", 0, 0, false, false);

browser/components/extensions/extension.css

@@ -138,11 +138,58 @@ button.default.focused {
 /* Radio Buttons */
 .radioItem {
   margin-bottom: 6px;
+  text-align: left;
+}
+
+input[type="radio"] {
+  display: none;
 }
 
 input[type="radio"] + label {
   -moz-user-select: none;
-  text-align: left;
+}
+
+input[type="radio"] + label::before {
+  background-color: #fff;
+  background-position: center;
+  border: 1px solid #b1b1b1;
+  border-radius: 50%;
+  content: "";
+  display: inline-block;
+  height: 16px;
+  margin-right: 6px;
+  vertical-align: text-top;
+  width: 16px;
+}
+
+input[type="radio"]:hover + label::before,
+.radioItem.hover input[type="radio"]:not(active) + label::before {
+  background-color: #fbfbfb;
+  border-color: #b1b1b1;
+}
+
+input[type="radio"]:hover:active + label::before,
+.radioItem.pressed input[type="radio"]:not(active) + label::before {
+  background-color: #ebebeb;
+  border-color: #858585;
+}
+
+input[type="radio"]:checked + label::before {
+  background-color: #0996f8;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==);
+  border-color: #0670cc;
+}
+
+input[type="radio"]:checked:hover + label::before,
+.radioItem.hover input[type="radio"]:checked:not(active) + label::before {
+  background-color: #0670cc;
+  border-color: #005bab;
+}
+
+input[type="radio"]:checked:hover:active + label::before,
+.radioItem.pressed input[type="radio"]:checked:not(active) + label::before {
+  background-color: #005bab;
+  border-color: #004480;
 }
 
 .radioItem.disabled input[type="radio"] + label,
@@ -152,14 +199,69 @@ input[type="radio"] + label {
   opacity: .5;
 }
 
+.radioItem.focused input[type="radio"] + label::before {
+  border-color: #0996f8;
+  box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
+}
+
+.radioItem.focused input[type="radio"]:checked + label::before {
+  border-color: #fff;
+}
+
 /* Checkboxes */
 .checkboxItem {
   margin-bottom: 6px;
+  text-align: left;
+}
+
+input[type="checkbox"] {
+  display: none;
 }
 
 input[type="checkbox"] + label {
   -moz-user-select: none;
-  text-align: left;
+}
+
+input[type="checkbox"] + label::before {
+  background-color: #fff;
+  background-position: center;
+  border: 1px solid #b1b1b1;
+  content: "";
+  display: inline-block;
+  height: 16px;
+  margin-right: 6px;
+  vertical-align: text-top;
+  width: 16px;
+}
+
+input[type="checkbox"]:hover + label::before,
+.checkboxItem.hover input[type="checkbox"]:not(active) + label::before {
+  background-color: #fbfbfb;
+  border-color: #b1b1b1;
+}
+
+input[type="checkbox"]:hover:active + label::before,
+.checkboxItem.pressed input[type="checkbox"]:not(active) + label::before {
+  background-color: #ebebeb;
+  border-color: #858585;
+}
+
+input[type="checkbox"]:checked + label::before {
+  background-color: #0996f8;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K);
+  border-color: #0670cc;
+}
+
+input[type="checkbox"]:checked:hover + label::before,
+.checkboxItem.hover input[type="checkbox"]:checked:not(active) + label::before {
+  background-color: #0670cc;
+  border-color: #005bab;
+}
+
+input[type="checkbox"]:checked:hover:active + label::before,
+.checkboxItem.pressed input[type="checkbox"]:checked:not(active) + label::before {
+  background-color: #005bab;
+  border-color: #004480;
 }
 
 .checkboxItem.disabled input[type="checkbox"] + label,
@@ -169,6 +271,15 @@ input[type="checkbox"] + label {
   opacity: .5;
 }
 
+.checkboxItem.focused input[type="checkbox"] + label::before {
+  border-color: #0996f8;
+  box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
+}
+
+.checkboxItem.focused input[type="checkbox"]:checked + label::before {
+  border-color: #fff;
+}
+
 /* Expander Button */
 button.expander {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
@@ -354,7 +465,7 @@ textarea:focus:hover {
 
 .panel-formElements-item label {
   flex-shrink: 0;
-  margin: 0 6px;
+  margin-right: 6px;
   text-align: right;
 }
 

browser/components/extensions/schemas/browser_action.json

@@ -27,6 +27,10 @@
                 "format": "relativeUrl",
                 "optional": true,
                 "preprocess": "localize"
+              },
+              "browser_style": {
+                "type": "boolean",
+                "optional": true
               }
             },
             "optional": true

browser/components/extensions/schemas/page_action.json

@@ -27,6 +27,10 @@
                 "format": "relativeUrl",
                 "optional": true,
                 "preprocess": "localize"
+              },
+              "browser_style": {
+                "type": "boolean",
+                "optional": true
               }
             },
             "optional": true

browser/components/extensions/test/browser/browser_ext_browserAction_popup.js

@@ -12,6 +12,7 @@ function* testInArea(area) {
       },
       "browser_action": {
         "default_popup": "popup-a.html",
+        "browser_style": true,
       },
     },
 
@@ -19,11 +20,9 @@ function* testInArea(area) {
       "popup-a.html": scriptPage("popup-a.js"),
       "popup-a.js": function() {
         window.onload = () => {
-          if (window.getComputedStyle(document.body).backgroundColor == "rgb(252, 252, 252)") {
-            browser.runtime.sendMessage("from-popup-a");
-          } else {
-            browser.runtime.sendMessage("popup-a-failed-style-check");
-          }
+          let background = window.getComputedStyle(document.body).backgroundColor;
+          browser.test.assertEq("rgb(252, 252, 252)", background);
+          browser.runtime.sendMessage("from-popup-a");
         };
         browser.runtime.onMessage.addListener(msg => {
           if (msg == "close-popup") {
@@ -80,8 +79,6 @@ function* testInArea(area) {
         browser.runtime.onMessage.addListener(msg => {
           if (msg == "close-popup") {
             return;
-          } else if (msg == "popup-a-failed-style-check") {
-            browser.test.fail("popup failed style check");
           } else if (expect.popup) {
             browser.test.assertEq(msg, `from-popup-${expect.popup}`,
                                   "expected popup opened");

browser/components/extensions/test/browser/browser_ext_pageAction_popup.js

@@ -18,7 +18,11 @@ add_task(function* testPageActionPopup() {
     files: {
       "popup-a.html": scriptPage("popup-a.js"),
       "popup-a.js": function() {
-        browser.runtime.sendMessage("from-popup-a");
+        window.onload = () => {
+          let background = window.getComputedStyle(document.body).backgroundColor;
+          browser.test.assertEq("transparent", background);
+          browser.runtime.sendMessage("from-popup-a");
+        };
         browser.runtime.onMessage.addListener(msg => {
           if (msg == "close-popup") {
             window.close();