Bug 1003153 - Add keyboard shortcut to hide sidebar. r=Honza
authorDhyey Thakore <dhyey35@gmail.com>
Wed, 03 Apr 2019 12:51:53 +0000
changeset 467774 d021cea258c726b6a3bca41eab30bda959967aeb
parent 467773 a3b68989fb59cf0c0a29d95f3955ee8239b2c51b
child 467775 b8484c4d2e849ddabf314bc425407570b219b503
push id112658
push useraciure@mozilla.com
push dateThu, 04 Apr 2019 04:41:45 +0000
treeherdermozilla-inbound@a36718c8163e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1003153
milestone68.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 1003153 - Add keyboard shortcut to hide sidebar. r=Honza Differential Revision: https://phabricator.services.mozilla.com/D22129
devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
devtools/client/netmonitor/src/components/TabboxPanel.js
devtools/client/netmonitor/test/browser_net_simple-request-details.js
--- a/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
+++ b/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
@@ -27,16 +27,17 @@ const { div } = dom;
 function NetworkDetailsPanel({
   connector,
   activeTabId,
   cloneSelectedRequest,
   request,
   selectTab,
   sourceMapService,
   toggleNetworkDetails,
+  openNetworkDetails,
   openLink,
 }) {
   if (!request) {
     return null;
   }
 
   return (
     div({ className: "network-details-panel" },
@@ -45,16 +46,17 @@ function NetworkDetailsPanel({
           activeTabId,
           cloneSelectedRequest,
           connector,
           openLink,
           request,
           selectTab,
           sourceMapService,
           toggleNetworkDetails,
+          openNetworkDetails,
         }) :
         CustomRequestPanel({
           connector,
           request,
         })
     )
   );
 }
@@ -77,10 +79,11 @@ module.exports = connect(
   (state) => ({
     activeTabId: state.ui.detailsPanelSelectedTab,
     request: getSelectedRequest(state),
   }),
   (dispatch) => ({
     cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
     selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
     toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
+    openNetworkDetails: (open) => dispatch(Actions.openNetworkDetails(open)),
   }),
 )(NetworkDetailsPanel);
--- a/devtools/client/netmonitor/src/components/TabboxPanel.js
+++ b/devtools/client/netmonitor/src/components/TabboxPanel.js
@@ -1,15 +1,18 @@
 /* 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 { createFactory } = require("devtools/client/shared/vendor/react");
+const {
+  Component,
+  createFactory,
+} = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N } = require("../utils/l10n");
 const { PANELS } = require("../constants");
 
 // Components
 const Tabbar = createFactory(require("devtools/client/shared/components/tabs/TabBar"));
 const TabPanel = createFactory(require("devtools/client/shared/components/tabs/Tabs").TabPanel);
 const CookiesPanel = createFactory(require("./CookiesPanel"));
@@ -27,126 +30,148 @@ const COOKIES_TITLE = L10N.getStr("netmo
 const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
 const PARAMS_TITLE = L10N.getStr("netmonitor.tab.params");
 const RESPONSE_TITLE = L10N.getStr("netmonitor.tab.response");
 const SECURITY_TITLE = L10N.getStr("netmonitor.tab.security");
 const STACK_TRACE_TITLE = L10N.getStr("netmonitor.tab.stackTrace");
 const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
 
 /**
- * Tabbox panel component
- * Display the network request details
- */
-function TabboxPanel({
-  activeTabId,
-  cloneSelectedRequest = () => {},
-  connector,
-  hideToggleButton,
-  openLink,
-  request,
-  selectTab,
-  sourceMapService,
-  toggleNetworkDetails,
-}) {
-  if (!request) {
-    return null;
+* Tabbox panel component
+* Display the network request details
+*/
+class TabboxPanel extends Component {
+  static get propTypes() {
+    return {
+      activeTabId: PropTypes.string,
+      cloneSelectedRequest: PropTypes.func,
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object,
+      selectTab: PropTypes.func.isRequired,
+      sourceMapService: PropTypes.object,
+      hideToggleButton: PropTypes.bool,
+      toggleNetworkDetails: PropTypes.func.isRequired,
+      openNetworkDetails: PropTypes.func.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    this.closeOnEscRef = this.closeOnEsc.bind(this);
+    window.addEventListener("keydown", this.closeOnEscRef);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.closeOnEscRef);
+  }
+
+  closeOnEsc(event) {
+    if (event.key == "Escape") {
+      event.preventDefault();
+      this.props.openNetworkDetails(false);
+    }
   }
 
-  return (
-    Tabbar({
+  render() {
+    const {
       activeTabId,
-      menuDocument: window.parent.document,
-      onSelect: selectTab,
-      renderOnlySelected: true,
-      showAllTabsMenu: true,
-      sidebarToggleButton: hideToggleButton ? null :
-      {
-        collapsed: false,
-        collapsePaneTitle: COLLAPSE_DETAILS_PANE,
-        expandPaneTitle: "",
-        onClick: toggleNetworkDetails,
-      },
-    },
-      TabPanel({
-        id: PANELS.HEADERS,
-        title: HEADERS_TITLE,
-      },
-        HeadersPanel({
-          cloneSelectedRequest,
-          connector,
-          openLink,
-          request,
-        }),
-      ),
-      TabPanel({
-        id: PANELS.COOKIES,
-        title: COOKIES_TITLE,
-      },
-        CookiesPanel({
-          connector,
-          openLink,
-          request,
-        }),
-      ),
-      TabPanel({
-        id: PANELS.PARAMS,
-        title: PARAMS_TITLE,
+      cloneSelectedRequest = () => {},
+      connector,
+      hideToggleButton,
+      openLink,
+      request,
+      selectTab,
+      sourceMapService,
+      toggleNetworkDetails,
+    } = this.props;
+
+    if (!request) {
+      return null;
+    }
+
+    return (
+      Tabbar({
+        activeTabId,
+        menuDocument: window.parent.document,
+        onSelect: selectTab,
+        renderOnlySelected: true,
+        showAllTabsMenu: true,
+        sidebarToggleButton: hideToggleButton ? null :
+        {
+          collapsed: false,
+          collapsePaneTitle: COLLAPSE_DETAILS_PANE,
+          expandPaneTitle: "",
+          onClick: toggleNetworkDetails,
+        },
       },
-        ParamsPanel({ connector, openLink, request }),
-      ),
-      TabPanel({
-        id: PANELS.RESPONSE,
-        title: RESPONSE_TITLE,
-      },
-        ResponsePanel({ request, openLink, connector }),
-      ),
-      (request.fromCache || request.status == "304") &&
-      TabPanel({
-        id: PANELS.CACHE,
-        title: CACHE_TITLE,
-      },
-        CachePanel({ request, openLink, connector }),
-      ),
-      TabPanel({
-        id: PANELS.TIMINGS,
-        title: TIMINGS_TITLE,
-      },
-        TimingsPanel({
-          connector,
-          request,
-        }),
-      ),
-      request.cause && request.cause.stacktraceAvailable &&
-      TabPanel({
-        id: PANELS.STACK_TRACE,
-        title: STACK_TRACE_TITLE,
-      },
-        StackTracePanel({ connector, openLink, request, sourceMapService }),
-      ),
-      request.securityState && request.securityState !== "insecure" &&
-      TabPanel({
-        id: PANELS.SECURITY,
-        title: SECURITY_TITLE,
-      },
-        SecurityPanel({
-          connector,
-          openLink,
-          request,
-        }),
-      ),
-    )
-  );
+        TabPanel({
+          id: PANELS.HEADERS,
+          title: HEADERS_TITLE,
+        },
+          HeadersPanel({
+            cloneSelectedRequest,
+            connector,
+            openLink,
+            request,
+          }),
+        ),
+        TabPanel({
+          id: PANELS.COOKIES,
+          title: COOKIES_TITLE,
+        },
+          CookiesPanel({
+            connector,
+            openLink,
+            request,
+          }),
+        ),
+        TabPanel({
+          id: PANELS.PARAMS,
+          title: PARAMS_TITLE,
+        },
+          ParamsPanel({ connector, openLink, request }),
+        ),
+        TabPanel({
+          id: PANELS.RESPONSE,
+          title: RESPONSE_TITLE,
+        },
+          ResponsePanel({ request, openLink, connector }),
+        ),
+        (request.fromCache || request.status == "304") &&
+        TabPanel({
+          id: PANELS.CACHE,
+          title: CACHE_TITLE,
+        },
+          CachePanel({ request, openLink, connector }),
+        ),
+        TabPanel({
+          id: PANELS.TIMINGS,
+          title: TIMINGS_TITLE,
+        },
+          TimingsPanel({
+            connector,
+            request,
+          }),
+        ),
+        request.cause && request.cause.stacktraceAvailable &&
+        TabPanel({
+          id: PANELS.STACK_TRACE,
+          title: STACK_TRACE_TITLE,
+        },
+          StackTracePanel({ connector, openLink, request, sourceMapService }),
+        ),
+        request.securityState && request.securityState !== "insecure" &&
+        TabPanel({
+          id: PANELS.SECURITY,
+          title: SECURITY_TITLE,
+        },
+          SecurityPanel({
+            connector,
+            openLink,
+            request,
+          }),
+        ),
+      )
+    );
+  }
 }
 
-TabboxPanel.displayName = "TabboxPanel";
-
-TabboxPanel.propTypes = {
-  activeTabId: PropTypes.string,
-  cloneSelectedRequest: PropTypes.func,
-  connector: PropTypes.object.isRequired,
-  openLink: PropTypes.func,
-  request: PropTypes.object,
-  selectTab: PropTypes.func.isRequired,
-  sourceMapService: PropTypes.object,
-  hideToggleButton: PropTypes.bool,
-};
-
 module.exports = TabboxPanel;
--- a/devtools/client/netmonitor/test/browser_net_simple-request-details.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-details.js
@@ -47,16 +47,17 @@ add_task(async function() {
 
   await waitForHeaders;
 
   await testHeadersTab();
   await testCookiesTab();
   await testParamsTab();
   await testResponseTab();
   await testTimingsTab();
+  await closePanelOnEsc();
   return teardown(monitor);
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
@@ -247,9 +248,21 @@ add_task(async function() {
     EventUtils.sendMouseEvent({ type: "click" }, tabEl);
     await onPanelOpen;
 
     is(tabEl.getAttribute("aria-selected"), "true",
       `The ${tabName} tab in the network details pane should be selected.`);
 
     return document.querySelector(".network-details-panel .tab-panel");
   }
+
+  // This test will timeout on failure
+  async function closePanelOnEsc() {
+    EventUtils.sendKey("ESCAPE", window);
+
+    await waitUntil(() => {
+      return document.querySelector(".network-details-panel") == null;
+    });
+
+    is(document.querySelectorAll(".network-details-panel").length, 0,
+      "Network details panel should close on ESC key");
+  }
 });