diff --git a/devtools/client/webconsole/moz.build b/devtools/client/webconsole/moz.build index 20e3b6113be6..ac018a448308 100644 --- a/devtools/client/webconsole/moz.build +++ b/devtools/client/webconsole/moz.build @@ -24,8 +24,8 @@ DevToolsModules( 'types.js', 'utils.js', 'webconsole-connection-proxy.js', - 'webconsole-frame.js', 'webconsole-l10n.js', + 'webconsole-ui.js', 'webconsole-wrapper.js', 'webconsole.js', ) diff --git a/devtools/client/webconsole/panel.js b/devtools/client/webconsole/panel.js index 5f06851bdba8..77ad9bb371ea 100644 --- a/devtools/client/webconsole/panel.js +++ b/devtools/client/webconsole/panel.js @@ -59,7 +59,7 @@ WebConsolePanel.prototype = { this.hud = await HUDService.openWebConsole( this.target, webConsoleUIWindow, chromeWindow); - // Pipe 'reloaded' event from WebConsoleFrame to WebConsolePanel. + // Pipe 'reloaded' event from WebConsoleUI to WebConsolePanel. // These events are listened by the Toolbox. this.hud.ui.on("reloaded", () => { this.emit("reloaded"); diff --git a/devtools/client/webconsole/webconsole-connection-proxy.js b/devtools/client/webconsole/webconsole-connection-proxy.js index ea6dd25cef22..b0f68f5bd00a 100644 --- a/devtools/client/webconsole/webconsole-connection-proxy.js +++ b/devtools/client/webconsole/webconsole-connection-proxy.js @@ -17,13 +17,13 @@ const PREF_CONNECTION_TIMEOUT = "devtools.debugger.remote-timeout"; * and the application we connect to through the remote debug protocol. * * @constructor - * @param object webConsoleFrame - * The WebConsoleFrame object that owns this connection proxy. + * @param {WebConsoleUI} webConsoleUI + * A WebConsoleUI instance that owns this connection proxy. * @param RemoteTarget target * The target that the console will connect to. */ -function WebConsoleConnectionProxy(webConsoleFrame, target) { - this.webConsoleFrame = webConsoleFrame; +function WebConsoleConnectionProxy(webConsoleUI, target) { + this.webConsoleUI = webConsoleUI; this.target = target; this.webConsoleClient = target.activeConsole; @@ -44,12 +44,12 @@ function WebConsoleConnectionProxy(webConsoleFrame, target) { WebConsoleConnectionProxy.prototype = { /** - * The owning Web Console Frame instance. + * The owning WebConsoleUI instance. * - * @see WebConsoleFrame + * @see WebConsoleUI * @type object */ - webConsoleFrame: null, + webConsoleUI: null, /** * The target that the console connects to. @@ -135,7 +135,7 @@ WebConsoleConnectionProxy.prototype = { this.target.on("navigate", this._onTabNavigated); if (this.target.isBrowsingContext) { - this.webConsoleFrame.onLocationChange(this.target.url, this.target.title); + this.webConsoleUI.onLocationChange(this.target.url, this.target.title); } this.isAttached = this._attachConsole(); @@ -190,11 +190,11 @@ WebConsoleConnectionProxy.prototype = { // There is no way to view response bodies from the Browser Console, so do // not waste the memory. - if (this.webConsoleFrame.isBrowserConsole) { + if (this.webConsoleUI.isBrowserConsole) { saveBodies = false; } - this.webConsoleFrame.setSaveRequestAndResponseBodies(saveBodies); + this.webConsoleUI.setSaveRequestAndResponseBodies(saveBodies); this.webConsoleClient.on("networkEvent", this._onNetworkEvent); this.webConsoleClient.on("networkEventUpdate", this._onNetworkEventUpdate); @@ -202,33 +202,31 @@ WebConsoleConnectionProxy.prototype = { const msgs = ["PageError", "ConsoleAPI"]; const cachedMessages = await this.webConsoleClient.getCachedMessages(msgs); this._onCachedMessages(cachedMessages); - - this.webConsoleFrame._onUpdateListeners(); }, /** * Dispatch a message add on the new frontend and emit an event for tests. */ dispatchMessageAdd: function(packet) { - this.webConsoleFrame.wrapper.dispatchMessageAdd(packet); + this.webConsoleUI.wrapper.dispatchMessageAdd(packet); }, /** * Batched dispatch of messages. */ dispatchMessagesAdd: function(packets) { - this.webConsoleFrame.wrapper.dispatchMessagesAdd(packets); + this.webConsoleUI.wrapper.dispatchMessagesAdd(packets); }, /** * Dispatch a message event on the new frontend and emit an event for tests. */ dispatchMessageUpdate: function(networkInfo, response) { - this.webConsoleFrame.wrapper.dispatchMessageUpdate(networkInfo, response); + this.webConsoleUI.wrapper.dispatchMessageUpdate(networkInfo, response); }, dispatchRequestUpdate: function(id, data) { - this.webConsoleFrame.wrapper.dispatchRequestUpdate(id, data); + this.webConsoleUI.wrapper.dispatchRequestUpdate(id, data); }, /** @@ -258,7 +256,7 @@ WebConsoleConnectionProxy.prototype = { this.dispatchMessagesAdd(messages); if (!this.webConsoleClient.hasNativeConsoleAPI) { - await this.webConsoleFrame.logWarningAboutReplacedAPI(); + await this.webConsoleUI.logWarningAboutReplacedAPI(); } this.connected = true; @@ -276,7 +274,7 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onPageError: function(type, packet) { - if (!this.webConsoleFrame || packet.from != this.webConsoleClient.actor) { + if (!this.webConsoleUI || packet.from != this.webConsoleClient.actor) { return; } this.dispatchMessageAdd(packet); @@ -292,7 +290,7 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onLogMessage: function(type, packet) { - if (!this.webConsoleFrame || packet.from != this.webConsoleClient.actor) { + if (!this.webConsoleUI || packet.from != this.webConsoleClient.actor) { return; } this.dispatchMessageAdd(packet); @@ -308,14 +306,14 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onConsoleAPICall: function(type, packet) { - if (!this.webConsoleFrame || packet.from != this.webConsoleClient.actor) { + if (!this.webConsoleUI || packet.from != this.webConsoleClient.actor) { return; } this.dispatchMessageAdd(packet); }, _onVirtualConsoleLog: function(type, packet) { - if (!this.webConsoleFrame) { + if (!this.webConsoleUI) { return; } this.dispatchMessageAdd({ @@ -336,7 +334,7 @@ WebConsoleConnectionProxy.prototype = { * The network request information. */ _onNetworkEvent: function(networkInfo) { - if (!this.webConsoleFrame) { + if (!this.webConsoleUI) { return; } this.dispatchMessageAdd(networkInfo); @@ -350,7 +348,7 @@ WebConsoleConnectionProxy.prototype = { * The update response received from the server. */ _onNetworkEventUpdate: function(response) { - if (!this.webConsoleFrame) { + if (!this.webConsoleUI) { return; } this.dispatchMessageUpdate(response.networkInfo, response); @@ -366,8 +364,8 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onLastPrivateContextExited: function(type, packet) { - if (this.webConsoleFrame && packet.from == this.webConsoleClient.actor) { - this.webConsoleFrame.clearPrivateMessages(); + if (this.webConsoleUI && packet.from == this.webConsoleClient.actor) { + this.webConsoleUI.clearPrivateMessages(); } }, @@ -379,11 +377,11 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onTabNavigated: function(packet) { - if (!this.webConsoleFrame) { + if (!this.webConsoleUI) { return; } - this.webConsoleFrame.handleTabNavigated(packet); + this.webConsoleUI.handleTabNavigated(packet); }, /** @@ -394,11 +392,11 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onTabWillNavigate: function(packet) { - if (!this.webConsoleFrame) { + if (!this.webConsoleUI) { return; } - this.webConsoleFrame.handleTabWillNavigate(packet); + this.webConsoleUI.handleTabWillNavigate(packet); }, /** @@ -451,7 +449,7 @@ WebConsoleConnectionProxy.prototype = { this.webConsoleClient = null; this.target = null; this.connected = false; - this.webConsoleFrame = null; + this.webConsoleUI = null; this._disconnecter.resolve(null); return this._disconnecter.promise; diff --git a/devtools/client/webconsole/webconsole-frame.js b/devtools/client/webconsole/webconsole-ui.js similarity index 88% rename from devtools/client/webconsole/webconsole-frame.js rename to devtools/client/webconsole/webconsole-ui.js index ccfb85bc309f..d882b716771a 100644 --- a/devtools/client/webconsole/webconsole-frame.js +++ b/devtools/client/webconsole/webconsole-ui.js @@ -23,40 +23,40 @@ const PREF_MESSAGE_TIMESTAMP = "devtools.webconsole.timestampMessages"; const PREF_SIDEBAR_ENABLED = "devtools.webconsole.sidebarToggle"; /** - * A WebConsoleFrame instance is an interactive console initialized *per target* + * A WebConsoleUI instance is an interactive console initialized *per target* * that displays console log data as well as provides an interactive terminal to * manipulate the target's document content. * - * The WebConsoleFrame is responsible for the actual Web Console UI + * The WebConsoleUI is responsible for the actual Web Console UI * implementation. - * - * @constructor - * @param object webConsoleOwner - * The WebConsole owner object. */ -function WebConsoleFrame(webConsoleOwner) { - this.owner = webConsoleOwner; - this.hudId = this.owner.hudId; - this.isBrowserConsole = this.owner._browserConsole; - this.window = this.owner.iframeWindow; +class WebConsoleUI { + /* + * @param {object} webConsoleOwner: The WebConsole owner object. + */ + constructor(webConsoleOwner) { + this.owner = webConsoleOwner; + this.hudId = this.owner.hudId; + this.isBrowserConsole = this.owner._browserConsole; + this.window = this.owner.iframeWindow; - this._onToolboxPrefChanged = this._onToolboxPrefChanged.bind(this); - this._onPanelSelected = this._onPanelSelected.bind(this); - this._onChangeSplitConsoleState = this._onChangeSplitConsoleState.bind(this); + this._onToolboxPrefChanged = this._onToolboxPrefChanged.bind(this); + this._onPanelSelected = this._onPanelSelected.bind(this); + this._onChangeSplitConsoleState = this._onChangeSplitConsoleState.bind(this); + + EventEmitter.decorate(this); + } - EventEmitter.decorate(this); -} -WebConsoleFrame.prototype = { /** * Getter for the debugger WebConsoleClient. * @type object */ get webConsoleClient() { return this.proxy ? this.proxy.webConsoleClient : null; - }, + } /** - * Initialize the WebConsoleFrame instance. + * Initialize the WebConsoleUI instance. * @return object * A promise object that resolves once the frame is ready to use. */ @@ -72,7 +72,8 @@ WebConsoleFrame.prototype = { if (Services.obs) { Services.obs.notifyObservers(id, "web-console-created"); } - }, + } + destroy() { if (this._destroyer) { return this._destroyer.promise; @@ -105,7 +106,7 @@ WebConsoleFrame.prototype = { } return this._destroyer.promise; - }, + } /** * Clear the Web Console output. @@ -125,7 +126,7 @@ WebConsoleFrame.prototype = { this.webConsoleClient.clearMessagesCache(); } this.emit("messages-cleared"); - }, + } /** * Remove all of the private messages from the Web Console output. @@ -137,7 +138,7 @@ WebConsoleFrame.prototype = { this.wrapper.dispatchPrivateMessagesClear(); this.emit("private-messages-cleared"); } - }, + } inspectObjectActor(objectActor) { this.wrapper.dispatchMessageAdd({ @@ -147,20 +148,12 @@ WebConsoleFrame.prototype = { }, }, true); return this.wrapper; - }, - - _onUpdateListeners() { - - }, + } logWarningAboutReplacedAPI() { return this.owner.target.logWarningInPage(l10n.getStr("ConsoleAPIDisabled"), "ConsoleAPIDisabled"); - }, - - handleNetworkEventUpdate() { - - }, + } /** * Setter for saving of network request and response bodies. @@ -181,7 +174,7 @@ WebConsoleFrame.prototype = { // Make sure the web console client connection is established first. return this.webConsoleClient.setPreferences(toSet); - }, + } /** * Connect to the server using the remote debugging protocol. @@ -191,7 +184,7 @@ WebConsoleFrame.prototype = { * A promise object that is resolved/reject based on the connection * result. */ - _initConnection: function() { + _initConnection() { if (this._initDefer) { return this._initDefer.promise; } @@ -209,9 +202,9 @@ WebConsoleFrame.prototype = { }); return this._initDefer.promise; - }, + } - _initUI: function() { + _initUI() { this.document = this.window.document; this.rootElement = this.document.documentElement; @@ -230,9 +223,9 @@ WebConsoleFrame.prototype = { toolbox.on("split-console", this._onChangeSplitConsoleState); toolbox.on("select", this._onChangeSplitConsoleState); } - }, + } - _initOutputSyntaxHighlighting: function() { + _initOutputSyntaxHighlighting() { // Given a DOM node, we syntax highlight identically to how the input field // looks. See https://codemirror.net/demo/runmode.html; const syntaxHighlightNode = node => { @@ -254,9 +247,9 @@ WebConsoleFrame.prototype = { } } }); - }, + } - _initShortcuts: function() { + _initShortcuts() { const shortcuts = new KeyShortcuts({ window: this.window, }); @@ -294,7 +287,7 @@ WebConsoleFrame.prototype = { } }); } - }, + } /** * Handler for page location changes. @@ -304,12 +297,12 @@ WebConsoleFrame.prototype = { * @param string title * New page title. */ - onLocationChange: function(uri, title) { + onLocationChange(uri, title) { this.contentLocation = uri; if (this.owner.onLocationChange) { this.owner.onLocationChange(uri, title); } - }, + } /** * Release an actor. @@ -318,32 +311,32 @@ WebConsoleFrame.prototype = { * @param string actor * The actor ID you want to release. */ - _releaseObject: function(actor) { + _releaseObject(actor) { if (this.proxy) { this.proxy.releaseActor(actor); } - }, + } /** * Called when the message timestamp pref changes. */ - _onToolboxPrefChanged: function() { + _onToolboxPrefChanged() { const newValue = Services.prefs.getBoolPref(PREF_MESSAGE_TIMESTAMP); this.wrapper.dispatchTimestampsToggle(newValue); - }, + } /** * Sets the focus to JavaScript input field when the web console tab is * selected or when there is a split console present. * @private */ - _onPanelSelected: function() { + _onPanelSelected() { this.jsterm.focus(); - }, + } - _onChangeSplitConsoleState: function() { + _onChangeSplitConsoleState() { this.wrapper.dispatchSplitConsoleCloseButtonToggle(); - }, + } /** * Handler for the tabNavigated notification. @@ -353,7 +346,7 @@ WebConsoleFrame.prototype = { * @param object packet * Notification packet received from the server. */ - handleTabNavigated: async function(packet) { + async handleTabNavigated(packet) { if (packet.url) { this.onLocationChange(packet.url, packet.title); } @@ -366,15 +359,15 @@ WebConsoleFrame.prototype = { // is fully updated after a page reload await this.wrapper.waitAsyncDispatches(); this.emit("reloaded"); - }, + } - handleTabWillNavigate: function(packet) { + handleTabWillNavigate(packet) { this.wrapper.dispatchTabWillNavigate(packet); if (packet.url) { this.onLocationChange(packet.url, packet.title); } - }, -}; + } +} /* This is the same as DevelopmentHelpers.quickRestart, but it runs in all * builds (even official). This allows a user to do a restart + session restore @@ -389,4 +382,4 @@ function quickRestart() { Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart); } -exports.WebConsoleFrame = WebConsoleFrame; +exports.WebConsoleUI = WebConsoleUI; diff --git a/devtools/client/webconsole/webconsole.js b/devtools/client/webconsole/webconsole.js index d6eaa7635faf..0817f497cd00 100644 --- a/devtools/client/webconsole/webconsole.js +++ b/devtools/client/webconsole/webconsole.js @@ -6,7 +6,7 @@ var Services = require("Services"); loader.lazyRequireGetter(this, "Utils", "devtools/client/webconsole/utils", true); -loader.lazyRequireGetter(this, "WebConsoleFrame", "devtools/client/webconsole/webconsole-frame", true); +loader.lazyRequireGetter(this, "WebConsoleUI", "devtools/client/webconsole/webconsole-ui", true); loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true); loader.lazyRequireGetter(this, "viewSource", "devtools/client/shared/view-source"); loader.lazyRequireGetter(this, "openDocLink", "devtools/client/shared/link", true); @@ -44,7 +44,7 @@ function WebConsole(target, iframeWindow, chromeWindow, hudService) { if (element.getAttribute("windowtype") != gDevTools.chromeWindowType) { this.browserWindow = this.hudService.currentContext(); } - this.ui = new WebConsoleFrame(this); + this.ui = new WebConsoleUI(this); } WebConsole.prototype = { @@ -115,8 +115,8 @@ WebConsole.prototype = { }, /** - * Alias for the WebConsoleFrame.setFilterState() method. - * @see webconsole.js::WebConsoleFrame.setFilterState() + * Alias for the WebConsoleUI.setFilterState() method. + * @see webconsole.js::WebConsoleUI.setFilterState() */ setFilterState() { this.ui && this.ui.setFilterState.apply(this.ui, arguments);