diff options
| -rw-r--r-- | devtools/client/inspector/rules/models/rule.js | 11 | ||||
| -rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_style-editor-link.js | 35 | ||||
| -rw-r--r-- | devtools/shared/inspector/css-logic.js | 12 |
3 files changed, 44 insertions, 14 deletions
diff --git a/devtools/client/inspector/rules/models/rule.js b/devtools/client/inspector/rules/models/rule.js index 1a3fa057ad..4c978cb58e 100644 --- a/devtools/client/inspector/rules/models/rule.js +++ b/devtools/client/inspector/rules/models/rule.js @@ -140,11 +140,18 @@ Rule.prototype = { line, mediaText}) => { let mediaString = mediaText ? " @" + mediaText : ""; let linePart = line > 0 ? (":" + line) : ""; + let decodedHref = href; + + if (decodedHref) { + try { + decodedHref = decodeURIComponent(href); + } catch (e) {} + } let sourceStrings = { - full: (href || CssLogic.l10n("rule.sourceInline")) + linePart + + full: (decodedHref || CssLogic.l10n("rule.sourceInline")) + linePart + mediaString, - short: CssLogic.shortSource({href: href}) + linePart + mediaString + short: CssLogic.shortSource({href: decodedHref}) + linePart + mediaString }; return sourceStrings; diff --git a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js index 927deb8ce3..6a4fd1d66e 100644 --- a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js +++ b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js @@ -10,10 +10,12 @@ thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Unknown sheet source"); // Test the links from the rule-view to the styleeditor -const STYLESHEET_URL = "data:text/css," + encodeURIComponent( - ["#first {", - "color: blue", - "}"].join("\n")); +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}`; const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css"; const EXTERNAL_STYLESHEET_URL = URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME; @@ -31,7 +33,7 @@ const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(` <style> div { font-weight: bold; } </style> - <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}"> + <link rel="stylesheet" type="text/css" href="${STYLESHEET_DATA_URL}"> <link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}"> </head> <body> @@ -178,15 +180,28 @@ function* testDisabledStyleEditor(view, toolbox) { } function testRuleViewLinkLabel(view) { - let link = getRuleViewLinkByIndex(view, 2); + 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, EXTERNAL_STYLESHEET_FILE_NAME + ":1", - "rule view stylesheet display value matches filename and line number"); - is(tooltipText, EXTERNAL_STYLESHEET_URL + ":1", - "rule view stylesheet tooltip text matches the full URI path"); + is(value, `${STYLESHEET_DATA_URL_CONTENTS}:1`, + "Rule view data URL stylesheet display value matches contents"); + is(tooltipText, `${STYLESHEET_DECODED_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"); + + is(value, `${EXTERNAL_STYLESHEET_FILE_NAME}:1`, + "Rule view external stylesheet display value matches filename and line number"); + is(tooltipText, `${EXTERNAL_STYLESHEET_URL}:1`, + "Rule view external stylesheet tooltip text matches the full URI path"); } function testUnselectableRuleViewLink(view, index) { diff --git a/devtools/shared/inspector/css-logic.js b/devtools/shared/inspector/css-logic.js index c8cdd2fdb6..901b7a1896 100644 --- a/devtools/shared/inspector/css-logic.js +++ b/devtools/shared/inspector/css-logic.js @@ -30,6 +30,8 @@ "use strict"; +const MAX_DATA_URL_LENGTH = 40; + /** * Provide access to the style information in a page. * CssLogic uses the standard DOM API, and the Gecko inIDOMUtils API to access @@ -103,6 +105,13 @@ exports.shortSource = function (sheet) { return exports.l10n("rule.sourceInline"); } + // If the sheet is a data URL, return a trimmed version of it. + let dataUrl = sheet.href.trim().match(/^data:.*?,((?:.|\r|\n)*)$/); + if (dataUrl) { + return dataUrl[1].length > MAX_DATA_URL_LENGTH ? + `${dataUrl[1].substr(0, MAX_DATA_URL_LENGTH - 1)}…` : dataUrl[1]; + } + // We try, in turn, the filename, filePath, query string, whole thing let url = {}; try { @@ -123,8 +132,7 @@ exports.shortSource = function (sheet) { return url.query; } - let dataUrl = sheet.href.match(/^(data:[^,]*),/); - return dataUrl ? dataUrl[1] : sheet.href; + return sheet.href; }; const TAB_CHARS = "\t"; |