summaryrefslogtreecommitdiff
path: root/devtools
diff options
context:
space:
mode:
authorjanekptacijarabaci <janekptacijarabaci@seznam.cz>2018-02-28 08:57:48 +0100
committerjanekptacijarabaci <janekptacijarabaci@seznam.cz>2018-02-28 08:57:48 +0100
commitb19e4e2cf0c1537c8c2a56d0b783d38b6b25de7f (patch)
treea68253ebc147c85f8359afb0db9bb0129dc357e6 /devtools
parentf7e146b34388db880d34d4d8082d71f903c6cabe (diff)
downloaduxp-b19e4e2cf0c1537c8c2a56d0b783d38b6b25de7f.tar.gz
DevTools - inspector - data URL source links and their tooltips are unreadable
https://github.com/MoonchildProductions/moebius/pull/95
Diffstat (limited to 'devtools')
-rw-r--r--devtools/client/inspector/rules/models/rule.js11
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_style-editor-link.js35
-rw-r--r--devtools/shared/inspector/css-logic.js12
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";