Bug 1310310 - ruleview stylesheet link using span instead of label;r=jsnajdr

MozReview-Commit-ID: Fl6vKp2GbKV

--HG--
extra : rebase_source : aebbe671eb788c3876c0f3be9dd01b4c297c3c54

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
   );
 }

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);
 }

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");

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;
 }
 
 /**

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");
       });

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;
 }
 
 /**

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;