diff --git a/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js b/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js index 391ce811cd8b..2477222ba571 100644 --- a/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js +++ b/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js @@ -35,9 +35,10 @@ add_task(function* () { function verifyLinkText(view, text) { info("Verifying that the rule-view stylesheet link is " + text); - let label = getRuleViewLinkByIndex(view, 1).querySelector("label"); + let label = getRuleViewLinkByIndex(view, 1) + .querySelector(".ruleview-rule-source-label"); return waitForSuccess( - () => label.getAttribute("value") == text, + () => label.textContent == text, "Link text changed to display correct location: " + text ); } diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js index ad8541643e89..09dad9a86d7e 100644 --- a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js +++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js @@ -77,8 +77,9 @@ function editorSelected(editor) { function verifyLinkText(text, view) { info("Verifying that the rule-view stylesheet link is " + text); - let label = getRuleViewLinkByIndex(view, 1).querySelector("label"); + let label = getRuleViewLinkByIndex(view, 1) + .querySelector(".ruleview-rule-source-label"); return waitForSuccess(function* () { - return label.getAttribute("value") == text; + return label.textContent == text; }, "Link text changed to display correct location: " + text); } 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 d990f3ecd866..927deb8ce3c6 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 @@ -180,8 +180,8 @@ function* testDisabledStyleEditor(view, toolbox) { function testRuleViewLinkLabel(view) { let link = getRuleViewLinkByIndex(view, 2); let labelElem = link.querySelector(".ruleview-rule-source-label"); - let value = labelElem.getAttribute("value"); - let tooltipText = labelElem.getAttribute("tooltiptext"); + 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"); diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js index 1795188ac83a..ff3b003aba14 100644 --- a/devtools/client/inspector/rules/test/head.js +++ b/devtools/client/inspector/rules/test/head.js @@ -476,7 +476,7 @@ function getRuleViewLinkByIndex(view, index) { */ function getRuleViewLinkTextByIndex(view, index) { let link = getRuleViewLinkByIndex(view, index); - return link.querySelector(".ruleview-rule-source-label").value; + return link.querySelector(".ruleview-rule-source-label").textContent; } /** diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js index e12794434ac0..5c530d72edc3 100644 --- a/devtools/client/inspector/rules/views/rule-editor.js +++ b/devtools/client/inspector/rules/views/rule-editor.js @@ -33,9 +33,6 @@ const STYLE_INSPECTOR_PROPERTIES = "devtools-shared/locale/styleinspector.proper const {LocalizationHelper} = require("devtools/shared/l10n"); const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES); -const HTML_NS = "http://www.w3.org/1999/xhtml"; -const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; - /** * RuleEditor is responsible for the following: * Owns a Rule object and creates a list of TextPropertyEditors @@ -98,7 +95,7 @@ RuleEditor.prototype = { }, _create: function () { - this.element = this.doc.createElementNS(HTML_NS, "div"); + this.element = this.doc.createElement("div"); this.element.className = "ruleview-rule theme-separator"; this.element.setAttribute("uneditable", !this.isEditable); this.element.setAttribute("unmatched", this.rule.isUnmatched); @@ -119,8 +116,7 @@ RuleEditor.prototype = { let rule = this.rule.domRule; this.ruleView.emit("ruleview-linked-clicked", rule); }.bind(this)); - let sourceLabel = this.doc.createElementNS(XUL_NS, "label"); - sourceLabel.setAttribute("crop", "center"); + let sourceLabel = this.doc.createElement("span"); sourceLabel.classList.add("ruleview-rule-source-label"); this.source.appendChild(sourceLabel); @@ -229,7 +225,7 @@ RuleEditor.prototype = { this.rule.sheet.href : title; let sourceLine = this.rule.ruleLine > 0 ? ":" + this.rule.ruleLine : ""; - sourceLabel.setAttribute("tooltiptext", sourceHref + sourceLine); + sourceLabel.setAttribute("title", sourceHref + sourceLine); if (this.toolbox.isToolRegistered("styleeditor")) { this.source.removeAttribute("unselectable"); @@ -239,18 +235,18 @@ RuleEditor.prototype = { if (this.rule.isSystem) { let uaLabel = STYLE_INSPECTOR_L10N.getStr("rule.userAgentStyles"); - sourceLabel.setAttribute("value", uaLabel + " " + title); + sourceLabel.textContent = uaLabel + " " + title; // Special case about:PreferenceStyleSheet, as it is generated on the // fly and the URI is not registered with the about: handler. // https://bugzilla.mozilla.org/show_bug.cgi?id=935803#c37 if (sourceHref === "about:PreferenceStyleSheet") { this.source.setAttribute("unselectable", "true"); - sourceLabel.setAttribute("value", uaLabel); - sourceLabel.removeAttribute("tooltiptext"); + sourceLabel.textContent = uaLabel; + sourceLabel.removeAttribute("title"); } } else { - sourceLabel.setAttribute("value", title); + sourceLabel.textContent = title; if (this.rule.ruleLine === -1 && this.rule.domRule.parentStyleSheet) { this.source.setAttribute("unselectable", "true"); } @@ -262,8 +258,8 @@ RuleEditor.prototype = { // Only get the original source link if the right pref is set, if the rule // isn't a system rule and if it isn't an inline rule. this.rule.getOriginalSourceStrings().then((strings) => { - sourceLabel.setAttribute("value", strings.short); - sourceLabel.setAttribute("tooltiptext", strings.full); + sourceLabel.textContent = strings.short; + sourceLabel.setAttribute("title", strings.full); }, e => console.error(e)).then(() => { this.emit("source-link-updated"); }); diff --git a/devtools/client/inspector/shared/test/head.js b/devtools/client/inspector/shared/test/head.js index f634a26ce6c0..0f89cfb44d31 100644 --- a/devtools/client/inspector/shared/test/head.js +++ b/devtools/client/inspector/shared/test/head.js @@ -420,7 +420,7 @@ function getRuleViewLinkByIndex(view, index) { */ function getRuleViewLinkTextByIndex(view, index) { let link = getRuleViewLinkByIndex(view, index); - return link.querySelector(".ruleview-rule-source-label").value; + return link.querySelector(".ruleview-rule-source-label").textContent; } /** diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css index 55f524ce93da..3c01e3ba50e0 100644 --- a/devtools/client/themes/rules.css +++ b/devtools/client/themes/rules.css @@ -141,21 +141,34 @@ .ruleview-rule-source { text-align: end; float: right; + max-width: 100%; + + /* Force RTL direction to crop the source link at the beginning. */ + direction: rtl; + overflow: hidden; + text-overflow: ellipsis; + -moz-user-select: none; margin-bottom: 2px; } -.ruleview-rule-source > label { - cursor: pointer; +.ruleview-rule-source-label { + white-space: nowrap; margin: 0; + cursor: pointer; + + /* Create an LTR embed to avoid special characters being shifted to the start due to the + parent node direction: rtl; */ + direction: ltr; + unicode-bidi: embed } .ruleview-rule-source[unselectable], -.ruleview-rule-source[unselectable] > label { +.ruleview-rule-source[unselectable] > .ruleview-rule-source-label { cursor: default; } -.theme-firebug .ruleview-rule-source label { +.theme-firebug .ruleview-rule-source-label { font-family: var(--proportional-font-family); font-weight: bold; color: #0000FF;