Bug 1290056 - Console: filename starting with underscore is incorrectly displayed due to direction: rtl r=bgrins
authorJarda Snajdr <jsnajdr@gmail.com>
Fri, 29 Jul 2016 02:32:00 +0200
changeset 307095 b47bbefc2b9836d0939c0f6c7baa35b2e9b404a4
parent 307094 eb699f0f168058baa0c13f4191b0b8e775906677
child 307096 deb448634afa7a08a8d1cbf9cfc99b50b7b3b1c9
push id20158
push usercbook@mozilla.com
push dateFri, 29 Jul 2016 09:53:29 +0000
treeherderfx-team@deb448634afa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1290056
milestone50.0a1
Bug 1290056 - Console: filename starting with underscore is incorrectly displayed due to direction: rtl r=bgrins
devtools/client/shared/components/frame.js
devtools/client/themes/webconsole.css
--- a/devtools/client/shared/components/frame.js
+++ b/devtools/client/shared/components/frame.js
@@ -209,34 +209,39 @@ module.exports = createClass({
         lineInfo += `:${column}`;
         // Add `data-column` attribute for testing
         attributes["data-column"] = column;
       }
 
       sourceElements.push(dom.span({ className: "frame-link-line" }, lineInfo));
     }
 
+    // Inner el is useful for achieving ellipsis on the left and correct LTR/RTL
+    // ordering. See CSS styles for frame-link-source-[inner] and bug 1290056.
+    let sourceInnerEl = dom.span({ className: "frame-link-source-inner" },
+      sourceElements);
+
     // If source is not a URL (self-hosted, eval, etc.), don't make
     // it an anchor link, as we can't link to it.
     if (isLinkable) {
       sourceEl = dom.a({
         onClick: e => {
           e.preventDefault();
           onClick(this.getSource(frame));
         },
         href: source,
         className: "frame-link-source",
         draggable: false,
         title: l10n.getFormatStr("frame.viewsourceindebugger", tooltip)
-      }, sourceElements);
+      }, sourceInnerEl);
     } else {
       sourceEl = dom.span({
         className: "frame-link-source",
         title: tooltip,
-      }, sourceElements);
+      }, sourceInnerEl);
     }
     elements.push(sourceEl);
 
     if (showHost && host) {
       elements.push(dom.span({ className: "frame-link-host" }, host));
     }
 
     return dom.span(attributes, ...elements);
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -107,22 +107,30 @@ a {
 }
 
 .message-location {
   max-width: 40%;
 }
 
 .stack-trace .frame-link-source,
 .message-location .frame-link-source {
+  /* Makes the file name truncated (and ellipsis shown) on the left side */
   direction: rtl;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.stack-trace .frame-link-source-inner,
+.message-location .frame-link-source-inner {
+  /* Enforce LTR direction for the file name - fixes bug 1290056 */
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
 .stack-trace .frame-link-function-display-name {
   max-width: 50%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .message-flex-body {