deleted file mode 100644
--- a/devtools/client/netmonitor/components/clear-button.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* 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 } = 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 } = DOM;
-
-/*
- * Clear button component
- * A type of tool button is responsible for cleaning network requests.
- */
-function ClearButton({ onClick }) {
- return button({
- id: "requests-menu-clear-button",
- className: "devtools-button devtools-clear-icon",
- title: L10N.getStr("netmonitor.toolbar.clear"),
- onClick,
- });
-}
-
-module.exports = connect(
- undefined,
- dispatch => ({
- onClick: () => dispatch(Actions.clearRequests())
- })
-)(ClearButton);
deleted file mode 100644
--- a/devtools/client/netmonitor/components/filter-buttons.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* 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({
- requestFilterTypes,
- toggleRequestFilterType,
-}) {
- const buttons = requestFilterTypes.entrySeq().map(([type, checked]) => {
- let classList = ["menu-filter-button"];
- checked && classList.push("checked");
-
- return button({
- id: `requests-menu-filter-${type}-button`,
- key: type,
- className: classList.join(" "),
- "data-key": type,
- onClick: toggleRequestFilterType,
- onKeyDown: toggleRequestFilterType,
- }, L10N.getStr(`netmonitor.toolbar.filter.${type}`));
- }).toArray();
-
- return div({ id: "requests-menu-filter-buttons" }, buttons);
-}
-
-FilterButtons.propTypes = {
- requestFilterTypes: PropTypes.object.isRequired,
- toggleRequestFilterType: PropTypes.func.isRequired,
-};
-
-module.exports = connect(
- (state) => ({ requestFilterTypes: state.filters.requestFilterTypes }),
- (dispatch) => ({
- toggleRequestFilterType: (evt) => {
- if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
- return;
- }
- dispatch(Actions.toggleRequestFilterType(evt.target.dataset.key));
- },
- })
-)(FilterButtons);
--- a/devtools/client/netmonitor/components/moz.build
+++ b/devtools/client/netmonitor/components/moz.build
@@ -1,18 +1,13 @@
# 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(
- 'clear-button.js',
- 'filter-buttons.js',
'request-list-content.js',
'request-list-empty.js',
'request-list-header.js',
'request-list-item.js',
'request-list-tooltip.js',
'request-list.js',
- 'search-box.js',
- 'summary-button.js',
- 'toggle-button.js',
'toolbar.js',
)
deleted file mode 100644
--- a/devtools/client/netmonitor/components/search-box.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* 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 { FILTER_SEARCH_DELAY } = require("../constants");
-
-module.exports = connect(
- (state) => ({
- delay: FILTER_SEARCH_DELAY,
- keyShortcut: L10N.getStr("netmonitor.toolbar.filterFreetext.key"),
- placeholder: L10N.getStr("netmonitor.toolbar.filterFreetext.label"),
- type: "filter",
- }),
- (dispatch) => ({
- onChange: (text) => dispatch(Actions.setRequestFilterText(text)),
- })
-)(SearchBox);
deleted file mode 100644
--- a/devtools/client/netmonitor/components/summary-button.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/* 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 { PluralForm } = require("devtools/shared/plural-form");
-const { L10N } = require("../l10n");
-const { getDisplayedRequestsSummary } = require("../selectors/index");
-const Actions = require("../actions/index");
-const {
- getSizeWithDecimals,
- getTimeWithDecimals,
-} = require("../utils/format-utils");
-
-const { button, span } = DOM;
-
-function SummaryButton({
- summary,
- triggerSummary,
-}) {
- let { count, bytes, millis } = summary;
- const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
- PluralForm.get(count, L10N.getStr("networkMenu.summary"))
- .replace("#1", count)
- .replace("#2", getSizeWithDecimals(bytes / 1024))
- .replace("#3", getTimeWithDecimals(millis / 1000));
-
- return button({
- id: "requests-menu-network-summary-button",
- className: "devtools-button",
- title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
- onClick: triggerSummary,
- },
- span({ className: "summary-info-icon" }),
- span({ className: "summary-info-text" }, text));
-}
-
-SummaryButton.propTypes = {
- summary: PropTypes.object.isRequired,
-};
-
-module.exports = connect(
- (state) => ({
- summary: getDisplayedRequestsSummary(state),
- }),
- (dispatch) => ({
- triggerSummary: () => {
- dispatch(Actions.openStatistics(true));
- },
- })
-)(SummaryButton);
deleted file mode 100644
--- a/devtools/client/netmonitor/components/toggle-button.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* 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 { isSidebarToggleButtonDisabled } = require("../selectors/index");
-
-const { button } = DOM;
-
-function ToggleButton({
- disabled,
- open,
- onToggle,
-}) {
- let className = ["devtools-button"];
- if (!open) {
- className.push("pane-collapsed");
- }
-
- const title = open ? L10N.getStr("collapseDetailsPane") :
- L10N.getStr("expandDetailsPane");
-
- return button({
- id: "details-pane-toggle",
- className: className.join(" "),
- title,
- disabled,
- tabIndex: "0",
- onMouseDown: onToggle,
- });
-}
-
-ToggleButton.propTypes = {
- disabled: PropTypes.bool.isRequired,
- onToggle: PropTypes.func.isRequired,
-};
-
-module.exports = connect(
- (state) => ({
- disabled: isSidebarToggleButtonDisabled(state),
- open: state.ui.sidebarOpen,
- }),
- (dispatch) => ({
- onToggle: () => dispatch(Actions.toggleSidebar())
- })
-)(ToggleButton);
--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -2,36 +2,155 @@
* 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,
DOM,
+ PropTypes,
} = require("devtools/client/shared/vendor/react");
-const ClearButton = createFactory(require("./clear-button"));
-const FilterButtons = createFactory(require("./filter-buttons"));
-const ToolbarSearchBox = createFactory(require("./search-box"));
-const SummaryButton = createFactory(require("./summary-button"));
-const ToggleButton = createFactory(require("./toggle-button"));
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { PluralForm } = require("devtools/shared/plural-form");
+const Actions = require("../actions/index");
+const { L10N } = require("../l10n");
+const {
+ getDisplayedRequestsSummary,
+ isSidebarToggleButtonDisabled,
+} = require("../selectors/index");
+const {
+ getSizeWithDecimals,
+ getTimeWithDecimals,
+} = require("../utils/format-utils");
+const { FILTER_SEARCH_DELAY } = require("../constants");
-const { span } = DOM;
+// Components
+const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
+
+const { button, div, span } = DOM;
+
+const COLLPASE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
+const EXPAND_DETAILS_PANE = L10N.getStr("expandDetailsPane");
+const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key");
+const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
+const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
/*
* Network monitor toolbar component
* Toolbar contains a set of useful tools to control network requests
*/
-function Toolbar() {
- return span({ className: "devtools-toolbar devtools-toolbar-container" },
- span({ className: "devtools-toolbar-group" },
- ClearButton(),
- FilterButtons()
- ),
- span({ className: "devtools-toolbar-group" },
- SummaryButton(),
- ToolbarSearchBox(),
- ToggleButton()
+function Toolbar({
+ clearRequests,
+ openStatistics,
+ requestFilterTypes,
+ setRequestFilterText,
+ sidebarToggleDisabled,
+ sidebarOpen,
+ summary,
+ toggleRequestFilterType,
+ toggleSidebar,
+}) {
+ let toggleButtonClassName = ["devtools-button"];
+ if (!sidebarOpen) {
+ toggleButtonClassName.push("pane-collapsed");
+ }
+
+ let { count, bytes, millis } = summary;
+ const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
+ PluralForm.get(count, L10N.getStr("networkMenu.summary"))
+ .replace("#1", count)
+ .replace("#2", getSizeWithDecimals(bytes / 1024))
+ .replace("#3", getTimeWithDecimals(millis / 1000));
+
+ const buttons = requestFilterTypes.entrySeq().map(([type, checked]) => {
+ let classList = ["menu-filter-button"];
+ checked && classList.push("checked");
+
+ return (
+ button({
+ id: `requests-menu-filter-${type}-button`,
+ key: type,
+ className: classList.join(" "),
+ "data-key": type,
+ onClick: toggleRequestFilterType,
+ onKeyDown: toggleRequestFilterType,
+ },
+ L10N.getStr(`netmonitor.toolbar.filter.${type}`)
+ )
+ );
+ }).toArray();
+
+ return (
+ span({ className: "devtools-toolbar devtools-toolbar-container" },
+ span({ className: "devtools-toolbar-group" },
+ button({
+ id: "requests-menu-clear-button",
+ className: "devtools-button devtools-clear-icon",
+ title: TOOLBAR_CLEAR,
+ onClick: clearRequests,
+ }),
+ div({ id: "requests-menu-filter-buttons" }, buttons),
+ ),
+ span({ className: "devtools-toolbar-group" },
+ button({
+ id: "requests-menu-network-summary-button",
+ className: "devtools-button",
+ title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
+ onClick: openStatistics,
+ },
+ span({ className: "summary-info-icon" }),
+ span({ className: "summary-info-text" }, text),
+ ),
+ SearchBox({
+ delay: FILTER_SEARCH_DELAY,
+ keyShortcut: SEARCH_KEY_SHORTCUT,
+ placeholder: SEARCH_PLACE_HOLDER,
+ type: "filter",
+ onChange: setRequestFilterText,
+ }),
+ button({
+ id: "details-pane-toggle",
+ className: toggleButtonClassName.join(" "),
+ title: sidebarOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
+ disabled: sidebarToggleDisabled,
+ tabIndex: "0",
+ onMouseDown: toggleSidebar,
+ }),
+ )
)
);
}
-module.exports = Toolbar;
+Toolbar.displayName = "Toolbar";
+
+Toolbar.propTypes = {
+ clearRequests: PropTypes.func.isRequired,
+ openStatistics: PropTypes.func.isRequired,
+ requestFilterTypes: PropTypes.object.isRequired,
+ setRequestFilterText: PropTypes.func.isRequired,
+ sidebarToggleDisabled: PropTypes.bool.isRequired,
+ sidebarOpen: PropTypes.bool.isRequired,
+ summary: PropTypes.object.isRequired,
+ toggleRequestFilterType: PropTypes.func.isRequired,
+ toggleSidebar: PropTypes.func.isRequired,
+};
+
+module.exports = connect(
+ (state) => ({
+ sidebarToggleDisabled: isSidebarToggleButtonDisabled(state),
+ sidebarOpen: state.ui.sidebarOpen,
+ requestFilterTypes: state.filters.requestFilterTypes,
+ summary: getDisplayedRequestsSummary(state),
+ }),
+ (dispatch) => ({
+ clearRequests: () => dispatch(Actions.clearRequests()),
+ openStatistics: () => dispatch(Actions.openStatistics(true)),
+ setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
+ toggleRequestFilterType: (evt) => {
+ if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
+ return;
+ }
+ dispatch(Actions.toggleRequestFilterType(evt.target.dataset.key));
+ },
+ toggleSidebar: () => dispatch(Actions.toggleSidebar()),
+ })
+)(Toolbar);
--- a/devtools/client/netmonitor/moz.build
+++ b/devtools/client/netmonitor/moz.build
@@ -25,16 +25,15 @@ DevToolsModules(
'prefs.js',
'request-list-context-menu.js',
'request-utils.js',
'requests-menu-view.js',
'sidebar-view.js',
'sort-predicates.js',
'statistics-view.js',
'store.js',
- 'toolbar-view.js',
'waterfall-background.js',
)
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
with Files('**'):
BUG_COMPONENT = ('Firefox', 'Developer Tools: Netmonitor')
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -7,26 +7,28 @@
"use strict";
const { testing: isTesting } = require("devtools/shared/flags");
const { Task } = require("devtools/shared/task");
const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
const { RequestsMenuView } = require("./requests-menu-view");
const { CustomRequestView } = require("./custom-request-view");
-const { ToolbarView } = require("./toolbar-view");
const { SidebarView } = require("./sidebar-view");
const { StatisticsView } = require("./statistics-view");
const { ACTIVITY_TYPE } = require("./constants");
const { Prefs } = require("./prefs");
const { createFactory } = require("devtools/client/shared/vendor/react");
const Actions = require("./actions/index");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
+
+// Components
const DetailsPanel = createFactory(require("./shared/components/details-panel"));
+const Toolbar = createFactory(require("./components/toolbar"));
// ms
const WDA_DEFAULT_VERIFY_INTERVAL = 50;
// Use longer timeout during testing as the tests need this process to succeed
// and two seconds is quite short on slow debug builds. The timeout here should
// be at least equal to the general mochitest timeout of 45 seconds so that this
// never gets hit during testing.
@@ -38,47 +40,53 @@ const WDA_DEFAULT_GIVE_UP_TIMEOUT = isTe
*/
var NetMonitorView = {
/**
* Initializes the network monitor view.
*/
initialize: function () {
this._initializePanes();
- this.Toolbar.initialize(gStore);
- this.RequestsMenu.initialize(gStore);
- this.CustomRequest.initialize();
- this.Statistics.initialize(gStore);
-
this.detailsPanel = $("#react-details-panel-hook");
ReactDOM.render(Provider(
{ store: gStore },
DetailsPanel({ toolbox: NetMonitorController._toolbox }),
), this.detailsPanel);
+ this.toolbar = $("#react-toolbar-hook");
+
+ ReactDOM.render(Provider(
+ { store: gStore },
+ Toolbar(),
+ ), this.toolbar);
+
+ this.RequestsMenu.initialize(gStore);
+ this.CustomRequest.initialize();
+ this.Statistics.initialize(gStore);
+
// Store watcher here is for observing the statisticsOpen state change.
// It should be removed once we migrate to react and apply react/redex binding.
this.unsubscribeStore = gStore.subscribe(storeWatcher(
false,
() => gStore.getState().ui.statisticsOpen,
this.toggleFrontendMode.bind(this)
));
},
/**
* Destroys the network monitor view.
*/
destroy: function () {
this._isDestroyed = true;
- this.Toolbar.destroy();
this.RequestsMenu.destroy();
this.CustomRequest.destroy();
this.Statistics.destroy();
ReactDOM.unmountComponentAtNode(this.detailsPanel);
+ ReactDOM.unmountComponentAtNode(this.toolbar);
this.unsubscribeStore();
this._destroyPanes();
},
/**
* Initializes the UI for all the displayed panes.
*/
@@ -260,15 +268,14 @@ function storeWatcher(initialValue, redu
currentValue = newValue;
}
};
}
/**
* Preliminary setup for the NetMonitorView object.
*/
-NetMonitorView.Toolbar = new ToolbarView();
NetMonitorView.Sidebar = new SidebarView();
NetMonitorView.RequestsMenu = new RequestsMenuView();
NetMonitorView.CustomRequest = new CustomRequestView();
NetMonitorView.Statistics = new StatisticsView();
exports.NetMonitorView = NetMonitorView;
deleted file mode 100644
--- a/devtools/client/netmonitor/toolbar-view.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* 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 dumpn, $ */
-
-"use strict";
-
-const { createFactory } = require("devtools/client/shared/vendor/react");
-const ReactDOM = require("devtools/client/shared/vendor/react-dom");
-const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
-const Toolbar = createFactory(require("./components/toolbar"));
-
-/**
- * Functions handling the toolbar view: expand/collapse button etc.
- */
-function ToolbarView() {
- dumpn("ToolbarView was instantiated");
-}
-
-ToolbarView.prototype = {
- /**
- * Initialization function, called when the network monitor is started.
- */
- initialize: function (store) {
- dumpn("Initializing the ToolbarView");
-
- this._toolbarNode = $("#react-toolbar-hook");
-
- ReactDOM.render(Provider(
- { store },
- Toolbar()
- ), this._toolbarNode);
- },
-
- /**
- * Destruction function, called when the network monitor is closed.
- */
- destroy: function () {
- dumpn("Destroying the ToolbarView");
-
- ReactDOM.unmountComponentAtNode(this._toolbarNode);
- }
-
-};
-
-exports.ToolbarView = ToolbarView;