diff options
| author | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2017-08-23 13:49:48 +0200 |
|---|---|---|
| committer | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2017-08-23 13:49:48 +0200 |
| commit | e2578b58a889d3b17a29fec5f3de96ccb03d2fe8 (patch) | |
| tree | f53ea55900dfa9431cf9d9249b18d1aa4d9e26e3 /toolkit | |
| parent | d8c365d1cc51a32bd681b11d9a0a0f959b1982fc (diff) | |
| download | palemoon-gre-e2578b58a889d3b17a29fec5f3de96ccb03d2fe8.tar.gz | |
[minor fix] DevTools - inspector - data URL source links and their tooltips are unreadable
Diffstat (limited to 'toolkit')
3 files changed, 45 insertions, 14 deletions
diff --git a/toolkit/devtools/styleinspector/css-logic.js b/toolkit/devtools/styleinspector/css-logic.js index e3a740616..1f0cfeeb8 100644 --- a/toolkit/devtools/styleinspector/css-logic.js +++ b/toolkit/devtools/styleinspector/css-logic.js @@ -42,6 +42,8 @@ const { Cc, Ci, Cu } = require("chrome"); const Services = require("Services"); const DevToolsUtils = require("devtools/toolkit/DevToolsUtils"); +const MAX_DATA_URL_LENGTH = 40; + const RX_UNIVERSAL_SELECTOR = /\s*\*\s*/g; const RX_NOT = /:not\((.*?)\)/g; const RX_PSEUDO_CLASS_OR_ELT = /(:[\w-]+\().*?\)/g; @@ -875,6 +877,13 @@ CssLogic.shortSource = function CssLogic_shortSource(aSheet) return CssLogic.l10n("rule.sourceInline"); } + // If the sheet is a data URL, return a trimmed version of it. + let dataUrl = aSheet.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 { @@ -896,8 +905,7 @@ CssLogic.shortSource = function CssLogic_shortSource(aSheet) return url.query; } - let dataUrl = aSheet.href.match(/^(data:[^,]*),/); - return dataUrl ? dataUrl[1] : aSheet.href; + return aSheet.href; } /** diff --git a/toolkit/devtools/styleinspector/rule-view.js b/toolkit/devtools/styleinspector/rule-view.js index f10889321..039c800b4 100644 --- a/toolkit/devtools/styleinspector/rule-view.js +++ b/toolkit/devtools/styleinspector/rule-view.js @@ -530,9 +530,17 @@ Rule.prototype = { return promise.resolve(this._originalSourceStrings); } return this.domRule.getOriginalLocation().then(({href, line}) => { + let decodedHref = href; + + if (decodedHref) { + try { + decodedHref = decodeURIComponent(href); + } catch (e) {} + } + let sourceStrings = { - full: href + ":" + line, - short: CssLogic.shortSource({href: href}) + ":" + line + full: decodedHref + ":" + line, + short: CssLogic.shortSource({href: decodedHref}) + ":" + line }; this._originalSourceStrings = sourceStrings; diff --git a/toolkit/devtools/styleinspector/test/browser_ruleview_style-editor-link.js b/toolkit/devtools/styleinspector/test/browser_ruleview_style-editor-link.js index 559ba0570..4ea9d42c2 100644 --- a/toolkit/devtools/styleinspector/test/browser_ruleview_style-editor-link.js +++ b/toolkit/devtools/styleinspector/test/browser_ruleview_style-editor-link.js @@ -13,10 +13,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 = TEST_URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME; @@ -34,7 +36,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>', @@ -145,15 +147,28 @@ function validateStyleEditorSheet(editor, expectedSheetIndex) { } function testRuleViewLinkLabel(view) { - let link = getRuleViewLinkByIndex(view, 2); + info("Checking the data URL link label"); + + let link = getRuleViewLinkByIndex(view, 1); let labelElem = link.querySelector(".source-link-label"); let value = labelElem.getAttribute("value"); let tooltipText = labelElem.getAttribute("tooltiptext"); - 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 clickLinkByIndex(view, index) { |