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

@@ -5,21 +5,24 @@
 "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
@@ -48,7 +51,7 @@ SimpleOutlineHighlighter.prototype = {
     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;

devtools/server/actors/highlighters/utils/markup.js

@@ -101,20 +101,6 @@ function isXUL(window) {
 }
 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.
@@ -275,7 +261,7 @@ CanvasFrameAnonymousContentHelper.prototype = {
     // <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();
 

devtools/server/actors/inspector.js

@@ -128,7 +128,7 @@ const PSEUDO_SELECTORS = [
   ["::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;
   }
@@ -137,7 +137,7 @@ var HELPER_SHEET = `data:text/css;charset=utf-8,
     outline: 2px dashed #F06!important;
     outline-offset: -2px !important;
   }
-`;
+`);
 
 const flags = require("devtools/shared/flags");
 
@@ -1864,23 +1864,12 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
     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);
   },
 

devtools/server/actors/stylesheets.js

@@ -17,7 +17,7 @@ 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"));

devtools/shared/layout/utils.js

@@ -730,11 +730,11 @@ function getWindowFor(node) {
  *
  * @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);
@@ -752,11 +752,11 @@ exports.loadSheet = loadSheet;
  *
  * @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);