import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

devtools/client/netmonitor/components/filter-buttons.js

@@ -0,0 +1,49 @@
+/* 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 } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+
+const { button, div } = DOM;
+
+function FilterButtons({
+  filterTypes,
+  triggerFilterType,
+}) {
+  const buttons = filterTypes.entrySeq().map(([type, checked]) => {
+    let classList = ["menu-filter-button"];
+    checked && classList.push("checked");
+
+    return button({
+      id: `requests-menu-filter-${type}-button`,
+      className: classList.join(" "),
+      "data-key": type,
+      onClick: triggerFilterType,
+      onKeyDown: triggerFilterType,
+      "aria-pressed": checked,
+    }, L10N.getStr(`netmonitor.toolbar.filter.${type}`));
+  }).toArray();
+
+  return div({ id: "requests-menu-filter-buttons" }, buttons);
+}
+
+FilterButtons.PropTypes = {
+  state: PropTypes.object.isRequired,
+  triggerFilterType: PropTypes.func.iRequired,
+};
+
+module.exports = connect(
+  (state) => ({ filterTypes: state.filters.types }),
+  (dispatch) => ({
+    triggerFilterType: (evt) => {
+      if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
+        return;
+      }
+      dispatch(Actions.toggleFilterType(evt.target.dataset.key));
+    },
+  })
+)(FilterButtons);

devtools/client/netmonitor/components/moz.build

@@ -0,0 +1,10 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'filter-buttons.js',
+    'search-box.js',
+    'toggle-button.js',
+)

devtools/client/netmonitor/components/search-box.js

@@ -0,0 +1,24 @@
+/* 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 { connect } = require("devtools/client/shared/vendor/react-redux");
+const SearchBox = require("devtools/client/shared/components/search-box");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+const { FREETEXT_FILTER_SEARCH_DELAY } = require("../constants");
+
+module.exports = connect(
+  (state) => ({
+    delay: FREETEXT_FILTER_SEARCH_DELAY,
+    keyShortcut: L10N.getStr("netmonitor.toolbar.filterFreetext.key"),
+    placeholder: L10N.getStr("netmonitor.toolbar.filterFreetext.label"),
+    type: "filter",
+  }),
+  (dispatch) => ({
+    onChange: (url) => {
+      dispatch(Actions.setFilterText(url));
+    },
+  })
+)(SearchBox);

devtools/client/netmonitor/components/toggle-button.js

@@ -0,0 +1,69 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+/* globals NetMonitorView */
+"use strict";
+
+const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+
+// Shortcuts
+const { button } = DOM;
+
+/**
+ * Button used to toggle sidebar
+ */
+function ToggleButton({
+  disabled,
+  onToggle,
+  visible,
+}) {
+  let className = ["devtools-button"];
+  if (!visible) {
+    className.push("pane-collapsed");
+  }
+  let titleMsg = visible ? L10N.getStr("collapseDetailsPane") :
+                           L10N.getStr("expandDetailsPane");
+
+  return button({
+    id: "details-pane-toggle",
+    className: className.join(" "),
+    title: titleMsg,
+    disabled: disabled,
+    tabIndex: "0",
+    onMouseDown: onToggle,
+  });
+}
+
+ToggleButton.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+};
+
+module.exports = connect(
+  (state) => ({
+    disabled: state.sidebar.toggleButtonDisabled,
+    visible: state.sidebar.visible,
+  }),
+  (dispatch) => ({
+    onToggle: () => {
+      dispatch(Actions.toggleSidebar());
+
+      let requestsMenu = NetMonitorView.RequestsMenu;
+      let selectedIndex = requestsMenu.selectedIndex;
+
+      // Make sure there's a selection if the button is pressed, to avoid
+      // showing an empty network details pane.
+      if (selectedIndex == -1 && requestsMenu.itemCount) {
+        requestsMenu.selectedIndex = 0;
+      } else {
+        requestsMenu.selectedIndex = -1;
+      }
+    },
+  })
+)(ToggleButton);