Bug 1428521 - Draw editor's horizontal scrollbar in Response panels r?gasolin draft
authorRicky Chien <ricky060709@gmail.com>
Sat, 06 Jan 2018 13:16:38 +0800
changeset 717164 7dff1590a822774f1bb02882389e370bdb58ddd8
parent 717028 739484451a6399c7f156a0d960335606aa6c1221
child 745175 be147cdf4a216feaa2aaa165743474be318cfa18
push id94586
push userbmo:rchien@mozilla.com
push dateMon, 08 Jan 2018 10:21:52 +0000
reviewersgasolin
bugs1428521
milestone59.0a1
Bug 1428521 - Draw editor's horizontal scrollbar in Response panels r?gasolin MozReview-Commit-ID: LK3TdfDCApo
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/test/browser_net_post-data-01.js
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -154,16 +154,17 @@
 /* If there is a source editor shows up in the last row of TreeView,
  * it should occupy the available vertical space.
  */
 .network-monitor .tree-container .treeTable .editor-row-container,
 .network-monitor .tree-container .treeTable tr:last-child td[colspan="2"] {
   display: block;
   height: 100%;
   flex: 1;
+  overflow-x: auto;
 }
 
 .network-monitor .source-editor-mount {
   width: 100%;
   height: 100%;
 }
 
 .network-monitor .headers-summary-label,
--- a/devtools/client/netmonitor/test/browser_net_post-data-01.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-01.js
@@ -6,17 +6,17 @@
 /**
  * Tests if the POST requests display the correct information in the UI.
  */
 
 add_task(function* () {
   let { L10N } = require("devtools/client/netmonitor/src/utils/l10n");
 
   // Set a higher panel height in order to get full CodeMirror content
-  Services.prefs.setIntPref("devtools.toolbox.footer.height", 400);
+  Services.prefs.setIntPref("devtools.toolbox.footer.height", 600);
 
   let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
   info("Starting test... ");
 
   let { document, store, windowRequire } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
   let {
     getDisplayedRequests,
@@ -134,17 +134,23 @@ add_task(function* () {
       is(values[3].textContent, "123", "The first post param value was incorrect.");
       is(labels[4].textContent, "foo", "The second post param name was incorrect.");
       is(values[4].textContent, "bar", "The second post param value was incorrect.");
     } else {
       checkVisibility("params editor");
 
       is(labels.length, 3, "There should be 3 param values displayed in this tabpanel.");
 
-      let text = document.querySelector(".CodeMirror-code").textContent;
+      // Collect code lines and combine into one text for checking
+      let text = "";
+      let lines = [...document.querySelectorAll(".CodeMirror-line")];
+
+      lines.forEach((line) => {
+        text += line.textContent + "\n";
+      });
 
       ok(text.includes("Content-Disposition: form-data; name=\"text\""),
         "The text shown in the source editor is incorrect (1.1).");
       ok(text.includes("Content-Disposition: form-data; name=\"email\""),
         "The text shown in the source editor is incorrect (2.1).");
       ok(text.includes("Content-Disposition: form-data; name=\"range\""),
         "The text shown in the source editor is incorrect (3.1).");
       ok(text.includes("Content-Disposition: form-data; name=\"Custom field\""),