Bug 1350234 - Clean up network monitor CSS. r=Honza draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 29 Mar 2017 21:37:24 +0100
changeset 553325 34384c9447567ea3bc4703da62288a4b4ba2a3aa
parent 553323 cc0fb8b57bae1dcb081f3064e28756259b1e4c33
child 622030 138e5d132614a8cef0bb350e8b05010eef14aeb3
push id51595
push userbmo:ntim.bugs@gmail.com
push dateWed, 29 Mar 2017 20:37:38 +0000
reviewersHonza
bugs1350234
milestone55.0a1
Bug 1350234 - Clean up network monitor CSS. r=Honza MozReview-Commit-ID: 7DjNpGbidBE
devtools/client/jsonview/components/headers-panel.js
devtools/client/jsonview/components/json-panel.js
devtools/client/jsonview/components/text-panel.js
devtools/client/jsonview/css/main.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/netmonitor.css
--- a/devtools/client/jsonview/components/headers-panel.js
+++ b/devtools/client/jsonview/components/headers-panel.js
@@ -33,17 +33,17 @@ define(function (require, exports, modul
         data: {}
       };
     },
 
     render: function () {
       let data = this.props.data;
 
       return (
-        div({className: "headersPanelBox"},
+        div({className: "headersPanelBox tab-panel-inner"},
           HeadersToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             Headers({data: data})
           )
         )
       );
     }
   });
--- a/devtools/client/jsonview/components/json-panel.js
+++ b/devtools/client/jsonview/components/json-panel.js
@@ -139,17 +139,17 @@ define(function (require, exports, modul
         }
       } catch (err) {
         content = div({className: "jsonParseError"},
           err + ""
         );
       }
 
       return (
-        div({className: "jsonPanelBox"},
+        div({className: "jsonPanelBox tab-panel-inner"},
           JsonToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             content
           )
         )
       );
     }
   });
--- a/devtools/client/jsonview/components/text-panel.js
+++ b/devtools/client/jsonview/components/text-panel.js
@@ -27,17 +27,17 @@ define(function (require, exports, modul
     },
 
     getInitialState: function () {
       return {};
     },
 
     render: function () {
       return (
-        div({className: "textPanelBox"},
+        div({className: "textPanelBox tab-panel-inner"},
           TextToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             pre({className: "data"},
               this.props.data
             )
           )
         )
       );
--- a/devtools/client/jsonview/css/main.css
+++ b/devtools/client/jsonview/css/main.css
@@ -12,20 +12,27 @@
 @import "toolbar.css";
 @import "json-panel.css";
 @import "text-panel.css";
 @import "headers-panel.css";
 
 /******************************************************************************/
 /* Panel Content */
 
+.tab-panel-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .panelContent {
   direction: ltr;
   overflow-y: auto;
   width: 100%;
+  flex: 1;
 }
 
 /* The tree takes the entire horizontal space within the panel content. */
 .panelContent .treeTable {
   width: 100%;
   font-family: var(--monospace-font-family);
 }
 
@@ -36,25 +43,14 @@
 /* Make sure there is a little space between label and value columns. */
 .panelContent .treeTable .treeLabelCell {
   padding-right: 17px;
 }
 
 /******************************************************************************/
 /* Theme Firebug */
 
-.theme-firebug .panelContent {
-  height: calc(100% - 30px);
-}
-
 /* JSON View is using bigger font-size for the main tabs so,
   let's overwrite the default value. */
 .theme-firebug .tabs .tabs-navigation {
   font-size: 14px;
 }
 
-/******************************************************************************/
-/* Theme Light & Theme Dark*/
-
-.theme-dark .panelContent,
-.theme-light .panelContent {
-  height: calc(100% - 27px);
-}
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -3,20 +3,21 @@
  * 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/. */
 
 /* Tabs General Styles */
 
 .tabs {
   height: 100%;
   background: var(--theme-body-background);
+  display: flex;
+  flex-direction: column;
 }
 
 .tabs .tabs-menu {
-  display: table;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .tabs .tabs-menu-item {
   display: inline-block;
 }
@@ -36,24 +37,25 @@
   -moz-user-select: none !important;
 }
 
 .tabs .tabs-menu-item a {
   cursor: default;
   -moz-user-select: none;
 }
 
-/* Make sure panel content takes entire vertical space.
-  (minus the height of the tab bar) */
+/* Make sure panel content takes entire vertical space. */
 .tabs .panels {
-  height: calc(100% - 24px);
+  flex: 1;
+  overflow: hidden;
 }
 
 .tabs .tab-panel {
   height: 100%;
+  overflow: auto;
 }
 
 .tabs .tabs-navigation,
 .tabs .tabs-navigation {
   position: relative;
   border-bottom: 1px solid var(--theme-splitter-color);
   background: var(--theme-tab-toolbar-background);
 }
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -3,47 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "resource://devtools/client/shared/components/splitter/split-box.css";
 @import "resource://devtools/client/shared/components/tree/tree-view.css";
 @import "resource://devtools/client/shared/components/tabs/tabs.css";
 @import "resource://devtools/client/shared/components/tabs/tabbar.css";
 @import "chrome://devtools/skin/components-frame.css";
 
-* {
-  box-sizing: border-box;
-}
-
-.toolbar-labels {
-  overflow: hidden;
-  display: flex;
-  flex: auto;
-}
-
-.devtools-toolbar-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-.devtools-toolbar-group {
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
-  align-items: center;
-}
-
-#response-content-image-box {
-  overflow: auto;
-}
-
-.cropped-textbox .textbox-input {
-  /* workaround for textbox not supporting the @crop attribute */
-  text-overflow: ellipsis;
-}
-
 :root.theme-dark {
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
@@ -65,30 +34,70 @@
   --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */
 
   --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
   --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
 }
 
 :root.theme-firebug {
-  --table-splitter-color: rgba(0,0,0,0.15);
-  --table-zebra-background: rgba(0,0,0,0.05);
-
-  --timing-blocked-color: rgba(235, 83, 104, 0.8); /* red */
-  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
-  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
-  --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
-  --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
-  --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
-
   --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
   --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
 }
 
+/* General */
+
+html,
+body,
+.root,
+.network-monitor,
+.monitor-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.split-box {
+  overflow: hidden;
+}
+
+.toolbar-labels {
+  overflow: hidden;
+  display: flex;
+  flex: auto;
+}
+
+.devtools-toolbar-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.devtools-toolbar-group {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+#response-content-image-box {
+  overflow: auto;
+}
+
+.cropped-textbox .textbox-input {
+  /* workaround for textbox not supporting the @crop attribute */
+  text-overflow: ellipsis;
+}
+
+/* Request list */
+
 .request-list-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
 
 .request-list-empty-notice {
@@ -153,16 +162,18 @@
 }
 
 .subitem-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Requests list header */
+
 .requests-list-header {
   display: flex;
   flex: none;
 }
 
 .requests-list-header-button {
   display: flex;
   align-items: center;
@@ -638,18 +649,149 @@
 
 .network-details-panel-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
 .network-details-panel-toggle:-moz-locale-dir(rtl)::before {
   background-image: var(--theme-pane-expand-image);
 }
 
 /* Network request details tabpanels */
 
-.theme-firebug .variables-view-scope:focus > .title {
-  color: var(--theme-body-color);
+.network-details-panel {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.panel-container {
+  height: 100%;
+}
+
+.panel-container,
+.properties-view {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.properties-view .searchbox-section {
+  flex: 0 1 auto;
+}
+
+.properties-view .devtools-searchbox {
+  padding: 0;
+}
+
+.properties-view .devtools-searchbox input {
+  margin: 1px 3px;
+}
+
+/* Empty notices in tab panels */
+
+.empty-notice {
+  color: var(--theme-body-color-alt);
+  padding: 3px 8px;
+}
+
+/* Text inputs in tab panels */
+
+.textbox-input {
+  text-overflow: ellipsis;
+  border: none;
+  background: none;
+  color: inherit;
+  width: 100%;
+}
+
+.textbox-input:focus {
+  outline: 0;
+  box-shadow: var(--theme-focus-box-shadow-textbox);
+}
+
+/* Tree table in tab panels */
+
+.tree-container, .tree-container .treeTable {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}
+
+/* Apply flex to table tbody in order to fill available vertical space */
+.tree-container .treeTable tbody {
+  display: flex;
+  flex-direction: column;
+  /* Apply flex to table will create an anonymous table element outside of tbody
+   * See also http://stackoverflow.com/a/30851678
+   * Therefore, we set height with this magic number in order to remove the
+   * redundant scrollbar when source editor appears.
+   */
+  height: calc(100% - 4px);
+}
+
+.tree-container .treeTable tr {
+  display: block;
+}
+
+/* Make right td fill available horizontal space */
+.tree-container .treeTable td:last-child {
+  width: 100%;
+}
+
+.properties-view .devtools-searchbox,
+.tree-container .treeTable .tree-section {
+  width: 100%;
+  background-color: var(--theme-toolbar-background);
+}
+
+.tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+.properties-view .devtools-searchbox,
+.tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.tree-container .treeTable .tree-section > * {
+  vertical-align: middle;
+}
+
+.tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
+.tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover {
+  color: var(--theme-body-color-alt);
+}
+
+.tree-container .treeTable .treeValueCell {
+  /* FIXME: Make value cell can be reduced to shorter width */
+  max-width: 0;
+  padding-inline-end: 5px;
+}
+
+/* Source editor in tab panels */
+
+/* If there is a source editor shows up in the last row of TreeView,
+ * it should occupy the available vertical space.
+ */
+.tree-container .treeTable .editor-row-container,
+.tree-container .treeTable tr:last-child td[colspan="2"] {
+  display: block;
+  height: 100%;
+}
+
+.editor-container,
+.editor-mount,
+.panel-container iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+.headers-summary-label,
+.tree-container .objectBox {
+  white-space: nowrap;
 }
 
 /* Summary tabpanel */
 
 .tabpanel-summary-container {
   padding: 1px;
 }
 
@@ -670,16 +812,56 @@
 }
 
 /* Headers tabpanel */
 
 .headers-overview {
   background: var(--theme-toolbar-background);
 }
 
+.headers-summary,
+.response-summary {
+  display: flex;
+  align-items: center;
+}
+
+.headers-summary .devtools-button {
+  margin-inline-end: 6px;
+}
+
+.headers-summary .requests-list-status-icon {
+  min-width: 10px;
+}
+
+.headers-summary .raw-headers-container {
+  display: flex;
+  width: 100%;
+}
+
+.headers-summary .raw-headers {
+  width: 50%;
+  padding: 0 4px;
+}
+
+.headers-summary .raw-headers textarea {
+  width: 100%;
+  height: 50vh;
+  font: message-box;
+  resize: none;
+  box-sizing: border-box;
+}
+
+.headers-summary .raw-headers .tabpanel-summary-label {
+  padding: 0 0 4px 0;
+}
+
+.headers-summary .textbox-input {
+  margin-inline-end: 2px;
+}
+
 .headers-summary .status-text {
     width: auto!important;
 }
 
 .headers-summary .learn-more-link {
   color: var(--theme-highlight-blue);
   cursor: pointer;
   margin: 0 5px;
@@ -1121,19 +1303,16 @@
 
   .statistics-panel .splitter {
     width: 100%;
     height: 1px;
   }
 }
 
 /* Platform overrides (copied in from the old platform specific files) */
-:root[platform="win"] .requests-list-header-button > .button-box {
-  padding: 0;
-}
 
 :root[platform="win"] .requests-list-timings-division {
   padding-top: 1px;
   font-size: 90%;
 }
 
 :root[platform="linux"] #headers-summary-resend {
   padding: 4px;
@@ -1145,209 +1324,12 @@
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
   :root[platform="linux"] .requests-list-header-button {
     font-size: 85%;
   }
 }
 
-.textbox-input {
-  text-overflow: ellipsis;
-  border: none;
-  background: none;
-  color: inherit;
-  width: 100%;
-}
 
-.treeTable .textbox-input:focus {
-  outline: 0;
-  box-shadow: var(--theme-focus-box-shadow-textbox);
-}
-
-.panel-container,
-.properties-view {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  height: 100%;
-}
-
-.properties-view .searchbox-section {
-  flex: 0 1 auto;
-}
-
-.properties-view .devtools-searchbox {
-  padding: 0;
-}
-
-.properties-view .devtools-searchbox input {
-  margin: 1px 3px;
-}
-
-.tree-container {
-  position: relative;
-  height: 100%;
-}
-
-/* Make treeTable fill parent element and scrollable */
-.tree-container .treeTable {
-  position: absolute;
-  display: block;
-  overflow-y: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/* Apply flex to table tbody in order to fill available vertical space */
-.tree-container .treeTable tbody {
-  display: flex;
-  flex-direction: column;
-  /* Apply flex to table will create an anonymous table element outside of tbody
-   * See also http://stackoverflow.com/a/30851678
-   * Therefore, we set height with this magic number in order to remove the
-   * redundant scrollbar when source editor appears.
-   */
-  height: calc(100% - 4px);
-}
-
-.tree-container .treeTable tr {
-  display: block;
-}
-
-/* Make right td fill available horizontal space */
-.tree-container .treeTable td:last-child {
-  width: 100%;
-}
-
-/* If there is a source editor shows up in the last row of TreeView,
- * it should occupy the available vertical space.
- */
-.tree-container .treeTable .editor-row-container,
-.tree-container .treeTable tr:last-child td[colspan="2"] {
-  display: block;
-  height: 100%;
-}
-
-.properties-view .devtools-searchbox,
-.tree-container .treeTable .tree-section {
-  width: 100%;
-  background-color: var(--theme-toolbar-background);
-}
-
-.tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
-  border-top: 1px solid var(--theme-splitter-color);
-}
-
-.properties-view .devtools-searchbox,
-.tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.tree-container .treeTable .tree-section > * {
-  vertical-align: middle;
-}
 
-.tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
-.tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover {
-  color: var(--theme-body-color-alt);
-}
-
-.tree-container .treeTable .treeValueCell {
-  /* FIXME: Make value cell can be reduced to shorter width */
-  max-width: 0;
-  padding-inline-end: 5px;
-}
-
-.headers-summary input:not([type="button"]) {
-  width: 100%;
-  background: none;
-  border: none;
-  color: inherit;
-  margin-inline-end: 2px;
-}
-
-.headers-summary input:not([type="button"]):focus {
-  outline: none;
-  box-shadow: var(--theme-focus-box-shadow-textbox);
-  transition: all 0.2s ease-in-out;
-}
-
-.headers-summary-label,
-.tree-container .objectBox {
-  white-space: nowrap;
-}
-
-.headers-summary,
-.response-summary {
-  display: flex;
-  align-items: center;
-}
-
-.headers-summary .devtools-button {
-  margin-inline-end: 6px;
-}
-
-.headers-summary .requests-list-status-icon {
-  min-width: 10px;
-}
-
-.headers-summary .raw-headers-container {
-  display: flex;
-  width: 100%;
-}
 
-.headers-summary .raw-headers {
-  width: 50%;
-  padding: 0 4px;
-}
 
-.headers-summary .raw-headers textarea {
-  width: 100%;
-  height: 50vh;
-  font: message-box;
-  resize: none;
-  box-sizing: border-box;
-}
-
-.headers-summary .raw-headers .tabpanel-summary-label {
-  padding: 0 0 4px 0;
-}
-
-.empty-notice {
-  color: var(--theme-body-color-alt);
-  padding: 3px 8px;
-}
-
-.response-summary {
-  display: flex;
-}
-
-.editor-container,
-.editor-mount,
-.panel-container iframe {
-  border: none;
-  width: 100%;
-  height: 100%;
-}
-
-.network-details-panel {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.split-box {
-  overflow: hidden;
-}
-
-html,
-body,
-.root,
-.network-monitor,
-.monitor-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}