Bug 1332151 - Fix layout issues for network monitor sidebar panels r?honza draft
authorRicky Chien <rchien@mozilla.com>
Thu, 19 Jan 2017 15:36:00 +0800
changeset 463594 fe3695b74235783c2f231f41c4a84230148aceb7
parent 463342 96cb95af530477edb66ae48d98c18533476e57bb
child 542733 4a5f934064acffcb9df75dbb5729b5421094af7c
push id42127
push userbmo:rchien@mozilla.com
push dateThu, 19 Jan 2017 13:17:45 +0000
reviewershonza
bugs1332151
milestone53.0a1
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
@@ -47,16 +47,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