Bug 1332151 - Fix layout issues for network monitor sidebar panels r=Honza
authorRicky Chien <rchien@mozilla.com>
Thu, 19 Jan 2017 15:36:00 +0800
changeset 375174 937f596dc88ab9d71bf49daf3289d1c6b53e96cd
parent 375173 8516638f3e905ba0542fe6432e2946c365460cfa
child 375175 5017a8d5c70c2432b683e1265dcd5e017ba2b9f3
push id6996
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 20:48:21 +0000
treeherdermozilla-beta@d89512dab048 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1332151
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1332151 - Fix layout issues for network monitor sidebar panels r=Honza MozReview-Commit-ID: WT0CTbQ6Sj
devtools/client/netmonitor/shared/components/preview-panel.js
devtools/client/netmonitor/shared/components/properties-view.js
devtools/client/netmonitor/shared/components/security-panel.js
devtools/client/netmonitor/shared/components/timings-panel.js
devtools/client/netmonitor/test/browser_net_html-preview.js
devtools/client/netmonitor/test/browser_net_security-details.js
devtools/client/themes/netmonitor.css
--- a/devtools/client/netmonitor/shared/components/preview-panel.js
+++ b/devtools/client/netmonitor/shared/components/preview-panel.js
@@ -3,30 +3,33 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { getSelectedRequest } = require("../../selectors/index");
 
-const { iframe } = DOM;
+const { div, iframe } = DOM;
 
 /*
  * Preview panel component
  * Display HTML content within a sandbox enabled iframe
  */
 function PreviewPanel({
   srcDoc = "",
 }) {
-  return iframe({
-    id: "response-preview",
-    sandbox: "",
-    srcDoc,
-  });
+  return (
+    div({ className: "panel-container" },
+      iframe({
+        sandbox: "",
+        srcDoc,
+      })
+    )
+  );
 }
 
 PreviewPanel.displayName = "PreviewPanel";
 
 PreviewPanel.propTypes = {
   srcDoc: PropTypes.string,
 };
 
--- a/devtools/client/netmonitor/shared/components/properties-view.js
+++ b/devtools/client/netmonitor/shared/components/properties-view.js
@@ -50,16 +50,17 @@ const PropertiesView = createClass({
   },
 
   getDefaultProps() {
     return {
       enableInput: true,
       enableFilter: true,
       expandableStrings: false,
       filterPlaceHolder: "",
+      sectionNames: [],
     };
   },
 
   getInitialState() {
     return {
       filterText: "",
     };
   },
--- a/devtools/client/netmonitor/shared/components/security-panel.js
+++ b/devtools/client/netmonitor/shared/components/security-panel.js
@@ -1,22 +1,22 @@
 /* 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/. */
 
 "use strict";
 
 const { DOM, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
+const PropertiesView = createFactory(require("./properties-view"));
 const { L10N } = require("../../l10n");
 const { getUrlHost } = require("../../request-utils");
 const { getSelectedRequest } = require("../../selectors/index");
 
-const { div, input } = DOM;
+const { div, input, span } = DOM;
 
 /*
  * Security panel component
  * If the site is being served over HTTPS, you get an extra tab labeled "Security".
  * This contains details about the secure connection used including the protocol,
  * the cipher suite, and certificate details
  */
 function SecurityPanel({
@@ -82,46 +82,42 @@ function SecurityPanel({
   } else {
     object = {
       [L10N.getStr("netmonitor.security.error")]:
         new DOMParser().parseFromString(securityInfo.errorMessage, "text/html")
           .body.textContent || notAvailable
     };
   }
 
-  return div({ id: "security-information" },
-    TreeView({
+  return div({ className: "panel-container" },
+    PropertiesView({
       object,
-      columns: [{
-        id: "value",
-        width: "100%",
-      }],
-      renderValue: renderValue.bind(null, securityInfo.weaknessReasons),
+      renderValue: (props) => renderValue(props, securityInfo.weaknessReasons),
+      enableFilter: false,
       expandedNodes: getExpandedNodes(object),
-      expandableStrings: false,
     })
   );
 }
 
 SecurityPanel.displayName = "SecurityPanel";
 
 SecurityPanel.propTypes = {
   securityInfo: PropTypes.object,
   url: PropTypes.string,
 };
 
-function renderValue(weaknessReasons = [], props) {
+function renderValue(props, weaknessReasons = []) {
   const { member, value } = props;
 
   // Hide object summary
   if (typeof member.value === "object") {
     return null;
   }
 
-  return div({ className: "security-info-value" },
+  return span({ className: "security-info-value" },
     member.name === L10N.getStr("netmonitor.security.error") ?
       // Display multiline text for security error
       value
       :
       // Display one line selectable text for security details
       input({
         className: "textbox-input",
         readOnly: "true",
--- a/devtools/client/netmonitor/shared/components/timings-panel.js
+++ b/devtools/client/netmonitor/shared/components/timings-panel.js
@@ -53,17 +53,17 @@ function TimingsPanel({
         }),
         span({ className: "requests-menu-timings-total" },
           L10N.getFormatStr("networkMenu.totalMS", timings[type])
         )
       ),
     );
   });
 
-  return div({}, timelines);
+  return div({ className: "panel-container" }, timelines);
 }
 
 TimingsPanel.displayName = "TimingsPanel";
 
 TimingsPanel.propTypes = {
   timings: PropTypes.object,
   totalTime: PropTypes.number,
 };
--- a/devtools/client/netmonitor/test/browser_net_html-preview.js
+++ b/devtools/client/netmonitor/test/browser_net_html-preview.js
@@ -6,58 +6,58 @@
 /**
  * Tests if html responses show and properly populate a "Preview" tab.
  */
 
 add_task(function* () {
   let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_URL);
   info("Starting test... ");
 
-  let { $, document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { document, NetMonitorView } = monitor.panelWin;
   let { RequestsMenu } = NetMonitorView;
 
   RequestsMenu.lazyUpdate = false;
 
   let wait = waitForNetworkEvents(monitor, 6);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests();
   });
   yield wait;
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
 
-  is($("#event-details-pane").selectedIndex, 0,
+  is(document.querySelector("#event-details-pane").selectedIndex, 0,
     "The first tab in the details pane should be selected.");
-  is($("#preview-tab").hidden, true,
+  is(document.querySelector("#preview-tab").hidden, true,
     "The preview tab should be hidden for non html responses.");
-  is($("#preview-tabpanel").hidden, false,
+  is(document.querySelector("#preview-tabpanel").hidden, false,
     "The preview tabpanel is not hidden for non html responses.");
 
   RequestsMenu.selectedIndex = 4;
   NetMonitorView.toggleDetailsPane({ visible: true, animated: false }, 6);
 
-  is($("#event-details-pane").selectedIndex, 6,
+  is(document.querySelector("#event-details-pane").selectedIndex, 6,
     "The sixth tab in the details pane should be selected.");
-  is($("#preview-tab").hidden, false,
+  is(document.querySelector("#preview-tab").hidden, false,
     "The preview tab should be visible now.");
 
-  let iframe = $("#response-preview");
+  let iframe = document.querySelector("#preview-tabpanel iframe");
   yield once(iframe, "DOMContentLoaded");
 
   ok(iframe,
     "There should be a response preview iframe available.");
   ok(iframe.contentDocument,
     "The iframe's content document should be available.");
   is(iframe.contentDocument.querySelector("blink").textContent, "Not Found",
     "The iframe's content document should be loaded and correct.");
 
   RequestsMenu.selectedIndex = 5;
 
-  is($("#event-details-pane").selectedIndex, 0,
+  is(document.querySelector("#event-details-pane").selectedIndex, 0,
     "The first tab in the details pane should be selected again.");
-  is($("#preview-tab").hidden, true,
+  is(document.querySelector("#preview-tab").hidden, true,
     "The preview tab should be hidden again for non html responses.");
-  is($("#preview-tabpanel").hidden, false,
+  is(document.querySelector("#preview-tabpanel").hidden, false,
     "The preview tabpanel is not hidden again for non html responses.");
 
   yield teardown(monitor);
 });
--- a/devtools/client/netmonitor/test/browser_net_security-details.js
+++ b/devtools/client/netmonitor/test/browser_net_security-details.js
@@ -24,19 +24,16 @@ add_task(function* () {
 
   wait = waitForDOM(document, "#security-tabpanel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll("#details-pane tab")[5]);
   yield wait;
 
-  is(document.querySelector("#security-error"), null, "Error box is hidden.");
-  ok(document.querySelector("#security-information"), "Information box visible.");
-
   let tabpanel = document.querySelector("#security-tabpanel");
   let textboxes = tabpanel.querySelectorAll(".textbox-input");
 
   // Connection
   // The protocol will be TLS but the exact version depends on which protocol
   // the test server example.com supports.
   let protocol = textboxes[0].value;
   ok(protocol.startsWith("TLS"), "The protocol " + protocol + " seems valid.");
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -701,41 +701,26 @@
   color: var(--theme-selection-color);
 }
 
 .response-image-box {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  /* Minus 24px * 2 for toolbox height + tabpanel height + padding top + padding bottom  */
-  height: calc(100vh - 68px);
   overflow-y: auto;
   padding: 10px;
 }
 
 .response-image {
   background: #fff;
   border: 1px dashed GrayText;
   margin-bottom: 10px;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-/* Preview tabpanel */
-
-#preview-tabpanel {
-  background: #fff;
-}
-
-#response-preview {
-  border: none;
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-flex: 1;
+  max-width: 300px;
+  max-height: 100px;
 }
 
 /* Timings tabpanel */
 
 #timings-tabpanel .tabpanel-summary-container {
   display: flex;
 }
 
@@ -759,27 +744,26 @@
   transition: width 0.2s ease-out;
 }
 
 .theme-firebug #timings-tabpanel .requests-menu-timings-total {
   color: var(--theme-body-color);
 }
 
 /* Security tabpanel */
-.security-info-section {
-  padding-inline-start: 1em;
+
+/* Overwrite tree-view cell colon `:` for security panel and tree section */
+#security-tabpanel .treeTable .treeLabelCell::after,
+.treeTable .tree-section .treeLabelCell::after {
+  content: "";
 }
 
-.theme-dark #security-error-message {
-  color: var(--theme-selection-color);
-}
-
-#security-tabpanel {
-  overflow: auto;
-  -moz-user-select: text;
+/* Layout additional warning icon in tree value cell  */
+.security-info-value {
+  display: flex;
 }
 
 .security-warning-icon {
   background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
   margin-inline-start: 5px;
   vertical-align: top;
   width: 13px;
@@ -1072,27 +1056,16 @@
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
   :root[platform="linux"] .requests-menu-header-button {
     font-size: 85%;
   }
 }
 
-/* Overwrite tree-view cell colon `:` for security panel and tree section */
-#security-tabpanel .treeTable .treeLabelCell::after,
-.treeTable .tree-section .treeLabelCell::after {
-  content: "";
-}
-
-/* Layout additional warning icon in tree value cell  */
-.security-info-value {
-  display: flex;
-}
-
 .textbox-input {
   text-overflow: ellipsis;
   border: none;
   background: none;
   color: inherit;
   width: 100%;
 }
 
@@ -1140,17 +1113,17 @@
 .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% - 3px);
+  height: calc(100% - 4px);
 }
 
 .tree-container .treeTable tr {
   display: block;
 }
 
 /* Make right td fill available horizontal space */
 .tree-container .treeTable td:last-child {
@@ -1167,18 +1140,22 @@
 }
 
 .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:not(:last-child) td:not([class=""]) {
+.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,
@@ -1281,17 +1258,17 @@
 }
 
 .response-summary {
   display: flex;
 }
 
 .editor-container,
 .editor-mount,
-.editor-mount iframe {
+.panel-container iframe {
   border: none;
   width: 100%;
   height: 100%;
 }
 
 /*
  * FIXME: normal html block element cannot fill outer XUL element
  * This workaround should be removed after netmonitor is migrated to react