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
--- 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;
},
/**