Bug 1285863 - Improve UI / UX of devtools JSONView r=ntim

MozReview-Commit-ID: 5gxqmoGvsTl
2016-07-30 08:20:00 -07:00 · 2016-07-30 08:20:00 -07:00 · 71e5066612
--- a/devtools/client/jsonview/components/headers.js
+++ b/devtools/client/jsonview/components/headers.js
@ -87,9 +87,7 @@ define(function (require, exports, module) {
            td({className: "netInfoParamName"},
              span({title: header.name}, header.name)
            ),
-            td({className: "netInfoParamValue"},
-              code({}, header.value)
-            )
+            td({className: "netInfoParamValue"}, header.value)
          )
        );
      });
--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@ -212,8 +212,18 @@ let Converter = Class({
    let themeVarsUrl = clientBaseUrl + "themes/variables.css";
    let commonUrl = clientBaseUrl + "themes/common.css";

+    let os;
+    let platform = Services.appinfo.OS;
+    if (platform.startsWith("WINNT")) {
+      os = "win";
+    } else if (platform.startsWith("Darwin")) {
+      os = "mac";
+    } else {
+      os = "linux";
+    }
+
    return "<!DOCTYPE html>\n" +
-      "<html class=\"" + themeClassName + "\">" +
+      "<html platform=\"" + os + "\" class=\"" + themeClassName + "\">" +
      "<head><title>" + this.htmlEncode(title) + "</title>" +
      "<base href=\"" + this.htmlEncode(baseUrl) + "\">" +
      "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
--- a/devtools/client/jsonview/css/general.css
+++ b/devtools/client/jsonview/css/general.css
@ -7,7 +7,8 @@
 /* General */

 body {
-  background-color: white;
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
  padding: 0;
  margin: 0;
  overflow: hidden;
@ -24,6 +25,7 @@ body {
 pre {
  background-color: white;
  border: none;
+  font-family: var(--monospace-font-family);
 }

 #json,
--- a/devtools/client/jsonview/css/headers-panel.css
+++ b/devtools/client/jsonview/css/headers-panel.css
@ -8,41 +8,37 @@

 .headersPanelBox {
  height: 100%;
-  font-family: Lucida Grande, Tahoma, sans-serif;
-  font-size: 11px;
 }

 .headersPanelBox .netInfoHeadersTable {
  overflow: auto;
  height: 100%;
-  line-height: 12px;
 }

 .headersPanelBox .netHeadersGroup {
  padding: 10px;
 }

+.headersPanelBox td {
+  vertical-align: bottom;
+}
+
 .headersPanelBox .netInfoHeadersGroup {
+  color: var(--theme-body-color-alt);
  margin-bottom: 10px;
-  border-bottom: 1px solid #D7D7D7;
+  border-bottom: 1px solid var(--theme-splitter-color);
  padding-top: 8px;
  padding-bottom: 4px;
-  font-family: Lucida Grande, Tahoma, sans-serif;
  font-weight: bold;
-  color: #565656;
  -moz-user-select: none;
 }

-.headersPanelBox .netInfoParamValue code {
-  display: block;
-  color: #18191A;
-  font-size: 11px;
+.headersPanelBox .netInfoParamValue {
  word-wrap: break-word;
 }

 .headersPanelBox .netInfoParamName {
  padding: 2px 10px 0 0;
-  font-family: Lucida Grande, Tahoma, sans-serif;
  font-weight: bold;
  vertical-align: top;
  text-align: right;
@ -50,17 +46,33 @@
 }

 /******************************************************************************/
+/* Theme colors have been generated/copied from Network Panel's header view */
+
+/* Light Theme */
+.theme-light .netInfoParamName {
+  color: var(--theme-highlight-red);
+}
+
+.theme-light .netInfoParamValue {
+  color: var(--theme-highlight-purple);
+}
+
 /* Dark Theme */
-
-
-.theme-dark .headersPanelBox .netInfoParamName {
-  color: var(--theme-highlight-blue);
+.theme-dark .netInfoParamName {
+  color: var(--theme-highlight-purple);
 }

-.theme-dark .headersPanelBox .netInfoParamValue code {
-  color: var(--theme-highlight-orange);
+.theme-dark .netInfoParamValue {
+  color: var(--theme-highlight-gray);
 }

-.theme-dark .headersPanelBox .netInfoHeadersGroup {
-  color: var(--theme-body-color-alt);
+/* Firebug Theme */
+.theme-firebug .netInfoHeadersTable {
+  font-family: Lucida Grande, Tahoma, sans-serif;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.theme-firebug .netInfoParamValue {
+  font-family: var(--monospace-font-family);
 }
--- a/devtools/client/jsonview/css/main.css
+++ b/devtools/client/jsonview/css/main.css
@ -14,20 +14,22 @@
@import "text-panel.css";
@import "headers-panel.css";

-
 /******************************************************************************/
 /* Panel Content */

 .panelContent {
  overflow-y: auto;
-  font-size: 11px;
-  font-family: var(--monospace-font-family);
-  padding-right: 5px;
+  width: 100%;
 }

 /* The tree takes the entire horizontal space within the panel content. */
 .panelContent .treeTable {
  width: 100%;
+  font-family: var(--monospace-font-family);
+}
+
+:root[platform="linux"] .treeTable {
+  font-size: 80%; /* To handle big monospace font */
 }

 /* Make sure there is a little space between label and value columns. */
--- a/devtools/client/jsonview/css/search-box.css
+++ b/devtools/client/jsonview/css/search-box.css
@ -18,7 +18,7 @@
  color: var(--theme-content-color1);
  width: 200px;
  margin-top: 0;
-  position: fixed;
-  right: 1px;
+  margin-right: 1px;
+  float: right;
  padding-left: 20px;
 }
--- a/devtools/client/jsonview/css/text-panel.css
+++ b/devtools/client/jsonview/css/text-panel.css
@ -11,19 +11,16 @@
 }

 .textPanelBox .data {
-  font-size: 11px;
-  font-family: monospace;
  overflow: auto;
  height: 100%;
 }

 .textPanelBox pre {
  margin: 0;
+  font-family: var(--monospace-font-family);
+  color: var(--theme-content-color1);
 }

-/******************************************************************************/
-/* Dark Theme */
-
-.theme-dark .textPanelBox {
-  color: var(--theme-content-color1);
-}
+:root[platform="linux"] .textPanelBox .data {
+  font-size: 80%; /* To handle big monospace font */
+}
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@ -24,7 +24,8 @@
  vertical-align: middle;
  cursor: pointer;
  -moz-user-select: none;
-  padding: 0 2px 1px 2px;
+  padding: 0 2px;
+  border-radius: 2px;
 }

 .toolbar .btn::-moz-focus-inner {
@ -71,13 +72,11 @@

 .theme-dark .toolbar .btn,
 .theme-light .toolbar .btn {
-  min-width: 78px;
  min-height: 18px;
  color: var(--theme-content-color1);
  text-shadow: none;
  margin: 1px 2px 1px 2px;
  border: none;
-  border-radius: 0;
  background-color: rgba(170, 170, 170, .2); /* --toolbar-tab-hover */
  transition: background 0.05s ease-in-out;
 }
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@ -44,12 +44,13 @@

 .theme-dark .tabs,
 .theme-light .tabs {
-  background: var(--theme-tab-toolbar-background);
+  background: var(--theme-body-background);
 }

 .theme-dark .tabs .tabs-navigation,
 .theme-light .tabs .tabs-navigation {
  border-bottom: 1px solid var(--theme-splitter-color);
+  background: var(--theme-tab-toolbar-background);
 }

 .theme-dark .tabs .tabs-menu-item,
@ -62,15 +63,14 @@
  border-color: var(--theme-splitter-color);
 }

+.theme-dark .tabs .tabs-menu-item:last-child,
+.theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
+  border-inline-end-width: 1px;
+}
+
 .theme-dark .tabs .tabs-menu-item a,
 .theme-light .tabs .tabs-menu-item a {
  color: var(--theme-content-color1);
-}
-
-.theme-dark .tabs .tabs-menu-item a:hover,
-.theme-dark .tabs .tabs-menu-item a,
-.theme-light .tabs .tabs-menu-item a:hover,
-.theme-light .tabs .tabs-menu-item a {
  padding: 3px 15px;
 }

@ -105,18 +105,18 @@

 /* Firebug Theme */

-.theme-firebug .tabs {
+.theme-firebug .tabs .tabs-navigation {
  background-color: rgb(219, 234, 249);
  background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
-}
-
-.theme-firebug .tabs .tabs-navigation {
  padding-top: 3px;
  padding-left: 3px;
-  height: 27px;
  border-bottom: 1px solid rgb(170, 188, 207);
 }

+.theme-firebug .tabs .tabs-menu {
+  margin-bottom: -1px;
+}
+
 .theme-firebug .tabs .tabs-menu-item.is-active,
 .theme-firebug .tabs .tabs-menu-item.is-active:hover {
  background-color: transparent;
@ -155,9 +155,5 @@

 .theme-firebug .tabs .tabs-menu-item a {
  border: 1px solid transparent;
-}
-
-.theme-firebug .tabs .tabs-menu-item a:hover,
-.theme-firebug .tabs .tabs-menu-item a {
-  padding: 4px 8px 4px 8px;
+  padding: 4px 8px;
 }
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@ -137,14 +137,16 @@
 /******************************************************************************/
 /* Themes */

-/* Light Theme: toggle icon */
-.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
+/* 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-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;
@ -163,11 +165,10 @@
  background-position: -42px -14px;
 }

-/* Dark and Light Themes: Support for retina displays */
+/* Support for retina displays */
@media (min-resolution: 1.1dppx) {
-  .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon,
-  .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+  .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
+    background-image: url("chrome://devtools/skin/images/controls@2x.png") !important;
  }
 }

@ -185,7 +186,8 @@
  color: var(--theme-highlight-pink);
 }

-.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
+.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover,
+.theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
  color: var(--theme-highlight-pink);
 }