Bug 1551870 - Reintroduce netmonitor-toolbar-container in single-toolbar mode so React doesn't re-render the toolbar when switching panels. r=Honza a=jcristau
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 07 Jun 2019 02:00:36 +0300
changeset 536738 5ae78f2863c680529abed3a69bde02e25cafa8ee
parent 536737 24e1c29b04c69fc6c6411c43cd9c42e60199c597
child 536739 3b4af55e6edc19cd481737216fd5616d28bb61b0
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, jcristau
bugs1551870
milestone68.0
Bug 1551870 - Reintroduce netmonitor-toolbar-container in single-toolbar mode so React doesn't re-render the toolbar when switching panels. r=Honza a=jcristau Reviewers: Honza Reviewed By: Honza Subscribers: reviewbot Bug #: 1551870 Differential Revision: https://phabricator.services.mozilla.com/D33616
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/components/Toolbar.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net_filter-value-preserved.js
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -4,17 +4,16 @@
 
 /* Toolbar */
 
 .devtools-toolbar {
   display: flex;
   align-items: center;
 }
 
-#netmonitor-main-toolbar,
 #netmonitor-toolbar-container > .devtools-toolbar {
   /* @TODO: Remove this in bug 1535956 */
   min-height: var(--primary-toolbar-height);
 }
 
 .requests-list-filter-buttons {
   white-space: nowrap;
   margin: 0 7px;
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -384,33 +384,32 @@ class Toolbar extends Component {
       browserCacheDisabled,
       recording,
       singleRow,
     } = this.props;
 
     // Render the entire toolbar.
     // dock at bottom or dock at side has different layout
     return singleRow ? (
-      span({
-        id: "netmonitor-main-toolbar",
-        className: "devtools-toolbar devtools-input-toolbar",
-      },
-        this.renderClearButton(clearRequests),
-        this.renderSeparator(),
-        this.renderFilterBox(setRequestFilterText),
-        this.renderSeparator(),
-        this.renderToggleRecordingButton(recording, toggleRecording),
-        this.renderSeparator(),
-        this.renderFilterButtons(requestFilterTypes),
-        this.renderSeparator(),
-        this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
-        this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
-        this.renderSeparator(),
-        this.renderThrottlingMenu(),
-        this.renderHarButton(),
+      span({ id: "netmonitor-toolbar-container" },
+        span({ className: "devtools-toolbar devtools-input-toolbar" },
+          this.renderClearButton(clearRequests),
+          this.renderSeparator(),
+          this.renderFilterBox(setRequestFilterText),
+          this.renderSeparator(),
+          this.renderToggleRecordingButton(recording, toggleRecording),
+          this.renderSeparator(),
+          this.renderFilterButtons(requestFilterTypes),
+          this.renderSeparator(),
+          this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
+          this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
+          this.renderSeparator(),
+          this.renderThrottlingMenu(),
+          this.renderHarButton(),
+        )
       )
     ) : (
       span({ id: "netmonitor-toolbar-container" },
         span({ className: "devtools-toolbar devtools-input-toolbar" },
           this.renderClearButton(clearRequests),
           this.renderSeparator(),
           this.renderFilterBox(setRequestFilterText),
           this.renderSeparator(),
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -137,16 +137,17 @@ skip-if = (os == 'mac') || (os == 'win' 
 [browser_net_edit_resend_with_filtering.js]
 [browser_net_edit_resend_xhr.js]
 [browser_net_filter-01.js]
 [browser_net_filter-02.js]
 [browser_net_filter-03.js]
 [browser_net_filter-04.js]
 [browser_net_filter-autocomplete.js]
 [browser_net_filter-flags.js]
+[browser_net_filter-value-preserved.js]
 [browser_net_footer-summary.js]
 [browser_net_header-ref-policy.js]
 [browser_net_decode-url.js]
 [browser_net_decode-params.js]
 [browser_net_headers-alignment.js]
 [browser_net_headers_filter.js]
 [browser_net_headers_sorted.js]
 [browser_net_headers-resize.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_filter-value-preserved.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that filter input keeps its value when host or panel changes
+ */
+
+add_task(async function() {
+  const { monitor } = await initNetMonitor(FILTERING_URL);
+  const { document, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  info("Starting test... ");
+
+  const toolbars = document.querySelector("#netmonitor-toolbar-container");
+  let input = toolbars.querySelector(".devtools-filterinput");
+  input.value = "hello";
+
+  await monitor.toolbox.switchHost("right");
+
+  is(toolbars.querySelectorAll(".devtools-toolbar").length,
+     2, "Should be in 2 toolbar mode");
+
+  input = toolbars.querySelector(".devtools-filterinput");
+  is(input.value, "hello", "Value should be preserved after switching to right host");
+
+  await monitor.toolbox.switchHost("bottom");
+
+  input = toolbars.querySelector(".devtools-filterinput");
+  is(input.value, "hello", "Value should be preserved after switching to bottom host");
+
+  await monitor.toolbox.selectTool("inspector");
+  await monitor.toolbox.selectTool("netmonitor");
+
+  input = toolbars.querySelector(".devtools-filterinput");
+  is(input.value, "hello", "Value should be preserved after switching tools");
+
+  await teardown(monitor);
+});