Bug 1499755 - Select the right inline stylesheet on rule-view source url click; r=gl
authorPatrick Brosset <pbrosset@mozilla.com>
Thu, 18 Oct 2018 15:15:12 +0000
changeset 490314 3a70a65a75cf9bf30152ebd0e69ccbde3a913f00
parent 490313 26c0053b13cb7ea1cce71210709fc30472f68671
child 490315 a6b4461eadf0622f4d4f6ea1ee8389d1c655b336
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersgl
bugs1499755
milestone64.0a1
Bug 1499755 - Select the right inline stylesheet on rule-view source url click; r=gl The code we had to jump to the style-editor when a rule-view source link is clicked did not make any distinction between multiple inline stylesheets. If you had many of them, they would all have the same url (i.e. the url of the document, because they are inline). And we were matching stylesheets in the style-editor by url, so we would always select the first inline stylesheet. This change makes use of the fact that the style-editor's selectStyleSheet function also accept a StyleSheetFront object. When passing this object, there can be no confusion, because they're all different. Now, I'm only doing this for inlin stylesheets because other stylesheets have unique urls and it's important to preserve the previous logic since source-maps may also be involved. I'm taking this opportunity to re-enable browser_rules_style-editor-link.js which had been disabled a long time ago, and removing a part that just doesn't work anymore at all apparently. Differential Revision: https://phabricator.services.mozilla.com/D9093
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
devtools/client/inspector/rules/views/rule-editor.js
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -263,14 +263,13 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_rules_shapes-toggle_06.js]
 [browser_rules_shapes-toggle_07.js]
 [browser_rules_shorthand-overridden-lists.js]
 [browser_rules_strict-search-filter-computed-list_01.js]
 [browser_rules_strict-search-filter_01.js]
 [browser_rules_strict-search-filter_02.js]
 [browser_rules_strict-search-filter_03.js]
 [browser_rules_style-editor-link.js]
-skip-if = true # Bug 1309759
 [browser_rules_url-click-opens-new-tab.js]
 [browser_rules_urls-clickable.js]
 [browser_rules_user-agent-styles.js]
 [browser_rules_user-agent-styles-uneditable.js]
 [browser_rules_user-property-reset.js]
--- a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
+++ b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
@@ -5,18 +5,17 @@
 "use strict";
 
 // Test the links from the rule-view to the styleeditor
 
 const STYLESHEET_DATA_URL_CONTENTS = ["#first {",
                                       "color: blue",
                                       "}"].join("\n");
 const STYLESHEET_DATA_URL =
-      `data:text/css,${encodeURIComponent(STYLESHEET_DATA_URL_CONTENTS)}`;
-const STYLESHEET_DECODED_DATA_URL = `data:text/css,${STYLESHEET_DATA_URL_CONTENTS}`;
+  `data:text/css,${encodeURIComponent(STYLESHEET_DATA_URL_CONTENTS)}`;
 
 const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";
 const EXTERNAL_STYLESHEET_URL = URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME;
 
 const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(`
   <html>
   <head>
   <title>Rule view style editor link test</title>
@@ -50,38 +49,23 @@ const DOCUMENT_URL = "data:text/html;cha
   </html>
 `);
 
 add_task(async function() {
   await addTab(DOCUMENT_URL);
   const {toolbox, inspector, view, testActor} = await openRuleView();
   await selectNode("div", inspector);
 
-  await testInlineStyle(view);
+  testRuleViewLinkLabel(view);
   await testFirstInlineStyleSheet(view, toolbox, testActor);
   await testSecondInlineStyleSheet(view, toolbox, testActor);
   await testExternalStyleSheet(view, toolbox, testActor);
   await testDisabledStyleEditor(view, toolbox);
 });
 
-async function testInlineStyle(view) {
-  info("Testing inline style");
-
-  const onTab = waitForTab();
-  info("Clicking on the first link in the rule-view");
-  clickLinkByIndex(view, 0);
-
-  const tab = await onTab;
-
-  const tabURI = tab.linkedBrowser.documentURI.spec;
-  ok(tabURI.startsWith("view-source:"), "View source tab is open");
-  info("Closing tab");
-  gBrowser.removeTab(tab);
-}
-
 async function testFirstInlineStyleSheet(view, toolbox, testActor) {
   info("Testing inline stylesheet");
 
   info("Listening for toolbox switch to the styleeditor");
   const onSwitch = waitForStyleEditor(toolbox);
 
   info("Clicking an inline stylesheet");
   clickLinkByIndex(view, 4);
@@ -98,17 +82,16 @@ async function testSecondInlineStyleShee
   info("Waiting for the stylesheet editor to be selected");
   const panel = toolbox.getCurrentPanel();
   const onSelected = panel.UI.once("editor-selected");
 
   info("Switching back to the inspector panel in the toolbox");
   await toolbox.selectTool("inspector");
 
   info("Clicking on second inline stylesheet link");
-  testRuleViewLinkLabel(view);
   clickLinkByIndex(view, 3);
   const editor = await onSelected;
 
   is(toolbox.currentToolId, "styleeditor",
     "The style editor is selected again");
   await validateStyleEditorSheet(editor, 1, testActor);
 }
 
@@ -118,35 +101,34 @@ async function testExternalStyleSheet(vi
   info("Waiting for the stylesheet editor to be selected");
   const panel = toolbox.getCurrentPanel();
   const onSelected = panel.UI.once("editor-selected");
 
   info("Switching back to the inspector panel in the toolbox");
   await toolbox.selectTool("inspector");
 
   info("Clicking on an external stylesheet link");
-  testRuleViewLinkLabel(view);
   clickLinkByIndex(view, 1);
   const editor = await onSelected;
 
   is(toolbox.currentToolId, "styleeditor",
     "The style editor is selected again");
   await validateStyleEditorSheet(editor, 2, testActor);
 }
 
 async function validateStyleEditorSheet(editor, expectedSheetIndex, testActor) {
   info("validating style editor stylesheet");
   is(editor.styleSheet.styleSheetIndex, expectedSheetIndex,
      "loaded stylesheet index matches document stylesheet");
 
   const href = editor.styleSheet.href || editor.styleSheet.nodeHref;
 
   const expectedHref = await testActor.eval(
-    `content.document.styleSheets[${expectedSheetIndex}].href ||
-     content.document.location.href`);
+    `document.styleSheets[${expectedSheetIndex}].href ||
+     document.location.href`);
 
   is(href, expectedHref, "loaded stylesheet href matches document stylesheet");
 }
 
 async function testDisabledStyleEditor(view, toolbox) {
   info("Testing with the style editor disabled");
 
   info("Switching to the inspector panel in the toolbox");
@@ -178,19 +160,19 @@ async function testDisabledStyleEditor(v
 function testRuleViewLinkLabel(view) {
   info("Checking the data URL link label");
 
   let link = getRuleViewLinkByIndex(view, 1);
   let labelElem = link.querySelector(".ruleview-rule-source-label");
   let value = labelElem.textContent;
   let tooltipText = labelElem.getAttribute("title");
 
-  is(value, `${STYLESHEET_DATA_URL_CONTENTS}:1`,
+  is(value, encodeURIComponent(STYLESHEET_DATA_URL_CONTENTS) + ":1",
     "Rule view data URL stylesheet display value matches contents");
-  is(tooltipText, `${STYLESHEET_DECODED_DATA_URL}:1`,
+  is(tooltipText, STYLESHEET_DATA_URL + ":1",
     "Rule view data URL stylesheet tooltip text matches the full URI path");
 
   info("Checking the external link label");
   link = getRuleViewLinkByIndex(view, 2);
   labelElem = link.querySelector(".ruleview-rule-source-label");
   value = labelElem.textContent;
   tooltipText = labelElem.getAttribute("title");
 
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -278,17 +278,22 @@ RuleEditor.prototype = {
     if (this.source.hasAttribute("unselectable") || !this._currentLocation) {
       return;
     }
 
     const target = this.ruleView.inspector.target;
     if (Tools.styleEditor.isTargetSupported(target)) {
       gDevTools.showToolbox(target, "styleeditor").then(toolbox => {
         const {url, line, column} = this._currentLocation;
-        toolbox.getCurrentPanel().selectStyleSheet(url, line, column);
+
+        if (!this.rule.sheet.href && this.rule.sheet.nodeHref) {
+          toolbox.getCurrentPanel().selectStyleSheet(this.rule.sheet, line, column);
+        } else {
+          toolbox.getCurrentPanel().selectStyleSheet(url, line, column);
+        }
       });
     }
   },
 
   /**
    * Update the text of the source link to reflect whether we're showing
    * original sources or not.  This is a callback for
    * SourceMapURLService.subscribe, which see.