wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-10-22 15:17:29 +09:00
Code Issues Projects Releases Packages Wiki Activity

DevTools - inspector - data URL source links and their tooltips are unreadable

Browse source 
https://github.com/MoonchildProductions/moebius/pull/95
This commit is contained in:
janekptacijarabaci 2018-02-28 08:57:48 +01:00 • committed by Roy Tam
commit 4d57ef767e
3 changed files with 44 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

11
devtools/client/inspector/rules/models/rule.js
View file

@ -140,11 +140,18 @@ Rule.prototype = {
line, mediaText}) => { line, mediaText}) => {
let mediaString = mediaText ? " @" + mediaText : ""; let mediaString = mediaText ? " @" + mediaText : "";
let linePart = line > 0 ? (":" + line) : ""; let linePart = line > 0 ? (":" + line) : "";
let decodedHref = href;
if (decodedHref) {
try {
decodedHref = decodeURIComponent(href);
} catch (e) {}
}
let sourceStrings = { let sourceStrings = {
full: (href || CssLogic.l10n("rule.sourceInline")) + linePart + full: (decodedHref || CssLogic.l10n("rule.sourceInline")) + linePart +
mediaString, mediaString,
short: CssLogic.shortSource({href: href}) + linePart + mediaString short: CssLogic.shortSource({href: decodedHref}) + linePart + mediaString
}; };
return sourceStrings; return sourceStrings;

35
devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
View file

@ -10,10 +10,12 @@ thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Unknown sheet source");
// Test the links from the rule-view to the styleeditor // Test the links from the rule-view to the styleeditor
const STYLESHEET_URL = "data:text/css," + encodeURIComponent( const STYLESHEET_DATA_URL_CONTENTS = ["#first {",
["#first {", "color: blue",
"color: blue", "}"].join("\n");
"}"].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_FILE_NAME = "doc_style_editor_link.css";
const EXTERNAL_STYLESHEET_URL = URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME; 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> <style>
div { font-weight: bold; } div { font-weight: bold; }
</style> </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}"> <link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}">
</head> </head>
<body> <body>
@ -178,15 +180,28 @@ function* testDisabledStyleEditor(view, toolbox) {
} }
function testRuleViewLinkLabel(view) { 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 labelElem = link.querySelector(".ruleview-rule-source-label");
let value = labelElem.textContent; let value = labelElem.textContent;
let tooltipText = labelElem.getAttribute("title"); let tooltipText = labelElem.getAttribute("title");
is(value, EXTERNAL_STYLESHEET_FILE_NAME + ":1", is(value, `${STYLESHEET_DATA_URL_CONTENTS}:1`,
"rule view stylesheet display value matches filename and line number"); "Rule view data URL stylesheet display value matches contents");
is(tooltipText, EXTERNAL_STYLESHEET_URL + ":1", is(tooltipText, `${STYLESHEET_DECODED_DATA_URL}:1`,
"rule view stylesheet tooltip text matches the full URI path"); "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) { function testUnselectableRuleViewLink(view, index) {

12
devtools/shared/inspector/css-logic.js
View file

@ -30,6 +30,8 @@
"use strict"; "use strict";
const MAX_DATA_URL_LENGTH = 40;
/** /**
* Provide access to the style information in a page. * Provide access to the style information in a page.
* CssLogic uses the standard DOM API, and the Gecko inIDOMUtils API to access * 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"); 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 // We try, in turn, the filename, filePath, query string, whole thing
let url = {}; let url = {};
try { try {
@ -123,8 +132,7 @@ exports.shortSource = function (sheet) {
return url.query; return url.query;
} }
let dataUrl = sheet.href.match(/^(data:[^,]*),/); return sheet.href;
return dataUrl ? dataUrl[1] : sheet.href;
}; };
const TAB_CHARS = "\t"; const TAB_CHARS = "\t";