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 347249 b47bbefc2b9836d0939c0f6c7baa35b2e9b404a4
parent 347248 eb699f0f168058baa0c13f4191b0b8e775906677
child 347250 deb448634afa7a08a8d1cbf9cfc99b50b7b3b1c9
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1290056
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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 {