Bug 1359028 - added encodeURIComponent and fixed css class typo; r=pbro draft
authorMatteo Ferretti <mferretti@mozilla.com>
Mon, 24 Apr 2017 18:57:57 +0200
changeset 567268 92d2eae03dc91ee237f971aed1aa496f88771c7c
parent 567266 181a89c580fdd3d3b166f0cd26caa9cab96f6167
child 625581 1be4a863106469445dc2adde1993b4bc0fbb86b2
push id55503
push userbmo:zer0@mozilla.com
push dateMon, 24 Apr 2017 17:02:13 +0000
reviewerspbro
bugs1359028, 1353005
milestone55.0a1
Bug 1359028 - added encodeURIComponent and fixed css class typo; r=pbro The patch of bug 1353005 removed by mistake a leading dot in a css class, and the `encodeURIComponent` calls (so the # in the color definition was considered the hash part in the url). Also, it appears autoland rejected the last commit from Bug 1353005, so this patch includes those changes as well. MozReview-Commit-ID: 2aVW3hYHhSr
devtools/server/actors/highlighters/simple-outline.js
devtools/server/actors/highlighters/utils/markup.js
devtools/server/actors/inspector.js
devtools/server/actors/stylesheets.js
devtools/shared/layout/utils.js
--- a/devtools/server/actors/highlighters/simple-outline.js
+++ b/devtools/server/actors/highlighters/simple-outline.js
@@ -1,30 +1,33 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const {
-  installHelperSheet,
   isNodeValid,
   addPseudoClassLock,
   removePseudoClassLock
 } = require("./utils/markup");
 
+const { loadSheet } = require("devtools/shared/layout/utils");
+
 // SimpleOutlineHighlighter's stylesheet
 const HIGHLIGHTED_PSEUDO_CLASS = ":-moz-devtools-highlighted";
-const SIMPLE_OUTLINE_SHEET = `.__fx-devtools-hide-shortcut__ {
-                                visibility: hidden !important
-                              }
-                              ${HIGHLIGHTED_PSEUDO_CLASS} {
-                                outline: 2px dashed #F06!important;
-                                outline-offset: -2px!important
-                              }`;
+const SIMPLE_OUTLINE_SHEET = "data:text/css;charset=utf-8," + encodeURIComponent(`
+  .__fx-devtools-hide-shortcut__ {
+    visibility: hidden !important
+  }
+  ${HIGHLIGHTED_PSEUDO_CLASS} {
+    outline: 2px dashed #F06!important;
+    outline-offset: -2px!important
+  }`);
+
 /**
  * The SimpleOutlineHighlighter is a class that has the same API than the
  * BoxModelHighlighter, but adds a pseudo-class on the target element itself
  * to draw a simple css outline around the element.
  * It is used by the HighlighterActor when canvasframe-based highlighters can't
  * be used. This is the case for XUL windows.
  */
 function SimpleOutlineHighlighter(highlighterEnv) {
@@ -43,17 +46,17 @@ SimpleOutlineHighlighter.prototype = {
   /**
    * Show the highlighter on a given node
    * @param {DOMNode} node
    */
   show: function (node) {
     if (isNodeValid(node) && (!this.currentNode || node !== this.currentNode)) {
       this.hide();
       this.currentNode = node;
-      installHelperSheet(node.ownerGlobal, SIMPLE_OUTLINE_SHEET);
+      loadSheet(node.ownerGlobal, SIMPLE_OUTLINE_SHEET);
       addPseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
     }
     return true;
   },
 
   /**
    * Hide the highlighter, the outline and the infobar.
    */
--- a/devtools/server/actors/highlighters/utils/markup.js
+++ b/devtools/server/actors/highlighters/utils/markup.js
@@ -97,30 +97,16 @@ ClassList.prototype = {
  * @return {Boolean}
  */
 function isXUL(window) {
   return window.document.documentElement.namespaceURI === XUL_NS;
 }
 exports.isXUL = isXUL;
 
 /**
- * Inject a helper stylesheet in the window.
- */
-var installedHelperSheets = new WeakSet();
-
-function installHelperSheet(win, url = STYLESHEET_URI, type = "agent") {
-  if (installedHelperSheets.has(win.document)) {
-    return;
-  }
-  loadSheet(win, url, type);
-  installedHelperSheets.add(win.document);
-}
-exports.installHelperSheet = installHelperSheet;
-
-/**
  * Returns true if a DOM node is "valid", where "valid" means that the node isn't a dead
  * object wrapper, is still attached to a document, and is of a given type.
  * @param {DOMNode} node
  * @param {Number} nodeType Optional, defaults to ELEMENT_NODE
  * @return {Boolean}
  */
 function isNodeValid(node, nodeType = Ci.nsIDOMNode.ELEMENT_NODE) {
   // Is it still alive?
@@ -270,17 +256,17 @@ CanvasFrameAnonymousContentHelper.protot
     if (isXUL(this.highlighterEnv.window)) {
       return;
     }
 
     // For now highlighters.css is injected in content as a ua sheet because
     // <style scoped> doesn't work inside anonymous content (see bug 1086532).
     // If it did, highlighters.css would be injected as an anonymous content
     // node using CanvasFrameAnonymousContentHelper instead.
-    installHelperSheet(this.highlighterEnv.window);
+    loadSheet(this.highlighterEnv.window, STYLESHEET_URI);
 
     let node = this.nodeBuilder();
 
     // It was stated that hidden documents don't accept
     // `insertAnonymousContent` calls yet. That doesn't seems the case anymore,
     // at least on desktop. Therefore, removing the code that was dealing with
     // that scenario, fixes when we're adding anonymous content in a tab that
     // is not the active one (see bug 1260043 and bug 1260044)
--- a/devtools/server/actors/inspector.js
+++ b/devtools/server/actors/inspector.js
@@ -123,26 +123,26 @@ const PSEUDO_SELECTORS = [
   [":empty", 0],
   [":target", 0],
   [":enabled", 0],
   [":disabled", 0],
   [":checked", 1],
   ["::selection", 0]
 ];
 
-var HELPER_SHEET = `data:text/css;charset=utf-8,
+var HELPER_SHEET = "data:text/css;charset=utf-8," + encodeURIComponent(`
   .__fx-devtools-hide-shortcut__ {
     visibility: hidden !important;
   }
 
   :-moz-devtools-highlighted {
     outline: 2px dashed #F06!important;
     outline-offset: -2px !important;
   }
-`;
+`);
 
 const flags = require("devtools/shared/flags");
 
 loader.lazyRequireGetter(this, "DevToolsUtils",
                          "devtools/shared/DevToolsUtils");
 
 loader.lazyRequireGetter(this, "AsyncUtils", "devtools/shared/async-utils");
 
@@ -1859,33 +1859,22 @@ var WalkerActor = protocol.ActorClassWit
       return false;
     }
     DOMUtils.addPseudoClassLock(node.rawNode, pseudo, enabled);
     this._activePseudoClassLocks.add(node);
     this._queuePseudoClassMutation(node);
     return true;
   },
 
-  _installHelperSheet: function (node) {
-    if (!this.installedHelpers) {
-      this.installedHelpers = new WeakSet();
-    }
-    let win = node.rawNode.ownerGlobal;
-    if (!this.installedHelpers.has(win)) {
-      loadSheet(win, HELPER_SHEET, "agent");
-      this.installedHelpers.add(win);
-    }
-  },
-
   hideNode: function (node) {
     if (isNodeDead(node)) {
       return;
     }
 
-    this._installHelperSheet(node);
+    loadSheet(node.rawNode.ownerGlobal, HELPER_SHEET);
     node.rawNode.classList.add(HIDDEN_CLASS);
   },
 
   unhideNode: function (node) {
     if (isNodeDead(node)) {
       return;
     }
 
--- a/devtools/server/actors/stylesheets.js
+++ b/devtools/server/actors/stylesheets.js
@@ -12,17 +12,17 @@ const {Task} = require("devtools/shared/
 const events = require("sdk/event/core");
 const protocol = require("devtools/shared/protocol");
 const {LongStringActor} = require("devtools/server/actors/string");
 const {fetch} = require("devtools/shared/DevToolsUtils");
 const {listenOnce} = require("devtools/shared/async-utils");
 const {originalSourceSpec, mediaRuleSpec, styleSheetSpec,
        styleSheetsSpec} = require("devtools/shared/specs/stylesheets");
 const {SourceMapConsumer} = require("source-map");
-const { installHelperSheet,
+const {
   addPseudoClassLock, removePseudoClassLock } = require("devtools/server/actors/highlighters/utils/markup");
 
 loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/inspector/css-logic"));
 
 XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 });
 
--- a/devtools/shared/layout/utils.js
+++ b/devtools/shared/layout/utils.js
@@ -725,21 +725,21 @@ function getWindowFor(node) {
 /**
  * Synchronously loads a style sheet from `uri` and adds it to the list of
  * additional style sheets of the document.
  * The sheets added takes effect immediately, and only on the document of the
  * `window` given.
  *
  * @param {DOMWindow} window
  * @param {String} url
- * @param {String} [type="author"]
+ * @param {String} [type="agent"]
  */
-function loadSheet(window, url, type = "author") {
+function loadSheet(window, url, type = "agent") {
   if (!(type in SHEET_TYPE)) {
-    type = "author";
+    type = "agent";
   }
 
   let windowUtils = utilsFor(window);
   try {
     windowUtils.loadSheetUsingURIString(url, windowUtils[SHEET_TYPE[type]]);
   } catch (e) {
     // The method fails if the url is already loaded.
   }
@@ -747,21 +747,21 @@ function loadSheet(window, url, type = "
 exports.loadSheet = loadSheet;
 
 /**
  * Remove the document style sheet at `sheetURI` from the list of additional
  * style sheets of the document. The removal takes effect immediately.
  *
  * @param {DOMWindow} window
  * @param {String} url
- * @param {String} [type="author"]
+ * @param {String} [type="agent"]
  */
-function removeSheet(window, url, type = "author") {
+function removeSheet(window, url, type = "agent") {
   if (!(type in SHEET_TYPE)) {
-    type = "author";
+    type = "agent";
   }
 
   let windowUtils = utilsFor(window);
   try {
     windowUtils.removeSheetUsingURIString(url, windowUtils[SHEET_TYPE[type]]);
   } catch (e) {
     // The method fails if the url is already removed.
   }