Bug 1574520 - Clean up Inspector breadcrumbs for RTL r=gl

This remove reliance on isRtl (and thus hardcodes right and left directions) and removed redundant RTL/LTR CSS.

Differential Revision: https://phabricator.services.mozilla.com/D42324

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/breadcrumbs.js

@@ -70,13 +70,6 @@ ArrowScrollBox.prototype = {
     this.inner.addEventListener("overflow", this.onOverflow);
   },
 
-  /**
-   * Determine whether the current text directionality is RTL
-   */
-  isRtl: function() {
-    return this.doc.dir === "rtl";
-  },
-
   /**
    * Scroll to the specified element using the current scroll behavior
    * @param {Element} element element to scroll
@@ -153,8 +146,7 @@ ArrowScrollBox.prototype = {
         return;
       }
 
-      const block = this.isRtl() ? "end" : "start";
+      this.scrollToElement(element, "start");
-      this.scrollToElement(element, block);
     };
 
     this.clickOrHold(scrollToStart);
@@ -170,8 +162,7 @@ ArrowScrollBox.prototype = {
         return;
       }
 
-      const block = this.isRtl() ? "start" : "end";
+      this.scrollToElement(element, "end");
-      this.scrollToElement(element, block);
     };
 
     this.clickOrHold(scrollToEnd);
@@ -250,9 +241,7 @@ ArrowScrollBox.prototype = {
   getFirstInvisibleElement: function() {
     const elementsList = Array.from(this.inner.childNodes).reverse();
 
-    const predicate = this.isRtl()
+    const predicate = this.elementLeftOfContainer;
-      ? this.elementRightOfContainer
-      : this.elementLeftOfContainer;
     return this.findFirstWithBounds(elementsList, predicate);
   },
 
@@ -261,9 +250,7 @@ ArrowScrollBox.prototype = {
    * non or partly visible element in the scroll box
    */
   getLastInvisibleElement: function() {
-    const predicate = this.isRtl()
+    const predicate = this.elementRightOfContainer;
-      ? this.elementLeftOfContainer
-      : this.elementRightOfContainer;
     return this.findFirstWithBounds(this.inner.childNodes, predicate);
   },
 

devtools/client/themes/breadcrumbs.css

@@ -15,11 +15,16 @@
 /* Inspector HTMLBreadcrumbs */
 
 .breadcrumbs-widget-container {
-  margin-inline-end: 3px;
+  margin-right: 3px;
   max-height: 24px; /* Set max-height for proper sizing on linux */
   height: 24px; /* Set height to prevent starting small waiting for content */
 }
 
+.breadcrumbs-widget-container:-moz-locale-dir(rtl) {
+  margin-right: 0;
+  margin-left: 3px;
+}
+
 .scrollbutton-up,
 .scrollbutton-down {
   -moz-appearance: none;
@@ -59,19 +64,13 @@
 }
 
 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
-.scrollbutton-up:-moz-locale-dir(ltr):not(:dir(rtl)),
+.scrollbutton-up {
-.scrollbutton-up:dir(ltr),
-.scrollbutton-down:-moz-locale-dir(rtl),
-.scrollbutton-down:dir(rtl) {
   border-right: solid 1px rgba(255, 255, 255, .1);
   border-left: solid 1px transparent;
   box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
 }
 
-.scrollbutton-down:-moz-locale-dir(ltr):not(:dir(rtl)),
+.scrollbutton-down {
-.scrollbutton-down:dir(ltr),
-.scrollbutton-up:-moz-locale-dir(rtl),
-.scrollbutton-up:dir(rtl) {
   border-right: solid 1px transparent;
   border-left: solid 1px rgba(255, 255, 255, .1);
   box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
@@ -83,10 +82,7 @@
   border-color: transparent;
 }
 
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+.scrollbutton-down > .toolbarbutton-icon {
-.scrollbutton-up > .toolbarbutton-icon:dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr):not(:dir(rtl)),
-.scrollbutton-down > .toolbarbutton-icon:dir(ltr) {
   transform: scaleX(-1);
 }
 

devtools/client/themes/inspector.css

@@ -120,6 +120,7 @@ window {
 #inspector-breadcrumbs-toolbar,
 #inspector-breadcrumbs-toolbar * {
   box-sizing: border-box;
+  direction: ltr;
 }
 
 #inspector-breadcrumbs {
@@ -146,7 +147,6 @@ window {
   flex: 1;
   display: flex;
   overflow: hidden;
-  direction: ltr;
 }
 
 #inspector-breadcrumbs .breadcrumbs-widget-item {