forked from mirrors/gecko-dev
102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
/* 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/. */
|
|
|
|
/* eslint-disable mozilla/reject-some-requires */
|
|
/* globals $, gStore, NetMonitorController */
|
|
|
|
"use strict";
|
|
|
|
const { RequestsMenuView } = require("./requests-menu-view");
|
|
const { ACTIVITY_TYPE } = require("./constants");
|
|
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);
|
|
|
|
// Components
|
|
const NetworkDetailsPanel = createFactory(require("./shared/components/network-details-panel"));
|
|
const StatisticsPanel = createFactory(require("./components/statistics-panel"));
|
|
const Toolbar = createFactory(require("./components/toolbar"));
|
|
|
|
/**
|
|
* Object defining the network monitor view components.
|
|
*/
|
|
var NetMonitorView = {
|
|
/**
|
|
* Initializes the network monitor view.
|
|
*/
|
|
initialize: function () {
|
|
this._body = $("#body");
|
|
|
|
this.networkDetailsPanel = $("#react-network-details-panel-hook");
|
|
|
|
ReactDOM.render(Provider(
|
|
{ store: gStore },
|
|
NetworkDetailsPanel({ toolbox: NetMonitorController._toolbox }),
|
|
), this.networkDetailsPanel);
|
|
|
|
this.statisticsPanel = $("#react-statistics-panel-hook");
|
|
|
|
ReactDOM.render(Provider(
|
|
{ store: gStore },
|
|
StatisticsPanel(),
|
|
), this.statisticsPanel);
|
|
|
|
this.toolbar = $("#react-toolbar-hook");
|
|
|
|
ReactDOM.render(Provider(
|
|
{ store: gStore },
|
|
Toolbar(),
|
|
), this.toolbar);
|
|
|
|
this.RequestsMenu.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.RequestsMenu.destroy();
|
|
ReactDOM.unmountComponentAtNode(this.networkDetailsPanel);
|
|
ReactDOM.unmountComponentAtNode(this.statisticsPanel);
|
|
ReactDOM.unmountComponentAtNode(this.toolbar);
|
|
this.unsubscribeStore();
|
|
},
|
|
|
|
toggleFrontendMode: function () {
|
|
if (gStore.getState().ui.statisticsOpen) {
|
|
this._body.selectedPanel = $("#react-statistics-panel-hook");
|
|
NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
|
|
} else {
|
|
this._body.selectedPanel = $("#inspector-panel");
|
|
}
|
|
},
|
|
};
|
|
|
|
// A smart store watcher to notify store changes as necessary
|
|
function storeWatcher(initialValue, reduceValue, onChange) {
|
|
let currentValue = initialValue;
|
|
|
|
return () => {
|
|
const newValue = reduceValue();
|
|
if (newValue !== currentValue) {
|
|
onChange();
|
|
currentValue = newValue;
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Preliminary setup for the NetMonitorView object.
|
|
*/
|
|
NetMonitorView.RequestsMenu = new RequestsMenuView();
|
|
|
|
exports.NetMonitorView = NetMonitorView;
|