Bug 1014223 - Use unique identifier for <style> elements; r=harth

browser/devtools/commandline/test/browser_cmd_csscoverage_oneshot.js

@@ -25,31 +25,44 @@ let test = asyncTest(function*() {
   let running = yield usage._testOnly_isRunning();
   ok(!running, "csscoverage not is running");
 
+  // Pages visited
+  let expectedVisited = [ PAGE_3 ];
+  let actualVisited = yield usage._testOnly_visitedPages();
+  isEqualJson(actualVisited, expectedVisited, 'Visited');
+
   // Page1
   let expectedPage1 = { reports: [] };
-  let actualPage1 = yield usage.createEditorReport(PAGE_1);
+  let actualPage1 = yield usage.createEditorReport(PAGE_1 + " \u2192 <style> index 0");
   isEqualJson(actualPage1, expectedPage1, 'Page1');
 
   // Page2
   let expectedPage2 = { reports: [] };
-  let actualPage2 = yield usage.createEditorReport(PAGE_2);
+  let actualPage2 = yield usage.createEditorReport(PAGE_2 + " \u2192 <style> index 0");
   isEqualJson(actualPage2, expectedPage2, 'Page2');
 
-  // Page3
+  // Page3a
-  let expectedPage3 = {
+  let expectedPage3a = {
     reports: [
       {
         selectorText: ".page3-test2",
         start: { line: 9, column: 5 },
-      },
+      }
+    ]
+  };
+  let actualPage3a = yield usage.createEditorReport(PAGE_3 + " \u2192 <style> index 0");
+  isEqualJson(actualPage3a, expectedPage3a, 'Page3a');
+
+  // Page3b
+  let expectedPage3b = {
+    reports: [
       {
         selectorText: ".page3-test3",
         start: { line: 3, column: 5 },
       }
     ]
   };
-  let actualPage3 = yield usage.createEditorReport(PAGE_3);
+  let actualPage3b = yield usage.createEditorReport(PAGE_3 + " \u2192 <style> index 1");
-  isEqualJson(actualPage3, expectedPage3, 'Page3');
+  isEqualJson(actualPage3b, expectedPage3b, 'Page3b');
 
   // SheetA
   let expectedSheetA = {

browser/devtools/commandline/test/browser_cmd_csscoverage_startstop.js

@@ -32,31 +32,44 @@ let test = asyncTest(function*() {
   running = yield usage._testOnly_isRunning();
   ok(!running, "csscoverage not is running");
 
+  // Pages visited
+  let expectedVisited = [ '', PAGE_3 ]; // '' is for the initial location
+  let actualVisited = yield usage._testOnly_visitedPages();
+  isEqualJson(actualVisited, expectedVisited, 'Visited');
+
   // Page1
   let expectedPage1 = { reports: [] };
-  let actualPage1 = yield usage.createEditorReport(PAGE_1);
+  let actualPage1 = yield usage.createEditorReport(PAGE_1 + " \u2192 <style> index 0");
   isEqualJson(actualPage1, expectedPage1, 'Page1');
 
   // Page2
   let expectedPage2 = { reports: [] };
-  let actualPage2 = yield usage.createEditorReport(PAGE_2);
+  let actualPage2 = yield usage.createEditorReport(PAGE_2 + " \u2192 <style> index 0");
   isEqualJson(actualPage2, expectedPage2, 'Page2');
 
-  // Page3
+  // Page3a
-  let expectedPage3 = {
+  let expectedPage3a = {
     reports: [
       {
         selectorText: ".page3-test2",
         start: { line: 9, column: 5 },
-      },
+      }
+    ]
+  };
+  let actualPage3a = yield usage.createEditorReport(PAGE_3 + " \u2192 <style> index 0");
+  isEqualJson(actualPage3a, expectedPage3a, 'Page3a');
+
+  // Page3b
+  let expectedPage3b = {
+    reports: [
       {
         selectorText: ".page3-test3",
         start: { line: 3, column: 5 },
       }
     ]
   };
-  let actualPage3 = yield usage.createEditorReport(PAGE_3);
+  let actualPage3b = yield usage.createEditorReport(PAGE_3 + " \u2192 <style> index 1");
-  isEqualJson(actualPage3, expectedPage3, 'Page3');
+  isEqualJson(actualPage3b, expectedPage3b, 'Page3b');
 
   // SheetA
   let expectedSheetA = {

browser/devtools/styleeditor/StyleEditorUI.jsm

@@ -494,7 +494,7 @@ StyleEditorUI.prototype = {
               return;
             }
 
-            let href = editor.styleSheet.href || editor.styleSheet.nodeHref;
+            let href = csscoverage.sheetToUrl(editor.styleSheet);
             usage.createEditorReport(href).then(data => {
               editor.removeAllUnusedRegions();
 

toolkit/devtools/server/actors/csscoverage.js

@@ -6,12 +6,8 @@
 
 const { Cc, Ci, Cu } = require("chrome");
 
-const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
 const Services = require("Services");
 
-const promise = require("resource://gre/modules/Promise.jsm").Promise;
-const { getRuleLocation } = require("devtools/server/actors/stylesheets");
-
 const protocol = require("devtools/server/protocol");
 const { method, custom, RetVal, Arg } = protocol;
 
@@ -21,6 +17,12 @@ loader.lazyGetter(this, "gDevTools", () => {
 loader.lazyGetter(this, "DOMUtils", () => {
   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils)
 });
+loader.lazyGetter(this, "stylesheets", () => {
+  return require("devtools/server/actors/stylesheets");
+});
+loader.lazyGetter(this, "CssLogic", () => {
+  return require("devtools/styleinspector/css-logic").CssLogic;
+});
 
 const CSSRule = Ci.nsIDOMCSSRule;
 
@@ -441,6 +443,14 @@ let UsageReportActor = protocol.ActorClass({
     response: { value: RetVal("boolean") }
   }),
 
+  /**
+   * For testing only. What pages did we visit.
+   */
+  _testOnly_visitedPages: method(function() {
+    return [...this._visitedPages];
+  }, {
+    response: { value: RetVal("array:string") }
+  }),
 });
 
 exports.UsageReportActor = UsageReportActor;
@@ -512,7 +522,7 @@ function getImportedSheets(stylesheet) {
  * @see deconstructRuleId(ruleId)
  */
 function ruleToId(rule) {
-  let loc = getRuleLocation(rule);
+  let loc = stylesheets.getRuleLocation(rule);
   return sheetToUrl(rule.parentStyleSheet) + "|" + loc.line + "|" + loc.column;
 }
 
@@ -669,11 +679,17 @@ exports.SEL_ALL = [
  * Find a URL for a given stylesheet
  */
 const sheetToUrl = exports.sheetToUrl = function(stylesheet) {
+  // For <link> elements
   if (stylesheet.href) {
     return stylesheet.href;
   }
-  if (stylesheet.ownerNode && stylesheet.ownerNode.baseURI) {
+
-    return stylesheet.ownerNode.baseURI;
+  // For <style> elements
+  if (stylesheet.ownerNode) {
+    let document = stylesheet.ownerNode.ownerDocument;
+    let sheets = [...document.querySelectorAll("style")];
+    let index = sheets.indexOf(stylesheet.ownerNode);
+    return getURL(document) + ' → <style> index ' + index;
   }
 
   throw new Error("Unknown sheet source");