Bug 1576487 - RTL fixes to the network details panel r=Honza

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

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

devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css

@@ -44,6 +44,10 @@
   margin: 1px 3px;
 }
 
+.network-monitor .sidebar-toggle:dir(rtl) {
+  transform: scaleX(-1);
+}
+
 /* Empty notices in tab panels */
 
 .network-monitor .empty-notice {
@@ -131,6 +135,11 @@
   fill: var(--theme-icon-dimmed-color);
 }
 
+/* Make the twisties rotate to the right in code-only sections on RTL. */
+.network-monitor .tab-panel.panel-with-code tr:not(.tree-section).hasChildren .theme-twisty:not(.open):dir(rtl) {
+  transform: rotate(-90deg);
+}
+
 .network-monitor .tree-container .treeTable .treeValueCell {
   /* FIXME: Make value cell can be reduced to shorter width */
   max-width: 0;
@@ -141,6 +150,11 @@
   text-decoration: none;
 }
 
+.network-monitor .tab-panel.panel-with-code .tree-container .treeTable tr:not(.tree-section):dir(rtl) {
+  direction: ltr;
+  text-align: left;
+}
+
 /* Source editor in tab panels */
 
 /* If there is a source editor shows up in the last row of TreeView,
@@ -328,7 +342,7 @@
 
 .network-monitor .headers-summary .status-text {
     width: auto!important;
-    margin-left: 4px;
+    margin-inline-start: 4px;
 }
 
 /* Params and Response error messages */
@@ -431,6 +445,7 @@
      Make sure this whitespace doesn't affect the HTML rendering */
   white-space: normal;
   padding: 5px;
+  direction: ltr;
 }
 
 .network-monitor .stack-trace .frame-link-source,

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -313,8 +313,9 @@
   display: inline-block;
   width: 16px;
   height: 16px;
-  margin: 0 3px 0 -3px;
-  vertical-align: middle;
+  margin-inline-start: -3px;
+  margin-inline-end: 3px;
+  vertical-align: text-bottom;
   background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
   background-repeat: no-repeat;
 }

devtools/client/netmonitor/src/assets/styles/websockets.css

@@ -70,6 +70,8 @@
   font-family: var(--monospace-font-family);
   font-size: var(--theme-code-font-size);
   line-height: calc(15/11);
+  direction: ltr;
+  text-align: left;
 }
 
 #messages-panel #ws-frame-rawData-header,

devtools/client/netmonitor/src/components/TabboxPanel.js

@@ -123,6 +123,7 @@ class TabboxPanel extends Component {
         {
           id: PANELS.HEADERS,
           title: HEADERS_TITLE,
+          className: "panel-with-code",
         },
         HeadersPanel({
           cloneSelectedRequest,
@@ -136,6 +137,7 @@ class TabboxPanel extends Component {
           {
             id: PANELS.MESSAGES,
             title: MESSAGES_TITLE,
+            className: "panel-with-code",
           },
           WebSocketsPanel({
             connector,
@@ -145,6 +147,7 @@ class TabboxPanel extends Component {
         {
           id: PANELS.COOKIES,
           title: COOKIES_TITLE,
+          className: "panel-with-code",
         },
         CookiesPanel({
           connector,
@@ -156,6 +159,7 @@ class TabboxPanel extends Component {
         {
           id: PANELS.PARAMS,
           title: PARAMS_TITLE,
+          className: "panel-with-code",
         },
         ParamsPanel({ connector, openLink, request })
       ),
@@ -163,6 +167,7 @@ class TabboxPanel extends Component {
         {
           id: PANELS.RESPONSE,
           title: RESPONSE_TITLE,
+          className: "panel-with-code",
         },
         ResponsePanel({ request, openLink, connector })
       ),
@@ -190,6 +195,7 @@ class TabboxPanel extends Component {
           {
             id: PANELS.STACK_TRACE,
             title: STACK_TRACE_TITLE,
+            className: "panel-with-code",
           },
           StackTracePanel({ connector, openLink, request, sourceMapService })
         ),

devtools/client/shared/components/tabs/Tabs.js

@@ -425,7 +425,11 @@ define(function(require, exports, module) {
     }
 
     render() {
-      return dom.div({ className: "tab-panel" }, this.props.children);
+      const { className } = this.props;
+      return dom.div(
+        { className: `tab-panel ${className || ""}` },
+        this.props.children
+      );
     }
   }