Bug 1220839 - Make the inspector rule/computed searchbox clear icon show correctly in RTL;r=bgrins
authorHernan Rodriguez Colmeiro <colmeiro@gmail.com>
Tue, 10 Nov 2015 00:24:07 -0300
changeset 271829 411e731c6a0dc2c56db78cbc71efcd859f323878
parent 271828 1db2ae4b7124adfe80788f655de3fcab175279fe
child 271830 21f52f8344413fc44a1d5815272662179b6c09f4
child 271855 f2f65c103a35ed1871558a93d9600f79672e389f
push id16157
push userbgrinstead@mozilla.com
push dateTue, 10 Nov 2015 03:49:40 +0000
treeherderfx-team@411e731c6a0d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1220839
milestone45.0a1
Bug 1220839 - Make the inspector rule/computed searchbox clear icon show correctly in RTL;r=bgrins
devtools/client/styleinspector/computedview.xhtml
devtools/client/styleinspector/cssruleview.xhtml
devtools/client/themes/toolbars.css
--- a/devtools/client/styleinspector/computedview.xhtml
+++ b/devtools/client/styleinspector/computedview.xhtml
@@ -1,16 +1,18 @@
 <?xml version="1.0"?>
 <!-- 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 window [
   <!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd">
   %inspectorDTD;
+  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
+  %globalDTD;
   <!ELEMENT loop ANY>
   <!ATTLIST li foreach CDATA #IMPLIED>
   <!ATTLIST div foreach CDATA #IMPLIED>
   <!ATTLIST loop foreach CDATA #IMPLIED>
   <!ATTLIST a target CDATA #IMPLIED>
   <!ATTLIST a __pathElement CDATA #IMPLIED>
   <!ATTLIST div _id CDATA #IMPLIED>
   <!ATTLIST div save CDATA #IMPLIED>
@@ -42,17 +44,17 @@
       window.onunload = function() {
         if (this.computedview) {
           this.computedview.destroy();
         }
       }
     </script>
   </head>
 
-  <body>
+  <body dir="&locale.dir;">
 
     <div id="root" class="devtools-monospace">
       <div class="devtools-toolbar">
         <div class="devtools-searchbox">
           <input id="computedview-searchbox"
                  class="devtools-searchinput devtools-rule-searchbox"
                  type="search" placeholder="&filterStylesPlaceholder;"/>
           <button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button>
--- a/devtools/client/styleinspector/cssruleview.xhtml
+++ b/devtools/client/styleinspector/cssruleview.xhtml
@@ -1,16 +1,18 @@
 <?xml version="1.0"?>
 <!-- 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 window [
   <!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd">
   %inspectorDTD;
+  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
+  %globalDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       class="theme-sidebar">
   <head>
     <title>&ruleViewTitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>
@@ -26,17 +28,17 @@
       }
       window.onunload = function() {
         if (this.ruleview) {
           this.ruleview.destroy();
         }
       }
     </script>
   </head>
-  <body>
+  <body dir="&locale.dir;">
     <div id="root" class="devtools-monospace">
       <div id="ruleview-toolbar" class="devtools-toolbar">
         <div class="devtools-searchbox">
           <input id="ruleview-searchbox"
                  class="devtools-searchinput devtools-rule-searchbox"
                  type="search" placeholder="&filterStylesPlaceholder;"/>
           <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
         </div>
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -354,17 +354,18 @@
 .theme-dark .devtools-searchinput {
   background-image: url(images/magnifying-glass.png);
 }
 
 .theme-light .devtools-searchinput {
   background-image: url(images/magnifying-glass-light.png);
 }
 
-.devtools-searchinput:-moz-locale-dir(rtl) {
+.devtools-searchinput:-moz-locale-dir(rtl),
+.devtools-searchinput:-moz-dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
   visibility: hidden;
 }
 
 /* Searchbox is a div container element for a search input element */
@@ -403,17 +404,17 @@
   -moz-box-flex: 1;
   width: 100%;
   font: inherit;
 }
 
 .devtools-rule-searchbox[filled] {
   background-color: var(--searchbox-background-color);
   border-color: var(--searchbox-border-color);
-  padding-right: 23px;
+  -moz-padding-end: 23px;
 }
 
 .devtools-style-searchbox-no-match {
   background-color: var(--searcbox-no-match-background-color) !important;
   border-color: var(--searcbox-no-match-border-color) !important;
 }
 
 .devtools-no-search-result {
@@ -428,16 +429,21 @@
   border: 0;
   width: 16px;
   height: 16px;
   background-position: 0 0;
   background-repeat: no-repeat;
   background-color: transparent;
 }
 
+.devtools-searchinput-clear:-moz-dir(rtl) {
+  right: unset;
+  left: 7px;
+}
+
 .theme-dark .devtools-searchinput-clear {
   background-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
 }
 
 .theme-light .devtools-searchinput-clear {
   background-image: url("chrome://devtools/skin/images/search-clear-light.svg");
 }