Bug 1323553 - Add RTL to JSON Viewer draft
authorTomer Cohen <tomer@tomercohen.com>
Tue, 03 Jan 2017 12:58:30 +0200
changeset 455262 1d83c4c7ae4c5b00ff035bd5c752eb7fbe83b5f9
parent 455195 a3c34558dfdd6c61a7a199a6e0d38771a5311255
child 540935 91abe2d6494658ee434bcf87c0f3d3cd955b8223
push id40180
push userbmo:tomer.moz.bugs@tomercohen.com
push dateTue, 03 Jan 2017 10:59:33 +0000
bugs1323553
milestone53.0a1
Bug 1323553 - Add RTL to JSON Viewer MozReview-Commit-ID: AItCFstp7xd
devtools/client/jsonview/converter-child.js
devtools/client/jsonview/css/main.css
devtools/client/jsonview/css/search-box.css
--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@@ -220,18 +220,23 @@ Converter.prototype = {
     if (platform.startsWith("WINNT")) {
       os = "win";
     } else if (platform.startsWith("Darwin")) {
       os = "mac";
     } else {
       os = "linux";
     }
 
+    let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"]
+                        .getService(Ci.nsIXULChromeRegistry);
+    let dir = chromeReg.isLocaleRTL("global") ? "rtl" : "ltr";
+
     return "<!DOCTYPE html>\n" +
-      "<html platform=\"" + os + "\" class=\"" + themeClassName + "\">" +
+      "<html platform=\"" + os + "\" class=\"" + themeClassName +
+        "\" dir=\"" + dir + "\">" +
       "<head><title>" + this.htmlEncode(title) + "</title>" +
       "<base href=\"" + this.htmlEncode(baseUrl) + "\">" +
       "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
         themeVarsUrl + "\">" +
       "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
         commonUrl + "\">" +
       "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/main.css\">" +
       "<script data-main=\"viewer-config\" src=\"lib/require.js\"></script>" +
@@ -251,20 +256,24 @@ Converter.prototype = {
     let output = "<div id=\"error\">" + "error parsing";
     if (errorInfo.message) {
       output += "<div class=\"errormessage\">" + errorInfo.message + "</div>";
     }
 
     output += "</div><div id=\"json\">" + this.highlightError(data,
       errorInfo.line, errorInfo.column) + "</div>";
 
+    let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"]
+                        .getService(Ci.nsIXULChromeRegistry);
+    let dir = chromeReg.isLocaleRTL("global") ? "rtl" : "ltr";
+
     return "<!DOCTYPE html>\n" +
       "<html><head><title>" + this.htmlEncode(uri + " - Error") + "</title>" +
       "<base href=\"" + this.htmlEncode(this.data.url()) + "\">" +
-      "</head><body>" +
+      "</head><body dir=\"" + dir + "\">" +
       output +
       "</body></html>";
   },
 
   // Chrome <-> Content communication
 
   onContentMessage: function (e) {
     // Do not handle events from different documents.
--- a/devtools/client/jsonview/css/main.css
+++ b/devtools/client/jsonview/css/main.css
@@ -13,16 +13,17 @@
 @import "json-panel.css";
 @import "text-panel.css";
 @import "headers-panel.css";
 
 /******************************************************************************/
 /* Panel Content */
 
 .panelContent {
+  direction: ltr;
   overflow-y: auto;
   width: 100%;
 }
 
 /* The tree takes the entire horizontal space within the panel content. */
 .panelContent .treeTable {
   width: 100%;
   font-family: var(--monospace-font-family);
--- a/devtools/client/jsonview/css/search-box.css
+++ b/devtools/client/jsonview/css/search-box.css
@@ -13,12 +13,17 @@
   background-image: url("chrome://devtools/skin/images/filter.svg#filterinput");
   background-repeat: no-repeat;
   background-position: 2px center;
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   color: var(--theme-content-color1);
   width: 200px;
   margin-top: 0;
-  margin-right: 1px;
+  margin-inline-end: 1px;
   float: right;
-  padding-left: 20px;
+  padding-inline-start: 20px;
 }
+
+.searchBox:dir(rtl) {
+  float: left;
+  background-position: calc(100% - 2px) center;
+}