Bug 1306887 - use SourceMap response header in style sheet actor; r?gl draft
authorTom Tromey <tom@tromey.com>
Thu, 29 Jun 2017 10:04:52 -0700
changeset 604851 ec21862d7ea0cc954487d9b355828c4090fabf6a
parent 604850 f9558d302c889045b97c84012256ddd67f944536
child 636308 16ec70007844a26679175f081f9316614d50bbaa
push id67206
push userbmo:ttromey@mozilla.com
push dateThu, 06 Jul 2017 15:05:57 +0000
reviewersgl
bugs1306887
milestone56.0a1
Bug 1306887 - use SourceMap response header in style sheet actor; r?gl If a SourceMap response header was saved on a style sheet, use it in the style sheet actor. MozReview-Commit-ID: GRLCdRCaP5Q
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
devtools/client/inspector/rules/test/doc_sourcemaps2.css
devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^
devtools/client/inspector/rules/test/doc_sourcemaps2.html
devtools/server/actors/stylesheets.js
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -24,16 +24,19 @@ support-files =
   doc_keyframeLineNumbers.html
   doc_media_queries.html
   doc_pseudoelement.html
   doc_ruleLineNumbers.html
   doc_sourcemaps.css
   doc_sourcemaps.css.map
   doc_sourcemaps.html
   doc_sourcemaps.scss
+  doc_sourcemaps2.css
+  doc_sourcemaps2.css^headers^
+  doc_sourcemaps2.html
   doc_style_editor_link.css
   doc_test_image.png
   doc_urls_clickable.css
   doc_urls_clickable.html
   head.js
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/test/head.js
@@ -187,16 +190,17 @@ skip-if = (os == "win" && debug) # bug 9
 [browser_rules_media-queries.js]
 [browser_rules_multiple-properties-duplicates.js]
 [browser_rules_multiple-properties-priority.js]
 [browser_rules_multiple-properties-unfinished_01.js]
 [browser_rules_multiple-properties-unfinished_02.js]
 [browser_rules_multiple_properties_01.js]
 [browser_rules_multiple_properties_02.js]
 [browser_rules_original-source-link.js]
+[browser_rules_original-source-link2.js]
 [browser_rules_pseudo-element_01.js]
 [browser_rules_pseudo-element_02.js]
 [browser_rules_pseudo_lock_options.js]
 [browser_rules_refresh-no-flicker.js]
 [browser_rules_refresh-on-attribute-change_01.js]
 [browser_rules_refresh-on-attribute-change_02.js]
 [browser_rules_refresh-on-style-change.js]
 [browser_rules_search-filter-computed-list_01.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
@@ -0,0 +1,85 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the stylesheet links in the rule view are correct when source maps
+// are involved.
+
+const TESTCASE_URI = URL_ROOT + "doc_sourcemaps2.html";
+const PREF = "devtools.styleeditor.source-maps-enabled";
+const SCSS_LOC = "doc_sourcemaps.scss:4";
+const CSS_LOC = "doc_sourcemaps2.css:1";
+
+add_task(function* () {
+  info("Setting the " + PREF + " pref to true");
+  Services.prefs.setBoolPref(PREF, true);
+
+  yield addTab(TESTCASE_URI);
+  let {toolbox, inspector, view} = yield openRuleView();
+
+  info("Selecting the test node");
+  yield selectNode("div", inspector);
+
+  yield verifyLinkText(SCSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to false");
+  Services.prefs.setBoolPref(PREF, false);
+  yield verifyLinkText(CSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to true again");
+  Services.prefs.setBoolPref(PREF, true);
+
+  yield testClickingLink(toolbox, view);
+  yield checkDisplayedStylesheet(toolbox);
+
+  info("Clearing the " + PREF + " pref");
+  Services.prefs.clearUserPref(PREF);
+});
+
+function* testClickingLink(toolbox, view) {
+  info("Listening for switch to the style editor");
+  let onStyleEditorReady = toolbox.once("styleeditor-ready");
+
+  info("Finding the stylesheet link and clicking it");
+  let link = getRuleViewLinkByIndex(view, 1);
+  link.scrollIntoView();
+  link.click();
+  yield onStyleEditorReady;
+}
+
+function checkDisplayedStylesheet(toolbox) {
+  let def = defer();
+
+  let panel = toolbox.getCurrentPanel();
+  panel.UI.on("editor-selected", (event, editor) => {
+    // The style editor selects the first sheet at first load before
+    // selecting the desired sheet.
+    if (editor.styleSheet.href.endsWith("scss")) {
+      info("Original source editor selected");
+      editor.getSourceEditor().then(editorSelected)
+        .then(def.resolve, def.reject);
+    }
+  });
+
+  return def.promise;
+}
+
+function editorSelected(editor) {
+  let href = editor.styleSheet.href;
+  ok(href.endsWith("doc_sourcemaps.scss"),
+    "selected stylesheet is correct one");
+
+  let {line} = editor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+}
+
+function verifyLinkText(text, view) {
+  info("Verifying that the rule-view stylesheet link is " + text);
+  let label = getRuleViewLinkByIndex(view, 1)
+    .querySelector(".ruleview-rule-source-label");
+  return waitForSuccess(function* () {
+    return label.textContent == text;
+  }, "Link text changed to display correct location: " + text);
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css
@@ -0,0 +1,5 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^
@@ -0,0 +1,1 @@
+X-SourceMap: doc_sourcemaps.css.map
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps2.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
--- a/devtools/server/actors/stylesheets.js
+++ b/devtools/server/actors/stylesheets.js
@@ -617,16 +617,20 @@ var StyleSheetActor = protocol.ActorClas
    * Get the source map url specified in the text of a stylesheet.
    *
    * @param  {string} content
    *         The text of the style sheet.
    * @return {string}
    *         Url of source map.
    */
   _extractSourceMapUrl: function (content) {
+    // If a SourceMap response header was saved on the style sheet, use it.
+    if (this.rawSheet.sourceMapURL) {
+      return this.rawSheet.sourceMapURL;
+    }
     let matches = /sourceMappingURL\=([^\s\*]*)/.exec(content);
     if (matches) {
       return matches[1];
     }
     return null;
   },
 
   /**