Bug 1306840 - Fix RTL in DOM panel. r=Honza
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 11 Oct 2016 09:54:29 +0100
changeset 360352 cf0fc7add23cf008568653ce03f4c511506458b1
parent 360229 db14d2fde23699de3ef1782ed41df60f37d90f32
child 360353 8654fba1417d44e510b8f2791f5ccf06c0496744
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-beta@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1306840
milestone52.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 1306840 - Fix RTL in DOM panel. r=Honza MozReview-Commit-ID: Djaa4douEBY
devtools/client/dom/content/components/search-box.css
devtools/client/dom/content/dom-view.css
devtools/client/dom/dom.html
devtools/client/shared/components/reps/function.js
devtools/client/shared/components/tree/label-cell.js
devtools/client/shared/components/tree/tree-view.css
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
devtools/client/themes/light-theme.css
--- a/devtools/client/dom/content/components/search-box.css
+++ b/devtools/client/dom/content/components/search-box.css
@@ -2,9 +2,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /******************************************************************************/
 /* Search Box */
 .dom-searchbox {
   float: right;
-}
\ No newline at end of file
+}
+
+.dom-searchbox:dir(rtl) {
+  float: left;
+}
--- a/devtools/client/dom/content/dom-view.css
+++ b/devtools/client/dom/content/dom-view.css
@@ -27,26 +27,35 @@ body {
 /* TreeView Customization */
 
 .treeTable {
   width: 100%;
 }
 
 /* Space for read only properties icon */
 .treeTable td.treeValueCell {
-  padding-left: 16px;
+  padding-inline-start: 16px;
+}
+
+.treeTable .treeLabel,
+.treeTable td.treeValueCell .objectBox {
+  direction: ltr; /* Don't change the direction of english labels */
 }
 
 /* Read only properties have a padlock icon */
 .treeTable tr:not(.writable) td.treeValueCell {
   background: url("chrome://devtools/skin/images/firebug/read-only.svg") no-repeat;
   background-position: 1px 5px;
   background-size: 10px 10px;
 }
 
+.treeTable tr:not(.writable) td.treeValueCell:dir(rtl) {
+  background-position-x: right 1px;
+}
+
 /* Non-enumerable properties are grayed out */
 .treeTable tr:not(.enumerable) td.treeValueCell {
   opacity: 0.7;
 }
 
 .treeTable > tbody > tr > td {
   border-bottom: 1px solid #EFEFEF;
 }
@@ -83,24 +92,16 @@ body {
 }
 
 .treeTable .ordinalLabel {
   color: SlateBlue;
   font-weight: bold;
 }
 
 /******************************************************************************/
-/* Selection */
-
-.treeTable .treeRow:hover a,
-.treeTable .treeRow:hover span {
-  color: var(--theme-selection-color) !important;
-}
-
-/******************************************************************************/
 /* Theme Dark */
 
 .theme-dark .treeTable > tbody > tr > td {
   border-bottom: none;
 }
 
 .theme-dark body {
   background-color: var(--theme-body-background);
--- a/devtools/client/dom/dom.html
+++ b/devtools/client/dom/dom.html
@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
-<html>
+<html dir="">
 <head>
   <meta charset="utf-8"/>
 
   <link href="resource://devtools/client/dom/content/dom-view.css" rel="stylesheet" />
   <link href="resource://devtools/client/jsonview/css/toolbar.css" rel="stylesheet" />
   <link href="resource://devtools/client/shared/components/tree/tree-view.css" rel="stylesheet" />
   <link href="resource://devtools/client/dom/content/components/search-box.css" rel="stylesheet" />
 
--- a/devtools/client/shared/components/reps/function.js
+++ b/devtools/client/shared/components/reps/function.js
@@ -39,17 +39,19 @@ define(function (require, exports, modul
       let name = grip.userDisplayName || grip.displayName || grip.name || "function";
       return cropString(name + "()", 100);
     },
 
     render: function () {
       let grip = this.props.object;
 
       return (
-        span({className: "objectBox objectBox-function"},
+        // Set dir="ltr" to prevent function parentheses from
+        // appearing in the wrong direction
+        span({dir: "ltr", className: "objectBox objectBox-function"},
           this.getTitle(grip),
           this.summarizeFunction(grip)
         )
       );
     },
   });
 
   // Registration
--- a/devtools/client/shared/components/tree/label-cell.js
+++ b/devtools/client/shared/components/tree/label-cell.js
@@ -28,25 +28,35 @@ define(function (require, exports, modul
 
     render: function () {
       let member = this.props.member;
       let level = member.level || 0;
 
       // Compute indentation dynamically. The deeper the item is
       // inside the hierarchy, the bigger is the left padding.
       let rowStyle = {
-        "paddingLeft": (level * 16) + "px",
+        "paddingInlineStart": (level * 16) + "px",
       };
 
+      let iconClassList = ["treeIcon"];
+      if (member.hasChildren && member.loading) {
+        iconClassList.push("devtools-throbber");
+      } else if (member.hasChildren) {
+        iconClassList.push("theme-twisty");
+      }
+      if (member.open) {
+        iconClassList.push("open");
+      }
+
       return (
         td({
           className: "treeLabelCell",
           key: "default",
           style: rowStyle},
-          span({ className: "treeIcon" }),
+          span({ className: iconClassList.join(" ") }),
           span({
             className: "treeLabel " + member.type + "Label",
             "data-level": level
           }, member.name)
         )
       );
     }
   });
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -13,41 +13,42 @@
   --tree-header-background: #C8D2DC;
   --tree-header-sorted-background: #AAC3DC;
 }
 
 /******************************************************************************/
 /* TreeView Table*/
 
 .treeTable .treeLabelCell {
-  padding: 2px 0 2px 0px;
+  padding: 2px 0;
   vertical-align: top;
   white-space: nowrap;
 }
 
 .treeTable .treeLabelCell::after {
   content: ":";
   color: var(--object-color);
 }
 
 .treeTable .treeValueCell {
-  padding: 2px 0 2px 5px;
+  padding: 2px 0;
+  padding-inline-start: 5px;
   overflow: hidden;
 }
 
 .treeTable .treeLabel {
   cursor: default;
   overflow: hidden;
-  padding-left: 4px;
+  padding-inline-start: 4px;
   white-space: nowrap;
 }
 
 /* No paddding if there is actually no label */
 .treeTable .treeLabel:empty {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
   cursor: pointer;
   color: var(--tree-link-color);
   text-decoration: underline;
 }
 
@@ -55,39 +56,32 @@
 .treeTable .treeRow.hidden {
   display: none;
 }
 
 /******************************************************************************/
 /* Toggle Icon */
 
 .treeTable .treeRow .treeIcon {
-  height: 12px;
+  height: 14px;
   width: 14px;
+  font-size: 10px; /* Set the size of loading spinner */
   display: inline-block;
   vertical-align: bottom;
-  margin-left: 3px;
+  margin-inline-start: 3px;
   padding-top: 1px;
 }
 
 /* All expanded/collapsed styles need to apply on immediate children
   since there might be nested trees within a tree. */
 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
   cursor: pointer;
   background-repeat: no-repeat;
 }
 
-/* Spinner (used for async fetch). Needs to have higher priority than
-   theme toggle icons */
-.treeTable .treeRow.hasChildren.loading > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/firebug/spinner.png) !important;
-  background-position: 2px 1px !important;
-  background-size: 9px 9px !important;
-}
-
 /******************************************************************************/
 /* Header */
 
 .treeTable .treeHeaderRow {
   height: 18px;
 }
 
 .treeTable .treeHeaderCell {
@@ -101,17 +95,19 @@
       radial-gradient(1px 60% at right,
           rgba(0, 0, 0, 0.8) 0%,
           transparent 80%) repeat-x var(--tree-header-background);
   color: var(--theme-body-color);
   white-space: nowrap;
 }
 
 .treeTable .treeHeaderCellBox {
-  padding: 2px 14px 2px 10px;
+  padding: 2px 0;
+  padding-inline-start: 10px;
+  padding-inline-end: 14px;
 }
 
 .treeTable .treeHeaderRow > .treeHeaderCell:first-child > .treeHeaderCellBox {
   padding: 0;
 }
 
 .treeTable .treeHeaderSorted {
   background-color: var(--tree-header-sorted-background);
@@ -132,54 +128,19 @@
       radial-gradient(1px 60% at right,
           rgba(0, 0, 0, 0.8) 0%,
           transparent 80%);
 }
 
 /******************************************************************************/
 /* Themes */
 
-/* Light, Firebug Theme: toggle icon */
-.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon,
-.theme-firebug .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/controls.png);
-  background-size: 56px 28px;
-  background-position: 0 -14px;
-}
-
-.theme-light .treeTable .treeRow.hasChildren.opened > .treeLabelCell > .treeIcon,
-.theme-firebug .treeTable .treeRow.hasChildren.opened > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/controls.png);
-  background-size: 56px 28px;
-  background-position: -14px -14px;
-}
-
-/* Dark Theme: toggle icon */
-.theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/controls.png);
-  background-size: 56px 28px;
-  background-position: -28px -14px;
-}
-
-.theme-dark .treeTable .treeRow.hasChildren.opened > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/controls.png);
-  background-size: 56px 28px;
-  background-position: -42px -14px;
-}
-
-/* Support for retina displays */
-@media (min-resolution: 1.1dppx) {
-  .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png") !important;
-  }
-}
-
 .theme-light .treeTable .treeRow:hover,
 .theme-dark .treeTable .treeRow:hover {
-  background-color: var(--theme-selection-background) !important;
+  background-color: var(--theme-selection-background-semitransparent) !important;
 }
 
 .theme-firebug .treeTable .treeRow:hover {
   background-color: var(--theme-body-background);
 }
 
 .theme-light .treeTable .treeLabel,
 .theme-dark .treeTable .treeLabel {
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -694,16 +694,76 @@ checkbox:-moz-focusring {
   margin-bottom: 0;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
+/* Twisty and checkbox controls */
+.theme-twisty, .theme-checkbox {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-size: 56px 28px;
+}
+
+.theme-twisty {
+  cursor: pointer;
+  background-position: 0 -14px;
+}
+
+.theme-selected ~ .theme-twisty,
+.theme-dark .theme-twisty {
+  background-position: -28px -14px;
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open], .theme-twisty.open {
+  background-position: -14px -14px;
+}
+
+.theme-selected ~ .theme-twisty[open],
+.theme-dark .theme-twisty[open], .theme-dark .theme-twisty.open  {
+  background-position: -42px -14px;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.theme-checkbox {
+  display: inline-block;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background-position: -28px 0;
+}
+
+.theme-checkbox[checked] {
+  background-position: -42px 0;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .theme-twisty, .theme-checkbox {
+    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+  }
+}
+
 /* Throbbers */
 .devtools-throbber::before {
   content: "";
   display: inline-block;
   vertical-align: bottom;
   margin-inline-end: 0.5em;
   width: 1em;
   height: 1em;
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -251,66 +251,16 @@ div.CodeMirror span.eval-text {
   background-color: var(--theme-sidebar-background);
 }
 
 .cm-s-markup-view pre {
   line-height: 1.4em;
   min-height: 1.4em;
 }
 
-/* Twisty and checkbox controls */
-.theme-twisty, .theme-checkbox {
-  width: 14px;
-  height: 14px;
-  background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
-  background-size: 56px 28px;
-}
-
-.theme-twisty {
-  cursor: pointer;
-  background-position: -28px -14px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty[open], .theme-twisty.open  {
-  background-position: -42px -14px;
-}
-
-.theme-twisty[invisible] {
-  visibility: hidden;
-}
-
-/* Mirror the twisty for rtl direction */
-.theme-twisty:dir(rtl),
-.theme-twisty:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  padding: 0;
-  outline: none;
-  background-position: -28px 0;
-}
-
-.theme-checkbox[checked] {
-  background-position: -42px 0;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-twisty, .theme-checkbox {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
-  }
-}
-
 /* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
 
 .theme-tooltip-panel .panel-arrowcontent {
   padding: 5px;
   background: rgba(19, 28, 38, .9);
   border-radius: 5px;
   box-shadow: none;
   border: 3px solid #434850;
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -253,76 +253,16 @@ div.CodeMirror span.eval-text {
   background-color: var(--theme-sidebar-background);
 }
 
 .cm-s-markup-view pre {
   line-height: 1.4em;
   min-height: 1.4em;
 }
 
-/* Twisty and checkbox controls */
-
-.theme-twisty, .theme-checkbox {
-  width: 14px;
-  height: 14px;
-  background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
-  background-size: 56px 28px;
-}
-
-.theme-twisty {
-  cursor: pointer;
-  background-position: 0 -14px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty[open], .theme-twisty.open {
-  background-position: -14px -14px;
-}
-
-.theme-twisty[invisible] {
-  visibility: hidden;
-}
-
-/* Use white twisty when next to a selected item in markup view */
-.theme-selected ~ .theme-twisty {
-  background-position: -28px -14px;
-}
-
-.theme-selected ~ .theme-twisty[open] {
-  background-position: -42px -14px;
-}
-
-/* Mirror the twisty for rtl direction */
-.theme-twisty:dir(rtl),
-.theme-twisty:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  padding: 0;
-  outline: none;
-  background-position: 0 0;
-}
-
-.theme-checkbox[checked] {
-  background-position: -14px 0;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-twisty, .theme-checkbox {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
-  }
-}
-
 /* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
 
 .theme-tooltip-panel .panel-arrowcontent {
   padding: 4px;
   background: rgba(255, 255, 255, .9);
   border-radius: 5px;
   box-shadow: none;
   border: 3px solid #d9e1e8;