From 5ca294eae0235103208a7e665bf34f064d1ecffd Mon Sep 17 00:00:00 2001
From: Matteo Ferretti <mferretti@mozilla.com>
Date: Mon, 24 Apr 2017 18:57:57 +0200
Subject: [PATCH] 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
---
 .../actors/highlighters/simple-outline.js     | 21 +++++++++++--------
 .../actors/highlighters/utils/markup.js       | 16 +-------------
 devtools/server/actors/inspector.js           | 17 +++------------
 devtools/server/actors/stylesheets.js         |  2 +-
 devtools/shared/layout/utils.js               | 12 +++++------
 5 files changed, 23 insertions(+), 45 deletions(-)

diff --git a/devtools/server/actors/highlighters/simple-outline.js b/devtools/server/actors/highlighters/simple-outline.js
index 52b7cad749e4..3ef064b7306f 100644
--- a/devtools/server/actors/highlighters/simple-outline.js
+++ b/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;
diff --git a/devtools/server/actors/highlighters/utils/markup.js b/devtools/server/actors/highlighters/utils/markup.js
index 997501491741..019d5f2b1634 100644
--- a/devtools/server/actors/highlighters/utils/markup.js
+++ b/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();
 
diff --git a/devtools/server/actors/inspector.js b/devtools/server/actors/inspector.js
index 9d036c586b89..ff4dae1fb12e 100644
--- a/devtools/server/actors/inspector.js
+++ b/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);
   },
 
diff --git a/devtools/server/actors/stylesheets.js b/devtools/server/actors/stylesheets.js
index d40eb408d923..eaa1c14625a5 100644
--- a/devtools/server/actors/stylesheets.js
+++ b/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"));
diff --git a/devtools/shared/layout/utils.js b/devtools/shared/layout/utils.js
index b0503402a306..613d7e84d99e 100644
--- a/devtools/shared/layout/utils.js
+++ b/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);