Bug 1353319 - Make SourceEditor flex when next to an HTML preview. r=Honza
authorBrandon Cheng <brandon.cheng@protonmail.com>
Sat, 28 Oct 2017 23:33:22 -0400
changeset 436009 edbc03f93f6a03fcc376cae723b0c6ed12228616
parent 436008 4bab59d6b58f2edc7d8052300ea4c8a762cb108a
child 436010 64bd4d75004d2af2256ad76f4f23c50e2d7ffe8c
push id117
push userfmarier@mozilla.com
push dateTue, 28 Nov 2017 20:17:16 +0000
reviewersHonza
bugs1353319
milestone58.0a1
Bug 1353319 - Make SourceEditor flex when next to an HTML preview. r=Honza MozReview-Commit-ID: 71sq86ka2ZL
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/src/components/ResponsePanel.js
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -271,16 +271,25 @@
 
 .network-monitor .html-preview iframe {
   background-color: #fff;
   border: none;
   height: 100%;
   width: 100%;
 }
 
+/* The editor container should only become a flex item when inside a container
+ * with other flex items. In this case, the HTML preview is a flex item and we
+ * can grow the editor. Otherwise, there may be overflow and
+ * .editor-row-container will become 0px tall. */
+.network-monitor .contains-html-preview .editor-row-container {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Timings tabpanel */
 
 .network-monitor .timings-container {
   display: flex;
 }
 
 .network-monitor .timings-label {
   width: 10em;
--- a/devtools/client/netmonitor/src/components/ResponsePanel.js
+++ b/devtools/client/netmonitor/src/components/ResponsePanel.js
@@ -188,18 +188,23 @@ class ResponsePanel extends Component {
     // Others like text/html, text/plain, application/javascript
     object[RESPONSE_PAYLOAD] = {
       EDITOR_CONFIG: {
         text,
         mode: json ? "application/json" : mimeType.replace(/;.+/, ""),
       },
     };
 
+    let classList = ["panel-container"];
+    if (Filters.html(this.props.request)) {
+      classList.push("contains-html-preview");
+    }
+
     return (
-      div({ className: "panel-container" },
+      div({ className: classList.join(" ") },
         error && div({ className: "response-error-header", title: error },
           error
         ),
         PropertiesView({
           object,
           filterPlaceHolder: JSON_FILTER_TEXT,
           sectionNames: Object.keys(object),
           openLink,