Bug 1309856 - Make Mac twistys in places window and sidebar rtl-friendly. r=Gijs. a=ritu
authorstefanh@inbox.com
Thu, 27 Oct 2016 23:12:17 +0200
changeset 356379 870e0c919cf93aac64fe79c5e5345a89b359dc47
parent 356378 8fb333cd1a16041cdcef16fbd06bfca007334a01
child 356380 5de3d84cb4c1fc8584ae259d04d10f524f2b104f
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-beta@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, ritu
bugs1309856
milestone51.0a2
Bug 1309856 - Make Mac twistys in places window and sidebar rtl-friendly. r=Gijs. a=ritu
browser/themes/osx/places/organizer.css
browser/themes/osx/places/places.css
browser/themes/osx/syncedtabs/sidebar.css
toolkit/themes/osx/global/tree/arrow-disclosure.svg
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -74,16 +74,24 @@
 #placesList > treechildren::-moz-tree-twisty(open) {
   list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
 }
 
 #placesList > treechildren::-moz-tree-twisty(open, selected) {
   list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
 }
 
+#placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
+}
+
+#placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(selected) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+}
+
 @media (-moz-mac-yosemite-theme) {
   #placesList > treechildren::-moz-tree-row(selected) {
     background: @sidebarItemBackgroundYosemite@;
     border-top: none;
     border-bottom: none;
   }
 
   #placesList > treechildren::-moz-tree-row(selected,focus) {
@@ -123,16 +131,24 @@
 
   #placesList > treechildren::-moz-tree-twisty(open, selected) {
     list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
   }
 
   #placesList > treechildren::-moz-tree-twisty(open, selected, focus) {
     list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
   }
+
+  #placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(selected) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
+  }
+
+  #placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(selected, focus) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+  }
 }
 
 #placesToolbar {
   padding: 0 4px 3px;
 }
 
 #placesView {
   border-top: none !important;
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -86,16 +86,24 @@
 .sidebar-placesTreechildren::-moz-tree-twisty(open) {
   list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
 }
 
 .sidebar-placesTreechildren::-moz-tree-twisty(open, selected) {
   list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
 }
 
+.sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
+}
+
+.sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(selected) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+}
+
 @media (-moz-mac-yosemite-theme) {
   .sidebar-placesTreechildren::-moz-tree-row(selected) {
     background: @sidebarItemBackgroundYosemite@;
     border-top: none;
     border-bottom: none;
   }
 
   .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
@@ -135,16 +143,24 @@
 
   .sidebar-placesTreechildren::-moz-tree-twisty(open, selected) {
     list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
   }
 
   .sidebar-placesTreechildren::-moz-tree-twisty(open, selected, focus) {
     list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
   }
+
+  .sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(selected) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
+  }
+
+  .sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(selected, focus) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl")
+  }
 }
 
 #viewButton {
   -moz-appearance: none;
   padding-bottom: 1px;
   padding-inline-start: 5px;
   padding-inline-end: 0px;
   margin: 0;
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -51,16 +51,32 @@ html {
 .item.client.selected:focus .item-twisty-container {
   background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
 }
 
 .item.client.selected.closed:focus .item-twisty-container {
   background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
 }
 
+.item.client .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
+}
+
+.item.client.closed .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
+}
+
+.item.client.selected:focus .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+}
+
+.item.client.selected.closed:focus .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+}
+
 @media (-moz-mac-yosemite-theme) {
   .item.selected > .item-title-container {
     font-weight: 500;
   }
 
   .item.selected > .item-title-container {
     background-image: none;
     background-color: @sidebarItemBackgroundYosemite@;
--- a/toolkit/themes/osx/global/tree/arrow-disclosure.svg
+++ b/toolkit/themes/osx/global/tree/arrow-disclosure.svg
@@ -13,14 +13,16 @@
     }
 
     .icon.white {
       fill: #fff;
     }
   </style>
 
   <polygon id="arrow-disclosure-collapsed" class="icon" points="4,4  12,8.5  4,13" />
+  <polygon id="arrow-disclosure-collapsed-rtl" class="icon" points="4,8.5  12,4  12,13" />
   <polygon id="arrow-disclosure-collapsed-inverted" class="icon white" points="4,4  12,8.5  4,13" />
+  <polygon id="arrow-disclosure-collapsed-inverted-rtl" class="icon white" points="4,8.5  12,4  12,13" />
 
   <polygon id="arrow-disclosure-expanded" class="icon" points="3,5  12,5  7.5,13" />
   <polygon id="arrow-disclosure-expanded-inverted" class="icon white" points="3,5  12,5  7.5,13" />
 
 </svg>