Bug 1527834 - Rename WebConsoleWrapper:hud to WebConsoleWrapper:webConsoleUI; r=bgrins.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 15 Feb 2019 08:17:43 +0000
changeset 459537 13913068fd8efff684283670f417ca638df08aad
parent 459536 613d3e6bc2c00401196cf5c6fc7320bcc8a2ad84
child 459538 b1ac22673987e759400e5fd2fb56bd8fb119aa55
push id111964
push usercsabou@mozilla.com
push dateFri, 15 Feb 2019 18:54:44 +0000
treeherdermozilla-inbound@db3c4f905082 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1527834
milestone67.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 1527834 - Rename WebConsoleWrapper:hud to WebConsoleWrapper:webConsoleUI; r=bgrins. This better reflects what the property is (i.e. a WebConsoleUI instance), and avoid confusion with the panel's hud (created in webconsole.js). We take that as an opportunity to clean things up a bit (e.g. don't access the webConsoleUI through JsTerm). Differential Revision: https://phabricator.services.mozilla.com/D19783
browser/components/extensions/test/browser/browser_ext_devtools_inspectedWindow_eval_bindings.js
devtools/client/shared/webpack/shims/jsterm-stub.js
devtools/client/webconsole/components/App.js
devtools/client/webconsole/components/ConfirmDialog.js
devtools/client/webconsole/components/ConsoleOutput.js
devtools/client/webconsole/components/ConsoleTable.js
devtools/client/webconsole/components/FilterBar.js
devtools/client/webconsole/components/GripMessageBody.js
devtools/client/webconsole/components/JSTerm.js
devtools/client/webconsole/components/ReverseSearchInput.js
devtools/client/webconsole/enhancers/actor-releaser.js
devtools/client/webconsole/enhancers/css-error-reporting.js
devtools/client/webconsole/enhancers/message-cache-clearing.js
devtools/client/webconsole/enhancers/net-provider.js
devtools/client/webconsole/store.js
devtools/client/webconsole/test/fixtures/serviceContainer.js
devtools/client/webconsole/test/fixtures/stub-generators/head.js
devtools/client/webconsole/test/mochitest/browser_console.js
devtools/client/webconsole/test/mochitest/browser_jsterm_selfxss.js
devtools/client/webconsole/test/mochitest/browser_webconsole_network_attach.js
devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js
devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_status_code.js
devtools/client/webconsole/test/mochitest/head.js
devtools/client/webconsole/utils/context-menu.js
devtools/client/webconsole/webconsole-wrapper.js
--- a/browser/components/extensions/test/browser/browser_ext_devtools_inspectedWindow_eval_bindings.js
+++ b/browser/components/extensions/test/browser/browser_ext_devtools_inspectedWindow_eval_bindings.js
@@ -105,24 +105,23 @@ add_task(async function test_devtools_in
   await inspectorPanelSelectedPromise;
   info("Toolbox has been switched to the inspector as expected");
 
   info("Test inspectedWindow.eval inspect() binding called for a JS object");
 
   const splitPanelOpenedPromise = (async () => {
     await toolbox.once("split-console");
     const {hud} = toolbox.getPanel("webconsole");
-    let {jsterm} = hud;
 
     // Wait for the message to appear on the console.
     const messageNode = await new Promise(resolve => {
-      jsterm.hud.on("new-messages", function onThisMessage(messages) {
+      hud.ui.on("new-messages", function onThisMessage(messages) {
         for (let m of messages) {
           resolve(m.node);
-          jsterm.hud.off("new-messages", onThisMessage);
+          hud.ui.off("new-messages", onThisMessage);
           return;
         }
       });
     });
     let objectInspectors = [...messageNode.querySelectorAll(".tree")];
     is(objectInspectors.length, 1, "There is the expected number of object inspectors");
 
     // We need to wait for the object to be expanded so we don't call the server on a closed connection.
--- a/devtools/client/shared/webpack/shims/jsterm-stub.js
+++ b/devtools/client/shared/webpack/shims/jsterm-stub.js
@@ -1,19 +1,19 @@
 /* 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 { ConsoleCommand } = require("devtools/client/webconsole/types");
 
-function JSTerm(webConsoleFrame) {
-  this.hud = webConsoleFrame;
-  this.hudId = this.hud.hudId;
+function JSTerm(webConsoleUI) {
+  this.ui = webConsoleUI;
+  this.hudId = this.ui.hudId;
   this.historyLoaded = new Promise(r => {
     r();
   });
 }
 
 JSTerm.prototype = {
   SELECTED_FRAME: -1,
 
@@ -67,31 +67,31 @@ JSTerm.prototype = {
       executeString = executeString || this.getInputValue();
       if (!executeString) {
         return;
       }
 
       const message = new ConsoleCommand({
         messageText: executeString,
       });
-      this.hud.proxy.dispatchMessageAdd(message);
+      this.ui.proxy.dispatchMessageAdd(message);
 
       let selectedNodeActor = null;
-      const inspectorSelection = this.hud.owner.getInspectorSelection();
+      const inspectorSelection = this.ui.owner.getInspectorSelection();
       if (inspectorSelection && inspectorSelection.nodeFront) {
         selectedNodeActor = inspectorSelection.nodeFront.actorID;
       }
 
       const onResult = (response) => {
         if (response.error) {
           console.error("Evaluation error " + response.error + ": " +
                         response.message);
           return;
         }
-        this.hud.wrapper.dispatchMessageAdd(response, true).then(resolve);
+        this.ui.wrapper.dispatchMessageAdd(response, true).then(resolve);
       };
 
       const options = {
         frame: this.SELECTED_FRAME,
         selectedNodeActor: selectedNodeActor,
       };
 
       this.requestEvaluation(executeString, options).then(onResult, onResult);
@@ -142,17 +142,17 @@ JSTerm.prototype = {
    * Retrieve the FrameActor ID given a frame depth.
    *
    * @param number frame
    *        Frame depth.
    * @return string|null
    *         The FrameActor ID for the given frame depth.
    */
   getFrameActor(frame) {
-    const state = this.hud.owner.getDebuggerFrames();
+    const state = this.ui.owner.getDebuggerFrames();
     if (!state) {
       return null;
     }
 
     let grip;
     if (frame == this.SELECTED_FRAME) {
       grip = state.frames[state.selected];
     } else {
--- a/devtools/client/webconsole/components/App.js
+++ b/devtools/client/webconsole/components/App.js
@@ -34,19 +34,19 @@ const { div } = dom;
 const isMacOS = Services.appinfo.OS === "Darwin";
 
 /**
  * Console root Application component.
  */
 class App extends Component {
   static get propTypes() {
     return {
-      attachRefToHud: PropTypes.func.isRequired,
+      attachRefToWebConsoleUI: PropTypes.func.isRequired,
       dispatch: PropTypes.func.isRequired,
-      hud: PropTypes.object.isRequired,
+      webConsoleUI: PropTypes.object.isRequired,
       notifications: PropTypes.object,
       onFirstMeaningfulPaint: PropTypes.func.isRequired,
       serviceContainer: PropTypes.object.isRequired,
       closeSplitConsole: PropTypes.func.isRequired,
       jstermCodeMirror: PropTypes.bool,
       currentReverseSearchEntry: PropTypes.string,
       reverseSearchInputVisible: PropTypes.bool,
       reverseSearchInitialValue: PropTypes.string,
@@ -59,35 +59,35 @@ class App extends Component {
     this.onClick = this.onClick.bind(this);
     this.onPaste = this.onPaste.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
   onKeyDown(event) {
     const {
       dispatch,
-      hud,
+      webConsoleUI,
     } = this.props;
 
     if (
       (!isMacOS && event.key === "F9") ||
       (isMacOS && event.key === "r" && event.ctrlKey === true)
     ) {
-      const initialValue = hud.jsterm && hud.jsterm.getSelectedText();
+      const initialValue = webConsoleUI.jsterm && webConsoleUI.jsterm.getSelectedText();
       dispatch(actions.reverseSearchInputToggle({initialValue}));
       event.stopPropagation();
     }
   }
 
   onClick(event) {
     const target = event.originalTarget || event.target;
     const {
       reverseSearchInputVisible,
       dispatch,
-      hud,
+      webConsoleUI,
     } = this.props;
 
     if (reverseSearchInputVisible === true && !target.closest(".reverse-search")) {
       event.preventDefault();
       event.stopPropagation();
       dispatch(actions.reverseSearchInputToggle());
       return;
     }
@@ -114,40 +114,40 @@ class App extends Component {
 
     // Do not focus if something other than the output region was clicked
     // (including e.g. the clear messages button in toolbar)
     if (!target.closest(".webconsole-app")) {
       return;
     }
 
     // Do not focus if something is selected
-    const selection = hud.document.defaultView.getSelection();
+    const selection = webConsoleUI.document.defaultView.getSelection();
     if (selection && !selection.isCollapsed) {
       return;
     }
 
-    if (hud && hud.jsterm) {
-      hud.jsterm.focus();
+    if (webConsoleUI && webConsoleUI.jsterm) {
+      webConsoleUI.jsterm.focus();
     }
   }
 
   onPaste(event) {
     const {
       dispatch,
-      hud,
+      webConsoleUI,
       notifications,
     } = this.props;
 
     const {
       usageCount,
       CONSOLE_ENTRY_THRESHOLD,
     } = WebConsoleUtils;
 
     // Bail out if self-xss notification is suppressed.
-    if (hud.isBrowserConsole || usageCount >= CONSOLE_ENTRY_THRESHOLD) {
+    if (webConsoleUI.isBrowserConsole || usageCount >= CONSOLE_ENTRY_THRESHOLD) {
       return;
     }
 
     // Stop event propagation, so the clipboard content is *not* inserted.
     event.preventDefault();
     event.stopPropagation();
 
     // Bail out if self-xss notification is already there.
@@ -187,18 +187,18 @@ class App extends Component {
 
     input.addEventListener("keyup", pasteKeyUpHandler);
   }
 
   // Rendering
 
   render() {
     const {
-      attachRefToHud,
-      hud,
+      attachRefToWebConsoleUI,
+      webConsoleUI,
       notifications,
       onFirstMeaningfulPaint,
       serviceContainer,
       closeSplitConsole,
       jstermCodeMirror,
       reverseSearchInitialValue,
     } = this.props;
 
@@ -220,46 +220,44 @@ class App extends Component {
         className: classNames.join(" "),
         onKeyDown: this.onKeyDown,
         onClick: this.onClick,
         ref: node => {
           this.node = node;
         }},
         div({className: "webconsole-flex-wrapper"},
           FilterBar({
-            hidePersistLogsCheckbox: hud.isBrowserConsole,
-            serviceContainer: {
-              attachRefToHud,
-            },
+            hidePersistLogsCheckbox: webConsoleUI.isBrowserConsole,
+            attachRefToWebConsoleUI,
             closeSplitConsole,
           }),
           ConsoleOutput({
             serviceContainer,
             onFirstMeaningfulPaint,
           }),
           NotificationBox({
             id: "webconsole-notificationbox",
             notifications,
           }),
           JSTerm({
-            hud,
+            webConsoleUI,
             serviceContainer,
             onPaste: this.onPaste,
             codeMirrorEnabled: jstermCodeMirror,
           }),
           ReverseSearchInput({
-            hud,
+            webConsoleUI,
             initialValue: reverseSearchInitialValue,
           })
         ),
         SideBar({
           serviceContainer,
         }),
         ConfirmDialog({
-          hud,
+          webConsoleUI,
           serviceContainer,
           codeMirrorEnabled: jstermCodeMirror,
         }),
       )
     );
   }
 }
 
--- a/devtools/client/webconsole/components/ConfirmDialog.js
+++ b/devtools/client/webconsole/components/ConfirmDialog.js
@@ -25,57 +25,57 @@ const utmParams = new URLSearchParams({
 });
 const LEARN_MORE_URL =
   `https://developer.mozilla.org/docs/Tools/Web_Console/Invoke_getters_from_autocomplete?${utmParams}`;
 
 class ConfirmDialog extends Component {
   static get propTypes() {
     return {
       // Console object.
-      hud: PropTypes.object.isRequired,
+      webConsoleUI: PropTypes.object.isRequired,
       // Update autocomplete popup state.
       autocompleteUpdate: PropTypes.func.isRequired,
       autocompleteClear: PropTypes.func.isRequired,
       // Data to be displayed in the confirm dialog.
       getterPath: PropTypes.array,
       serviceContainer: PropTypes.object.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
-    const { hud } = props;
-    hud.confirmDialog = this;
+    const { webConsoleUI } = props;
+    webConsoleUI.confirmDialog = this;
 
     this.cancel = this.cancel.bind(this);
     this.confirm = this.confirm.bind(this);
     this.onLearnMoreClick = this.onLearnMoreClick.bind(this);
   }
 
   componentDidMount() {
-    const doc = this.props.hud.document;
-    const toolbox = gDevTools.getToolbox(this.props.hud.owner.target);
+    const doc = this.props.webConsoleUI.document;
+    const toolbox = gDevTools.getToolbox(this.props.webConsoleUI.owner.target);
     const tooltipDoc = toolbox ? toolbox.doc : doc;
     // The popup will be attached to the toolbox document or HUD document in the case
     // such as the browser console which doesn't have a toolbox.
     this.tooltip = new HTMLTooltip(tooltipDoc, {
       className: "invoke-confirm",
     });
   }
 
   componentDidUpdate() {
     const {getterPath, serviceContainer} = this.props;
 
     if (getterPath) {
       this.tooltip.show(serviceContainer.getJsTermTooltipAnchor(), {y: 5});
       this.tooltip.focus();
     } else {
       this.tooltip.hide();
-      this.props.hud.jsterm.focus();
+      this.props.webConsoleUI.jsterm.focus();
     }
   }
 
   componentDidThrow(e) {
     console.error("Error in ConfirmDialog", e);
     this.setState(state => ({...state, hasError: true}));
   }
 
--- a/devtools/client/webconsole/components/ConsoleOutput.js
+++ b/devtools/client/webconsole/components/ConsoleOutput.js
@@ -45,17 +45,17 @@ function getClosestMessage(visibleMessag
 
 class ConsoleOutput extends Component {
   static get propTypes() {
     return {
       initialized: PropTypes.bool.isRequired,
       messages: PropTypes.object.isRequired,
       messagesUi: PropTypes.array.isRequired,
       serviceContainer: PropTypes.shape({
-        attachRefToHud: PropTypes.func.isRequired,
+        attachRefToWebConsoleUI: PropTypes.func.isRequired,
         openContextMenu: PropTypes.func.isRequired,
         sourceMapService: PropTypes.object,
       }),
       dispatch: PropTypes.func.isRequired,
       timestampsVisible: PropTypes.bool,
       messagesTableData: PropTypes.object.isRequired,
       messagesRepeat: PropTypes.object.isRequired,
       networkMessagesUpdate: PropTypes.object.isRequired,
@@ -69,28 +69,33 @@ class ConsoleOutput extends Component {
   constructor(props) {
     super(props);
     this.onContextMenu = this.onContextMenu.bind(this);
     this.maybeScrollToBottom = this.maybeScrollToBottom.bind(this);
   }
 
   componentDidMount() {
     scrollToBottom(this.outputNode);
-    this.props.serviceContainer.attachRefToHud("outputScroller", this.outputNode);
+    const {
+      serviceContainer,
+      onFirstMeaningfulPaint,
+      dispatch,
+    } = this.props;
+    serviceContainer.attachRefToWebConsoleUI("outputScroller", this.outputNode);
 
     // Waiting for the next paint.
     new Promise(res => requestAnimationFrame(res))
       .then(() => {
-        if (this.props.onFirstMeaningfulPaint) {
-          this.props.onFirstMeaningfulPaint();
+        if (onFirstMeaningfulPaint) {
+          onFirstMeaningfulPaint();
         }
 
         // Dispatching on next tick so we don't block on action execution.
         setTimeout(() => {
-          this.props.dispatch(initialize());
+          dispatch(initialize());
         }, 0);
       });
   }
 
   componentWillUpdate(nextProps, nextState) {
     const outputNode = this.outputNode;
     if (!outputNode || !outputNode.lastChild) {
       // Force a scroll to bottom when messages are added to an empty console.
--- a/devtools/client/webconsole/components/ConsoleTable.js
+++ b/devtools/client/webconsole/components/ConsoleTable.js
@@ -17,17 +17,17 @@ const TABLE_ROW_MAX_ITEMS = 1000;
 const TABLE_COLUMN_MAX_ITEMS = 10;
 
 class ConsoleTable extends Component {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
       parameters: PropTypes.array.isRequired,
       serviceContainer: PropTypes.shape({
-        hudProxy: PropTypes.object.isRequired,
+        proxy: PropTypes.object.isRequired,
       }),
       id: PropTypes.string.isRequired,
       tableData: PropTypes.object,
     };
   }
 
   constructor(props) {
     super(props);
@@ -37,17 +37,17 @@ class ConsoleTable extends Component {
 
   componentWillMount() {
     const {id, dispatch, serviceContainer, parameters} = this.props;
 
     if (!Array.isArray(parameters) || parameters.length === 0) {
       return;
     }
 
-    const client = new ObjectClient(serviceContainer.hudProxy.client, parameters[0]);
+    const client = new ObjectClient(serviceContainer.proxy.client, parameters[0]);
     const dataType = getParametersDataType(parameters);
 
     // Get all the object properties.
     dispatch(actions.messageTableDataGet(id, client, dataType));
   }
 
   getHeaders(columns) {
     const headerItems = [];
--- a/devtools/client/webconsole/components/FilterBar.js
+++ b/devtools/client/webconsole/components/FilterBar.js
@@ -22,19 +22,17 @@ const FilterCheckbox = require("devtools
 
 loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");
 
 class FilterBar extends Component {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
       filter: PropTypes.object.isRequired,
-      serviceContainer: PropTypes.shape({
-        attachRefToHud: PropTypes.func.isRequired,
-      }).isRequired,
+      attachRefToWebConsoleUI: PropTypes.func.isRequired,
       filterBarVisible: PropTypes.bool.isRequired,
       persistLogs: PropTypes.bool.isRequired,
       hidePersistLogsCheckbox: PropTypes.bool.isRequired,
       filteredMessagesCount: PropTypes.object.isRequired,
       closeButtonVisible: PropTypes.bool,
       closeSplitConsole: PropTypes.func,
     };
   }
@@ -52,17 +50,17 @@ class FilterBar extends Component {
     this.onClickRemoveTextFilter = this.onClickRemoveTextFilter.bind(this);
     this.onSearchInput = this.onSearchInput.bind(this);
     this.onChangePersistToggle = this.onChangePersistToggle.bind(this);
     this.renderFiltersConfigBar = this.renderFiltersConfigBar.bind(this);
     this.renderFilteredMessagesBar = this.renderFilteredMessagesBar.bind(this);
   }
 
   componentDidMount() {
-    this.props.serviceContainer.attachRefToHud(
+    this.props.attachRefToWebConsoleUI(
       "filterBox",
       this.wrapperNode.querySelector(".text-filter")
     );
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     const {
       filter,
--- a/devtools/client/webconsole/components/GripMessageBody.js
+++ b/devtools/client/webconsole/components/GripMessageBody.js
@@ -23,17 +23,16 @@ GripMessageBody.displayName = "GripMessa
 GripMessageBody.propTypes = {
   grip: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
     PropTypes.object,
   ]).isRequired,
   serviceContainer: PropTypes.shape({
     createElement: PropTypes.func.isRequired,
-    hudProxy: PropTypes.object.isRequired,
     onViewSourceInDebugger: PropTypes.func.isRequired,
   }),
   userProvidedStyle: PropTypes.string,
   useQuotes: PropTypes.bool,
   escapeWhitespace: PropTypes.bool,
   type: PropTypes.string,
   helperType: PropTypes.string,
   maybeScrollToBottom: PropTypes.func,
--- a/devtools/client/webconsole/components/JSTerm.js
+++ b/devtools/client/webconsole/components/JSTerm.js
@@ -49,35 +49,31 @@ const {
   HISTORY_BACK,
   HISTORY_FORWARD,
 } = require("devtools/client/webconsole/constants");
 
 /**
  * Create a JSTerminal (a JavaScript command line). This is attached to an
  * existing HeadsUpDisplay (a Web Console instance). This code is responsible
  * with handling command line input and code evaluation.
- *
- * @constructor
- * @param object webConsoleFrame
- *        The WebConsoleFrame object that owns this JSTerm instance.
  */
 class JSTerm extends Component {
   static get propTypes() {
     return {
       // Append new executed expression into history list (action).
       appendToHistory: PropTypes.func.isRequired,
       // Remove all entries from the history list (action).
       clearHistory: PropTypes.func.isRequired,
       // Returns previous or next value from the history
       // (depending on direction argument).
       getValueFromHistory: PropTypes.func.isRequired,
       // History of executed expression (state).
       history: PropTypes.object.isRequired,
       // Console object.
-      hud: PropTypes.object.isRequired,
+      webConsoleUI: PropTypes.object.isRequired,
       // Needed for opening context menu
       serviceContainer: PropTypes.object.isRequired,
       // Handler for clipboard 'paste' event (also used for 'drop' event, callback).
       onPaste: PropTypes.func,
       codeMirrorEnabled: PropTypes.bool,
       // Update position in the history after executing an expression (action).
       updateHistoryPosition: PropTypes.func.isRequired,
       // Update autocomplete popup state.
@@ -86,21 +82,21 @@ class JSTerm extends Component {
       autocompleteData: PropTypes.object.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     const {
-      hud,
+      webConsoleUI,
     } = props;
 
-    this.hud = hud;
-    this.hudId = this.hud.hudId;
+    this.webConsoleUI = webConsoleUI;
+    this.hudId = this.webConsoleUI.hudId;
 
     this._keyPress = this._keyPress.bind(this);
     this._inputEventHandler = this._inputEventHandler.bind(this);
     this._blurEventHandler = this._blurEventHandler.bind(this);
     this.onContextMenu = this.onContextMenu.bind(this);
     this.imperativeUpdate = this.imperativeUpdate.bind(this);
 
     /**
@@ -111,30 +107,30 @@ class JSTerm extends Component {
 
     this.autocompletePopup = null;
     this.inputNode = null;
     this.completeNode = null;
 
     this._telemetry = new Telemetry();
 
     EventEmitter.decorate(this);
-    hud.jsterm = this;
+    webConsoleUI.jsterm = this;
   }
 
   componentDidMount() {
     const autocompleteOptions = {
       onSelect: this.onAutocompleteSelect.bind(this),
       onClick: this.acceptProposedCompletion.bind(this),
       listId: "webConsole_autocompletePopupListBox",
       position: "bottom",
       autoSelect: true,
     };
 
-    const doc = this.hud.document;
-    const toolbox = gDevTools.getToolbox(this.hud.owner.target);
+    const doc = this.webConsoleUI.document;
+    const toolbox = gDevTools.getToolbox(this.webConsoleUI.owner.target);
     const tooltipDoc = toolbox ? toolbox.doc : doc;
     // The popup will be attached to the toolbox document or HUD document in the case
     // such as the browser console which doesn't have a toolbox.
     this.autocompletePopup = new AutocompletePopup(tooltipDoc, autocompleteOptions);
 
     if (this.props.codeMirrorEnabled) {
       if (this.node) {
         const onArrowUp = () => {
@@ -302,46 +298,45 @@ class JSTerm extends Component {
               this.clearCompletion();
               return "CodeMirror.Pass";
             },
 
             "PageUp": () => {
               if (this.autocompletePopup.isOpen) {
                 this.autocompletePopup.selectPreviousPageItem();
               } else {
-                this.hud.outputScroller.scrollTop = Math.max(
-                  0,
-                  this.hud.outputScroller.scrollTop - this.hud.outputScroller.clientHeight
-                );
+                const {outputScroller} = this.webConsoleUI;
+                const {scrollTop, clientHeight} = outputScroller;
+                outputScroller.scrollTop = Math.max(0, scrollTop - clientHeight);
               }
 
               return null;
             },
 
             "PageDown": () => {
               if (this.autocompletePopup.isOpen) {
                 this.autocompletePopup.selectNextPageItem();
               } else {
-                this.hud.outputScroller.scrollTop = Math.min(
-                  this.hud.outputScroller.scrollHeight,
-                  this.hud.outputScroller.scrollTop + this.hud.outputScroller.clientHeight
-                );
+                const {outputScroller} = this.webConsoleUI;
+                const {scrollTop, scrollHeight, clientHeight} = outputScroller;
+                outputScroller.scrollTop =
+                  Math.min(scrollHeight, scrollTop + clientHeight);
               }
 
               return null;
             },
 
             "Home": () => {
               if (this.autocompletePopup.isOpen) {
                 this.autocompletePopup.selectItemAtIndex(0);
                 return null;
               }
 
               if (!this.getInputValue()) {
-                this.hud.outputScroller.scrollTop = 0;
+                this.webConsoleUI.outputScroller.scrollTop = 0;
                 return null;
               }
 
               if (this.getAutoCompletionText()) {
                 this.clearCompletion();
               }
 
               return "CodeMirror.Pass";
@@ -350,17 +345,18 @@ class JSTerm extends Component {
             "End": () => {
               if (this.autocompletePopup.isOpen) {
                 this.autocompletePopup.selectItemAtIndex(
                   this.autocompletePopup.itemCount - 1);
                 return null;
               }
 
               if (!this.getInputValue()) {
-                this.hud.outputScroller.scrollTop = this.hud.outputScroller.scrollHeight;
+                const {outputScroller} = this.webConsoleUI;
+                outputScroller.scrollTop = outputScroller.scrollHeight;
                 return null;
               }
 
               if (this.getAutoCompletionText()) {
                 this.clearCompletion();
               }
 
               return "CodeMirror.Pass";
@@ -406,17 +402,17 @@ class JSTerm extends Component {
     this.inputBorderSize = this.inputNode
       ? this.inputNode.getBoundingClientRect().height - this.inputNode.clientHeight
       : 0;
 
     // Update the character and chevron width needed for the popup offset calculations.
     this._inputCharWidth = this._getInputCharWidth();
     this._paddingInlineStart = this.editor ? null : this._getInputPaddingInlineStart();
 
-    this.hud.window.addEventListener("blur", this._blurEventHandler);
+    this.webConsoleUI.window.addEventListener("blur", this._blurEventHandler);
     this.lastInputValue && this.setInputValue(this.lastInputValue);
   }
 
   componentWillReceiveProps(nextProps) {
     this.imperativeUpdate(nextProps);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -441,25 +437,25 @@ class JSTerm extends Component {
     }
   }
 
   /**
    * Getter for the element that holds the messages we display.
    * @type Element
    */
   get outputNode() {
-    return this.hud.outputNode;
+    return this.webConsoleUI.outputNode;
   }
 
   /**
    * Getter for the debugger WebConsoleClient.
    * @type object
    */
   get webConsoleClient() {
-    return this.hud.webConsoleClient;
+    return this.webConsoleUI.webConsoleClient;
   }
 
   focus() {
     if (this.editor) {
       this.editor.focus();
     } else if (this.inputNode && !this.inputNode.getAttribute("focused")) {
       this.inputNode.focus();
     }
@@ -495,17 +491,17 @@ class JSTerm extends Component {
   /**
    * The JavaScript evaluation response handler.
    *
    * @private
    * @param {Object} response
    *        The message received from the server.
    */
   async _executeResultCallback(response) {
-    if (!this.hud) {
+    if (!this.webConsoleUI) {
       return null;
     }
 
     if (response.error) {
       console.error("Evaluation error " + response.error + ": " + response.message);
       return null;
     }
 
@@ -523,63 +519,63 @@ class JSTerm extends Component {
     }
     const result = response.result;
     const helperResult = response.helperResult;
     const helperHasRawOutput = !!(helperResult || {}).rawOutput;
 
     if (helperResult && helperResult.type) {
       switch (helperResult.type) {
         case "clearOutput":
-          this.hud.clearOutput();
+          this.webConsoleUI.clearOutput();
           break;
         case "clearHistory":
           this.props.clearHistory();
           break;
         case "inspectObject":
-          this.hud.inspectObjectActor(helperResult.object);
+          this.webConsoleUI.inspectObjectActor(helperResult.object);
           break;
         case "error":
           try {
             errorMessage = l10n.getStr(helperResult.message);
           } catch (ex) {
             errorMessage = helperResult.message;
           }
           break;
         case "help":
-          this.hud.owner.openLink(HELP_URL);
+          this.webConsoleUI.owner.openLink(HELP_URL);
           break;
         case "copyValueToClipboard":
           clipboardHelper.copyString(helperResult.value);
           break;
         case "screenshotOutput":
           const { args, value } = helperResult;
-          const results = await saveScreenshot(this.hud.window, args, value);
+          const results = await saveScreenshot(this.webConsoleUI.window, args, value);
           this.screenshotNotify(results);
           // early return as screenshot notify has dispatched all necessary messages
           return null;
       }
     }
 
     // Hide undefined results coming from JSTerm helper functions.
     if (!errorMessage && result && typeof result == "object" &&
       result.type == "undefined" &&
       helperResult && !helperHasRawOutput) {
       return null;
     }
 
-    if (this.hud.wrapper) {
-      return this.hud.wrapper.dispatchMessageAdd(response, true);
+    if (this.webConsoleUI.wrapper) {
+      return this.webConsoleUI.wrapper.dispatchMessageAdd(response, true);
     }
 
     return null;
   }
 
   screenshotNotify(results) {
     const wrappedResults = results.map(message => ({ message, type: "logMessage" }));
-    this.hud.wrapper.dispatchMessagesAdd(wrappedResults);
+    this.webConsoleUI.wrapper.dispatchMessagesAdd(wrappedResults);
   }
 
   /**
    * Execute a string. Execution happens asynchronously in the content process.
    *
    * @param {String} executeString
    *        The string you want to execute. If this is not provided, the current
    *        user input is used - taken from |this.getInputValue()|.
@@ -596,31 +592,32 @@ class JSTerm extends Component {
     // Append executed expression into the history list.
     this.props.appendToHistory(executeString);
 
     WebConsoleUtils.usageCount++;
     this.setInputValue("");
     this.clearCompletion();
 
     let selectedNodeActor = null;
-    const inspectorSelection = this.hud.owner.getInspectorSelection();
+    const inspectorSelection = this.webConsoleUI.owner.getInspectorSelection();
     if (inspectorSelection && inspectorSelection.nodeFront) {
       selectedNodeActor = inspectorSelection.nodeFront.actorID;
     }
 
     const { ConsoleCommand } = require("devtools/client/webconsole/types");
     const cmdMessage = new ConsoleCommand({
       messageText: executeString,
       timeStamp: Date.now(),
     });
-    this.hud.proxy.dispatchMessageAdd(cmdMessage);
+    this.webConsoleUI.proxy.dispatchMessageAdd(cmdMessage);
 
     let mappedExpressionRes = null;
     try {
-      mappedExpressionRes = await this.hud.owner.getMappedExpression(executeString);
+      mappedExpressionRes =
+        await this.webConsoleUI.owner.getMappedExpression(executeString);
     } catch (e) {
       console.warn("Error when calling getMappedExpression", e);
     }
 
     executeString = mappedExpressionRes ? mappedExpressionRes.expression : executeString;
 
     const options = {
       selectedNodeActor,
@@ -959,58 +956,59 @@ class JSTerm extends Component {
           event.preventDefault();
         }
         break;
 
       case KeyCodes.DOM_VK_PAGE_UP:
         if (this.autocompletePopup.isOpen) {
           this.autocompletePopup.selectPreviousPageItem();
         } else {
-          this.hud.outputScroller.scrollTop =
+          this.webConsoleUI.outputScroller.scrollTop =
             Math.max(0,
-              this.hud.outputScroller.scrollTop -
-              this.hud.outputScroller.clientHeight
+              this.webConsoleUI.outputScroller.scrollTop -
+              this.webConsoleUI.outputScroller.clientHeight
             );
         }
         event.preventDefault();
         break;
 
       case KeyCodes.DOM_VK_PAGE_DOWN:
         if (this.autocompletePopup.isOpen) {
           this.autocompletePopup.selectNextPageItem();
         } else {
-          this.hud.outputScroller.scrollTop =
-            Math.min(this.hud.outputScroller.scrollHeight,
-              this.hud.outputScroller.scrollTop +
-              this.hud.outputScroller.clientHeight
+          this.webConsoleUI.outputScroller.scrollTop =
+            Math.min(this.webConsoleUI.outputScroller.scrollHeight,
+              this.webConsoleUI.outputScroller.scrollTop +
+              this.webConsoleUI.outputScroller.clientHeight
             );
         }
         event.preventDefault();
         break;
 
       case KeyCodes.DOM_VK_HOME:
         if (this.autocompletePopup.isOpen) {
           this.autocompletePopup.selectItemAtIndex(0);
           event.preventDefault();
         } else if (this.getAutoCompletionText()) {
           this.clearCompletion();
         } else if (inputValue.length <= 0) {
-          this.hud.outputScroller.scrollTop = 0;
+          this.webConsoleUI.outputScroller.scrollTop = 0;
           event.preventDefault();
         }
         break;
 
       case KeyCodes.DOM_VK_END:
         if (this.autocompletePopup.isOpen) {
           this.autocompletePopup.selectItemAtIndex(this.autocompletePopup.itemCount - 1);
           event.preventDefault();
         } else if (this.getAutoCompletionText()) {
           this.clearCompletion();
         } else if (inputValue.length <= 0) {
-          this.hud.outputScroller.scrollTop = this.hud.outputScroller.scrollHeight;
+          const {outputScroller} = this.webConsoleUI;
+          outputScroller.scrollTop = outputScroller.scrollHeight;
           event.preventDefault();
         }
         break;
 
       case KeyCodes.DOM_VK_LEFT:
         if (this.autocompletePopup.isOpen || this.getAutoCompletionText()) {
           this.clearCompletion();
         }
@@ -1477,17 +1475,17 @@ class JSTerm extends Component {
     if (!this.inputNode && !this.node) {
       return null;
     }
 
     if (this.editor) {
       return this.editor.defaultCharWidth();
     }
 
-    const doc = this.hud.document;
+    const doc = this.webConsoleUI.document;
     const tempLabel = doc.createElement("span");
     const style = tempLabel.style;
     style.position = "fixed";
     style.padding = "0";
     style.margin = "0";
     style.width = "auto";
     style.color = "transparent";
     WebConsoleUtils.copyTextStyles(this.inputNode, tempLabel);
@@ -1504,57 +1502,57 @@ class JSTerm extends Component {
    *
    * @returns {Number|null}: Width of the icon, or null if the input does not exist.
    */
   _getInputPaddingInlineStart() {
     if (!this.inputNode) {
       return null;
     }
    // Calculate the width of the chevron placed at the beginning of the input box.
-    const doc = this.hud.document;
+    const doc = this.webConsoleUI.document;
 
     return new Number(doc.defaultView
       .getComputedStyle(this.inputNode)
       .paddingInlineStart.replace(/[^0-9.]/g, ""));
   }
 
   onContextMenu(e) {
     this.props.serviceContainer.openEditContextMenu(e);
   }
 
   destroy() {
     this.webConsoleClient.clearNetworkRequests();
-    if (this.hud.outputNode) {
+    if (this.webConsoleUI.outputNode) {
       // We do this because it's much faster than letting React handle the ConsoleOutput
       // unmounting.
-      this.hud.outputNode.innerHTML = "";
+      this.webConsoleUI.outputNode.innerHTML = "";
     }
 
     if (this.autocompletePopup) {
       this.autocompletePopup.destroy();
       this.autocompletePopup = null;
     }
 
     if (this.inputNode) {
       this.inputNode.removeEventListener("keypress", this._keyPress);
       this.inputNode.removeEventListener("input", this._inputEventHandler);
       this.inputNode.removeEventListener("keyup", this._inputEventHandler);
-      this.hud.window.removeEventListener("blur", this._blurEventHandler);
+      this.webConsoleUI.window.removeEventListener("blur", this._blurEventHandler);
     }
 
     if (this.editor) {
       this.editor.destroy();
       this.editor = null;
     }
 
-    this.hud = null;
+    this.webConsoleUI = null;
   }
 
   render() {
-    if (this.props.hud.isBrowserConsole &&
+    if (this.props.webConsoleUI.isBrowserConsole &&
         !Services.prefs.getBoolPref("devtools.chrome.enabled")) {
       return null;
     }
 
     if (this.props.codeMirrorEnabled) {
       return dom.div({
         className: "jsterm-input-container devtools-input devtools-monospace",
         key: "jsterm-container",
--- a/devtools/client/webconsole/components/ReverseSearchInput.js
+++ b/devtools/client/webconsole/components/ReverseSearchInput.js
@@ -23,33 +23,33 @@ loader.lazyRequireGetter(this, "KeyCodes
 
 const Services = require("Services");
 const isMacOS = Services.appinfo.OS === "Darwin";
 
 class ReverseSearchInput extends Component {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
-      hud: PropTypes.object.isRequired,
+      webConsoleUI: PropTypes.object.isRequired,
       reverseSearchResult: PropTypes.string,
       reverseSearchTotalResults: PropTypes.number,
       reverseSearchResultPosition: PropTypes.number,
       visible: PropTypes.bool,
       initialValue: PropTypes.string,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.onInputKeyDown = this.onInputKeyDown.bind(this);
   }
 
   componentDidUpdate(prevProps) {
-    const {jsterm} = this.props.hud;
+    const {jsterm} = this.props.webConsoleUI;
     if (
       prevProps.reverseSearchResult !== this.props.reverseSearchResult
       && this.props.visible
       && this.props.reverseSearchTotalResults > 0
     ) {
       jsterm.setInputValue(this.props.reverseSearchResult);
     }
 
@@ -71,25 +71,25 @@ class ReverseSearchInput extends Compone
       keyCode,
       key,
       ctrlKey,
       shiftKey,
     } = event;
 
     const {
       dispatch,
-      hud,
+      webConsoleUI,
       reverseSearchTotalResults,
     } = this.props;
 
     // On Enter, we trigger an execute.
     if (keyCode === KeyCodes.DOM_VK_RETURN) {
       event.stopPropagation();
       dispatch(actions.reverseSearchInputToggle());
-      hud.jsterm.execute();
+      webConsoleUI.jsterm.execute();
       return;
     }
 
     // On Escape (and Ctrl + c on OSX), we close the reverse search input.
     if (
       keyCode === KeyCodes.DOM_VK_ESCAPE || (
         isMacOS && ctrlKey === true && key.toLowerCase() === "c"
       )
--- a/devtools/client/webconsole/enhancers/actor-releaser.js
+++ b/devtools/client/webconsole/enhancers/actor-releaser.js
@@ -11,23 +11,23 @@ const {
   REMOVED_ACTORS_CLEAR,
 } = require("devtools/client/webconsole/constants");
 
 /**
  * This enhancer is responsible for releasing actors on the backend.
  * When messages with arguments are removed from the store we should also
  * clean up the backend.
  */
-function enableActorReleaser(hud) {
+function enableActorReleaser(webConsoleUI) {
   return next => (reducer, initialState, enhancer) => {
     function releaseActorsEnhancer(state, action) {
       state = reducer(state, action);
 
       const type = action.type;
-      const proxy = hud ? hud.proxy : null;
+      const proxy = webConsoleUI ? webConsoleUI.proxy : null;
       if (
         proxy &&
         ([MESSAGES_ADD, MESSAGES_CLEAR, PRIVATE_MESSAGES_CLEAR].includes(type))
       ) {
         releaseActors(state.messages.removedActors, proxy);
 
         // Reset `removedActors` in message reducer.
         state = reducer(state, {
--- a/devtools/client/webconsole/enhancers/css-error-reporting.js
+++ b/devtools/client/webconsole/enhancers/css-error-reporting.js
@@ -8,20 +8,20 @@ const {
   INITIALIZE,
   FILTER_TOGGLE,
 } = require("devtools/client/webconsole/constants");
 
 /**
  * This is responsible for ensuring that error reporting is enabled if the CSS
  * filter is toggled on.
  */
-function ensureCSSErrorReportingEnabled(hud) {
+function ensureCSSErrorReportingEnabled(webConsoleUI) {
   return next => (reducer, initialState, enhancer) => {
     function ensureErrorReportingEnhancer(state, action) {
-      const proxy = hud ? hud.proxy : null;
+      const proxy = webConsoleUI ? webConsoleUI.proxy : null;
       if (!proxy) {
         return reducer(state, action);
       }
 
       state = reducer(state, action);
       if (!state.filters.css) {
         return state;
       }
--- a/devtools/client/webconsole/enhancers/message-cache-clearing.js
+++ b/devtools/client/webconsole/enhancers/message-cache-clearing.js
@@ -8,22 +8,22 @@ const {
   MESSAGES_CLEAR,
 } = require("devtools/client/webconsole/constants");
 
 /**
  * This enhancer is responsible for clearing the messages caches using the
  * webconsoleClient when the user clear the messages (either by direct UI action, or via
  * `console.clear()`).
  */
-function enableMessagesCacheClearing(hud) {
+function enableMessagesCacheClearing(webConsoleUI) {
   return next => (reducer, initialState, enhancer) => {
     function messagesCacheClearingEnhancer(state, action) {
       state = reducer(state, action);
 
-      const webConsoleClient = hud && hud.proxy ? hud.proxy.webConsoleClient : null;
+      const webConsoleClient = webConsoleUI && webConsoleUI.webConsoleClient;
       if (webConsoleClient && action.type === MESSAGES_CLEAR) {
         webConsoleClient.clearNetworkRequests();
         webConsoleClient.clearMessagesCache();
       }
       return state;
     }
 
     return next(messagesCacheClearingEnhancer, initialState, enhancer);
--- a/devtools/client/webconsole/enhancers/net-provider.js
+++ b/devtools/client/webconsole/enhancers/net-provider.js
@@ -23,21 +23,21 @@ const {
 /**
  * This enhancer is responsible for fetching HTTP details data
  * collected by the backend. The fetch happens on-demand
  * when the user expands network log in order to inspect it.
  *
  * This way we don't slow down the Console logging by fetching.
  * unnecessary data over RDP.
  */
-function enableNetProvider(hud) {
+function enableNetProvider(webConsoleUI) {
   let dataProvider;
   return next => (reducer, initialState, enhancer) => {
     function netProviderEnhancer(state, action) {
-      const proxy = hud ? hud.proxy : null;
+      const proxy = webConsoleUI ? webConsoleUI.proxy : null;
       if (!proxy) {
         return reducer(state, action);
       }
 
       const actions = {
         updateRequest: (id, data, batch) => {
           proxy.dispatchRequestUpdate(id, data);
         },
--- a/devtools/client/webconsole/store.js
+++ b/devtools/client/webconsole/store.js
@@ -33,18 +33,18 @@ const enableActorReleaser = require("./e
 const ensureCSSErrorReportingEnabled = require("./enhancers/css-error-reporting");
 const enableNetProvider = require("./enhancers/net-provider");
 const enableMessagesCacheClearing = require("./enhancers/message-cache-clearing");
 
 /**
  * Create and configure store for the Console panel. This is the place
  * where various enhancers and middleware can be registered.
  */
-function configureStore(hud, options = {}) {
-  const prefsService = getPrefsService(hud);
+function configureStore(webConsoleUI, options = {}) {
+  const prefsService = getPrefsService(webConsoleUI);
   const {
     getBoolPref,
     getIntPref,
   } = prefsService;
 
   const logLimit = options.logLimit
     || Math.max(getIntPref("devtools.hud.loglimit"), 1);
   const sidebarToggle = getBoolPref(PREFS.FEATURES.SIDEBAR_TOGGLE);
@@ -92,21 +92,21 @@ function configureStore(hud, options = {
     eventTelemetry.bind(null, options.telemetry, options.sessionId),
   );
 
   return createStore(
     createRootReducer(),
     initialState,
     compose(
       middleware,
-      enableActorReleaser(hud),
+      enableActorReleaser(webConsoleUI),
       enableBatching(),
-      enableNetProvider(hud),
-      enableMessagesCacheClearing(hud),
-      ensureCSSErrorReportingEnabled(hud),
+      enableNetProvider(webConsoleUI),
+      enableMessagesCacheClearing(webConsoleUI),
+      ensureCSSErrorReportingEnabled(webConsoleUI),
     )
   );
 }
 
 function createRootReducer() {
   return function rootReducer(state, action) {
     // We want to compute the new state for all properties except
     // "messages" and "history". These two reducers are handled
--- a/devtools/client/webconsole/test/fixtures/serviceContainer.js
+++ b/devtools/client/webconsole/test/fixtures/serviceContainer.js
@@ -1,18 +1,18 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 module.exports = {
-  attachRefToHud: () => {},
+  attachRefToWebConsoleUI: () => {},
   canRewind: () => false,
   emitNewMessage: () => {},
-  hudProxy: {
+  proxy: {
     client: {},
     releaseActor: actor => console.log("Release actor", actor),
   },
   onViewSourceInDebugger: () => {},
   onViewSourceInStyleEditor: () => {},
   onViewSourceInScratchpad: () => {},
   openNetworkPanel: () => {},
   sourceMapService: {
--- a/devtools/client/webconsole/test/fixtures/stub-generators/head.js
+++ b/devtools/client/webconsole/test/fixtures/stub-generators/head.js
@@ -430,17 +430,17 @@ async function generateNetworkEventStubs
           toolbox.target.activeConsole.off("networkEvent", onNetworkEvent);
           resolve();
         }
       });
     });
 
     const onNetworkUpdate = new Promise(resolve => {
       let i = 0;
-      ui.jsterm.hud.on("network-message-updated", function onNetworkUpdated(res) {
+      ui.on("network-message-updated", function onNetworkUpdated(res) {
         const updateKey = `${keys[i++]} update`;
         // We cannot ensure the form of the network update packet, some properties
         // might be in another order than in the original packet.
         // Hand-picking only what we need should prevent this.
         const packet = {
           networkInfo: {
             _type: res.networkInfo._type,
             actor: res.networkInfo.actor,
@@ -448,17 +448,17 @@ async function generateNetworkEventStubs
             response: res.networkInfo.response,
             totalTime: res.networkInfo.totalTime,
           },
         };
 
         stubs.packets.push(formatPacket(updateKey, packet));
         stubs.preparedMessages.push(formatNetworkEventStub(updateKey, res));
         if (i === keys.length) {
-          ui.jsterm.hud.off("network-message-updated", onNetworkUpdated);
+          ui.off("network-message-updated", onNetworkUpdated);
           resolve();
         }
       });
     });
 
     await ContentTask.spawn(
       gBrowser.selectedBrowser,
       [key, code],
--- a/devtools/client/webconsole/test/mochitest/browser_console.js
+++ b/devtools/client/webconsole/test/mochitest/browser_console.js
@@ -116,17 +116,17 @@ async function testCPOWInspection(hud) {
   // Directly request evaluation to get an actor for the selected browser.
   // Note that this doesn't actually render a message, and instead allows us
   // us to assert that inspecting an object doesn't throw in the server.
   // This would be done in a mochitest-chrome suite, but that doesn't run in
   // e10s, so it's harder to get ahold of a CPOW.
   const cpowEval = await hud.jsterm.requestEvaluation("gBrowser.selectedBrowser");
   info("Creating an ObjectClient with: " + cpowEval.result.actor);
 
-  const objectClient = new ObjectClient(hud.jsterm.hud.proxy.client, {
+  const objectClient = new ObjectClient(hud.ui.proxy.client, {
     actor: cpowEval.result.actor,
   });
 
   // Before the fix for Bug 1382833, this wouldn't resolve due to a CPOW error
   // in the ObjectActor.
   const prototypeAndProperties = await objectClient.getPrototypeAndProperties();
 
   // Just a sanity check to make sure a valid packet came back
@@ -142,17 +142,17 @@ async function testCPOWInspection(hud) {
   if (!e10sCheck.result) {
     is(cpow.class, "Window", "The object is not a CPOW.");
     return;
   }
 
   is(cpow.class, "CPOW: Window", "The CPOW grip has the right class.");
 
   // Check that various protocol request methods work for the CPOW.
-  const objClient = new ObjectClient(hud.jsterm.hud.proxy.client, cpow);
+  const objClient = new ObjectClient(hud.ui.proxy.client, cpow);
 
   let response = await objClient.getPrototypeAndProperties();
   is(Reflect.ownKeys(response.ownProperties).length, 0, "No property was retrieved.");
   is(response.ownSymbols.length, 0, "No symbol property was retrieved.");
   is(response.prototype.type, "null", "The prototype is null.");
 
   response = await objClient.enumProperties({ignoreIndexedProperties: true});
   let slice = await response.iterator.slice(0, response.iterator.count);
--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_selfxss.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_selfxss.js
@@ -23,18 +23,18 @@ add_task(async function() {
   await performTest();
   // And then run it with the CodeMirror-powered one.
   await pushPref("devtools.webconsole.jsterm.codeMirror", true);
   await performTest();
 });
 
 async function performTest() {
   await pushPref("devtools.selfxss.count", 0);
-  const {jsterm} = await openNewTabAndConsole(TEST_URI);
-  const {document} = jsterm.hud;
+  const {jsterm, ui} = await openNewTabAndConsole(TEST_URI);
+  const {document} = ui;
 
   info("Self-xss paste tests");
   WebConsoleUtils.usageCount = 0;
   is(WebConsoleUtils.usageCount, 0, "Test for usage count getter");
 
   // Input some commands to check if usage counting is working
   for (let i = 0; i <= 3; i++) {
     jsterm.setInputValue(i.toString());
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_network_attach.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_network_attach.js
@@ -26,26 +26,24 @@ add_task(async function task() {
   });
 
   info("XHR executed");
 
   await netReady;
 
   info("NetMonitor:PayloadReady received");
 
-  const webconsolePanel = await toolbox.selectTool("webconsole");
-  const { hud } = webconsolePanel;
+  const {hud} = await toolbox.selectTool("webconsole");
 
   const xhrUrl = TEST_PATH + "test-data.json";
   const messageNode = await waitFor(() => findMessage(hud, xhrUrl));
   const urlNode = messageNode.querySelector(".url");
   info("Network message found.");
 
-  const ui = hud.ui;
-  const consoleReady = ui.jsterm.hud.once("network-request-payload-ready");
+  const consoleReady = hud.ui.once("network-request-payload-ready");
 
   // Expand network log
   urlNode.click();
 
   await consoleReady;
 
   info("network-request-payload-ready received");
   await testNetworkMessage(messageNode);
@@ -69,13 +67,13 @@ async function testNetworkMessage(messag
 }
 
 /**
  * Wait until all lazily fetch requests in netmonitor get finished.
  * Otherwise test will be shutdown too early and cause failure.
  */
 async function waitForLazyRequests(toolbox) {
   const { ui } = toolbox.getCurrentPanel().hud;
-  const proxy = ui.jsterm.hud.proxy;
+  const proxy = ui.proxy;
   return waitUntil(() => {
     return !proxy.networkDataProvider.lazyRequestData.size;
   });
 }
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js
@@ -318,13 +318,13 @@ function expandXhrMessage(node) {
 }
 
 /**
  * Wait until all lazily fetch requests in netmonitor get finished.
  * Otherwise test will be shutdown too early and cause failure.
  */
 async function waitForLazyRequests(toolbox) {
   const {ui} = toolbox.getCurrentPanel().hud;
-  const proxy = ui.jsterm.hud.proxy;
+  const proxy = ui.proxy;
   return waitUntil(() => {
     return !proxy.networkDataProvider.lazyRequestData.size;
   });
 }
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_status_code.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_status_code.js
@@ -18,17 +18,17 @@ pushPref(XHR_PREF, true);
 
 add_task(async function task() {
   const hud = await openNewTabAndConsole(TEST_URI);
 
   const currentTab = gBrowser.selectedTab;
   const target = await TargetFactory.forTab(currentTab);
   const toolbox = gDevTools.getToolbox(target);
   const {ui} = toolbox.getCurrentPanel().hud;
-  const onNetworkMessageUpdate = ui.jsterm.hud.once("network-message-updated");
+  const onNetworkMessageUpdate = ui.once("network-message-updated");
 
   // Fire an XHR POST request.
   await ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
     content.wrappedJSObject.testXhrPost();
   });
 
   info("XHR executed");
   await onNetworkMessageUpdate;
--- a/devtools/client/webconsole/test/mochitest/head.js
+++ b/devtools/client/webconsole/test/mochitest/head.js
@@ -47,19 +47,17 @@ registerCleanupFunction(async function()
   // Reset all filter prefs between tests. First flushPrefEnv in case one of the
   // filter prefs has been pushed for the test
   await SpecialPowers.flushPrefEnv();
   Services.prefs.getChildList("devtools.webconsole.filter").forEach(pref => {
     Services.prefs.clearUserPref(pref);
   });
   const browserConsole = HUDService.getBrowserConsole();
   if (browserConsole) {
-    if (browserConsole.jsterm) {
-      browserConsole.jsterm.hud.clearOutput(true);
-    }
+    browserConsole.ui.clearOutput(true);
     await HUDService.toggleBrowserConsole();
   }
 });
 
 /**
  * Add a new tab and open the toolbox in it, and select the webconsole.
  *
  * @param string url
--- a/devtools/client/webconsole/utils/context-menu.js
+++ b/devtools/client/webconsole/utils/context-menu.js
@@ -15,35 +15,35 @@ const clipboardHelper = require("devtool
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 
 loader.lazyRequireGetter(this, "openContentLink", "devtools/client/shared/link", true);
 loader.lazyRequireGetter(this, "getElementText", "devtools/client/webconsole/utils/clipboard", true);
 
 /**
  * Create a Menu instance for the webconsole.
  *
- * @param {Object} hud
- *        The webConsoleFrame.
+ * @param {WebConsoleUI} webConsoleUI
+ *        The webConsoleUI instance.
  * @param {Element} parentNode
  *        The container of the new console frontend output wrapper.
  * @param {Object} options
  *        - {String} actor (optional) actor id to use for context menu actions
  *        - {String} clipboardText (optional) text to "Copy" if no selection is available
  *        - {String} variableText (optional) which is the textual frontend
  *            representation of the variable
  *        - {Object} message (optional) message object containing metadata such as:
  *          - {String} source
  *          - {String} request
  *        - {Function} openSidebar (optional) function that will open the object
  *            inspector sidebar
  *        - {String} rootActorId (optional) actor id for the root object being clicked on
  *        - {Object} executionPoint (optional) when replaying, the execution point where
  *            this message was logged
  */
-function createContextMenu(hud, parentNode, {
+function createContextMenu(webConsoleUI, parentNode, {
   actor,
   clipboardText,
   variableText,
   message,
   serviceContainer,
   openSidebar,
   rootActorId,
   executionPoint,
@@ -110,19 +110,19 @@ function createContextMenu(hud, parentNo
         }
         this["temp" + i] = _self;
         "temp" + i;
       }`;
       const options = {
         selectedObjectActor: actor,
       };
 
-      hud.jsterm.requestEvaluation(evalString, options).then((res) => {
-        hud.jsterm.focus();
-        hud.jsterm.setInputValue(res.result);
+      webConsoleUI.jsterm.requestEvaluation(evalString, options).then((res) => {
+        webConsoleUI.jsterm.focus();
+        webConsoleUI.jsterm.setInputValue(res.result);
       });
     },
   }));
 
   // Copy message or grip.
   menu.append(new MenuItem({
     id: "console-menu-copy",
     label: l10n.getStr("webconsole.menu.copyMessage.label"),
@@ -145,19 +145,20 @@ function createContextMenu(hud, parentNo
     id: "console-menu-copy-object",
     label: l10n.getStr("webconsole.menu.copyObject.label"),
     accesskey: l10n.getStr("webconsole.menu.copyObject.accesskey"),
     // Disabled if there is no actor and no variable text associated.
     disabled: (!actor && !variableText),
     click: () => {
       if (actor) {
         // The Debugger.Object of the OA will be bound to |_self| during evaluation,
-        hud.jsterm.copyObject(`_self`, { selectedObjectActor: actor }).then((res) => {
-          clipboardHelper.copyString(res.helperResult.value);
-        });
+        webConsoleUI.jsterm.copyObject(`_self`, { selectedObjectActor: actor })
+          .then((res) => {
+            clipboardHelper.copyString(res.helperResult.value);
+          });
       } else {
         clipboardHelper.copyString(variableText);
       }
     },
   }));
 
   // Select all.
   menu.append(new MenuItem({
--- a/devtools/client/webconsole/webconsole-wrapper.js
+++ b/devtools/client/webconsole/webconsole-wrapper.js
@@ -23,75 +23,79 @@ const App = createFactory(require("devto
 const ObjectClient = require("devtools/shared/client/object-client");
 const LongStringClient = require("devtools/shared/client/long-string-client");
 loader.lazyRequireGetter(this, "Constants", "devtools/client/webconsole/constants");
 loader.lazyRequireGetter(this, "getElementText", "devtools/client/webconsole/utils/clipboard", true);
 
 let store = null;
 
 class WebConsoleWrapper {
-  constructor(parentNode, hud, toolbox, owner, document) {
+  constructor(parentNode, webConsoleUI, toolbox, owner, document) {
     EventEmitter.decorate(this);
 
     this.parentNode = parentNode;
-    this.hud = hud;
+    this.webConsoleUI = webConsoleUI;
     this.toolbox = toolbox;
     this.owner = owner;
     this.document = document;
 
     this.init = this.init.bind(this);
 
     this.queuedMessageAdds = [];
     this.queuedMessageUpdates = [];
     this.queuedRequestUpdates = [];
     this.throttledDispatchPromise = null;
 
     this.telemetry = new Telemetry();
   }
 
   init() {
     return new Promise((resolve) => {
-      const attachRefToHud = (id, node) => {
-        this.hud[id] = node;
+      const attachRefToWebConsoleUI = (id, node) => {
+        this.webConsoleUI[id] = node;
       };
-      const { hud } = this;
+      const { webConsoleUI } = this;
       const debuggerClient = this.owner.target.client;
 
       const serviceContainer = {
-        attachRefToHud,
+        attachRefToWebConsoleUI,
         emitNewMessage: (node, messageId, timeStamp) => {
-          hud.emit("new-messages", new Set([{
+          webConsoleUI.emit("new-messages", new Set([{
             node,
             messageId,
             timeStamp,
           }]));
         },
-        hudProxy: hud.proxy,
+        proxy: webConsoleUI.proxy,
         openLink: (url, e) => {
-          hud.owner.openLink(url, e);
+          webConsoleUI.owner.openLink(url, e);
         },
         canRewind: () => {
-          if (!(hud.owner && hud.owner.target && hud.owner.target)) {
+          if (!(
+            webConsoleUI.owner
+            && webConsoleUI.owner.target
+            && webConsoleUI.owner.target.traits
+          )) {
             return false;
           }
 
-          return hud.owner.target.traits.canRewind;
+          return webConsoleUI.owner.target.traits.canRewind;
         },
         createElement: nodename => {
           return this.document.createElement(nodename);
         },
         getLongString: (grip) => {
-          return hud.proxy.webConsoleClient.getString(grip);
+          return webConsoleUI.proxy.webConsoleClient.getString(grip);
         },
         requestData(id, type) {
-          return hud.proxy.networkDataProvider.requestData(id, type);
+          return webConsoleUI.proxy.networkDataProvider.requestData(id, type);
         },
         onViewSource(frame) {
-          if (hud && hud.owner && hud.owner.viewSource) {
-            hud.owner.viewSource(frame.url, frame.line);
+          if (webConsoleUI && webConsoleUI.owner && webConsoleUI.owner.viewSource) {
+            webConsoleUI.owner.viewSource(frame.url, frame.line);
           }
         },
         recordTelemetryEvent: (eventName, extra = {}) => {
           this.telemetry.recordEvent(eventName, "webconsole", null, {
             ...extra,
             "session_id": this.toolbox && this.toolbox.sessionId || -1,
           });
         },
@@ -107,17 +111,17 @@ class WebConsoleWrapper {
           if (!actor) {
             return null;
           }
 
           return debuggerClient.release(actor);
         },
 
         getWebConsoleClient: () => {
-          return hud.webConsoleClient;
+          return webConsoleUI.webConsoleClient;
         },
 
         /**
          * Retrieve the FrameActor ID given a frame depth, or the selected one if no
          * frame depth given.
          *
          * @param {Number} frame: optional frame depth.
          * @return {String|null}: The FrameActor ID for the given frame depth (or the
@@ -131,43 +135,43 @@ class WebConsoleWrapper {
 
           const grip = Number.isInteger(frame)
             ? state.frames[frame]
             : state.frames[state.selected];
           return grip ? grip.actor : null;
         },
 
         inputHasSelection: () => {
-          const {editor, inputNode} = hud.jsterm || {};
+          const {editor, inputNode} = webConsoleUI.jsterm || {};
           return editor
             ? !!editor.getSelection()
             : (inputNode && inputNode.selectionStart !== inputNode.selectionEnd);
         },
 
         getInputValue: () => {
-          return hud.jsterm && hud.jsterm.getInputValue();
+          return webConsoleUI.jsterm && webConsoleUI.jsterm.getInputValue();
         },
 
         getInputCursor: () => {
-          return hud.jsterm && hud.jsterm.getSelectionStart();
+          return webConsoleUI.jsterm && webConsoleUI.jsterm.getSelectionStart();
         },
 
         getSelectedNodeActor: () => {
           const inspectorSelection = this.owner.getInspectorSelection();
           if (inspectorSelection && inspectorSelection.nodeFront) {
             return inspectorSelection.nodeFront.actorID;
           }
           return null;
         },
 
         getJsTermTooltipAnchor: () => {
           if (jstermCodeMirror) {
-            return hud.jsterm.node.querySelector(".CodeMirror-cursor");
+            return webConsoleUI.jsterm.node.querySelector(".CodeMirror-cursor");
           }
-          return hud.jsterm.completeNode;
+          return webConsoleUI.jsterm.completeNode;
         },
       };
 
       // Set `openContextMenu` this way so, `serviceContainer` variable
       // is available in the current scope and we can pass it into
       // `createContextMenu` method.
       serviceContainer.openContextMenu = (e, message) => {
         const { screenX, screenY, target } = e;
@@ -195,17 +199,17 @@ class WebConsoleWrapper {
         const sidebarTogglePref = store.getState().prefs.sidebarToggle;
         const openSidebar = sidebarTogglePref ? (messageId) => {
           store.dispatch(actions.showMessageObjectInSidebar(rootActorId, messageId));
         } : null;
 
         const messageData = getMessage(store.getState(), message.messageId);
         const executionPoint = messageData && messageData.executionPoint;
 
-        const menu = createContextMenu(this.hud, this.parentNode, {
+        const menu = createContextMenu(this.webConsoleUI, this.parentNode, {
           actor,
           clipboardText,
           variableText,
           message,
           serviceContainer,
           openSidebar,
           rootActorId,
           executionPoint,
@@ -235,17 +239,17 @@ class WebConsoleWrapper {
           "progress", this.dispatchProgress.bind(this));
 
         Object.assign(serviceContainer, {
           onViewSourceInDebugger: frame => {
             this.toolbox.viewSourceInDebugger(frame.url, frame.line).then(() => {
               this.telemetry.recordEvent("jump_to_source", "webconsole",
                                          null, { "session_id": this.toolbox.sessionId }
               );
-              this.hud.emit("source-in-debugger-opened");
+              this.webConsoleUI.emit("source-in-debugger-opened");
             });
           },
           onViewSourceInScratchpad: frame => this.toolbox.viewSourceInScratchpad(
             frame.url,
             frame.line
           ).then(() => {
             this.telemetry.recordEvent("jump_to_source", "webconsole",
                                        null, { "session_id": this.toolbox.sessionId }
@@ -293,36 +297,36 @@ class WebConsoleWrapper {
 
             return Promise.all([onNodeFrontSet, onInspectorUpdated]);
           },
           jumpToExecutionPoint: executionPoint =>
             this.toolbox.threadClient.timeWarp(executionPoint),
 
           onMessageHover: (type, messageId) => {
             const message = getMessage(store.getState(), messageId);
-            this.hud.emit("message-hover", type, message);
+            this.webConsoleUI.emit("message-hover", type, message);
           },
         });
       }
 
-      store = configureStore(this.hud, {
+      store = configureStore(this.webConsoleUI, {
         // We may not have access to the toolbox (e.g. in the browser console).
         sessionId: this.toolbox && this.toolbox.sessionId || -1,
         telemetry: this.telemetry,
         services: serviceContainer,
       });
 
       const {prefs} = store.getState();
       const jstermCodeMirror = prefs.jstermCodeMirror
         && !Services.appinfo.accessibilityEnabled;
 
       const app = App({
-        attachRefToHud,
+        attachRefToWebConsoleUI,
         serviceContainer,
-        hud,
+        webConsoleUI,
         onFirstMeaningfulPaint: resolve,
         closeSplitConsole: this.closeSplitConsole.bind(this),
         jstermCodeMirror,
       });
 
       // Render the root Application component.
       if (this.parentNode) {
         const provider = createElement(Provider, { store }, app);
@@ -342,21 +346,21 @@ class WebConsoleWrapper {
     let promise;
     // Also, do not expect any update while the panel is in background.
     if (waitForResponse && document.visibilityState === "visible") {
       const timeStampToMatch = packet.message
         ? packet.message.timeStamp
         : packet.timestamp;
 
       promise = new Promise(resolve => {
-        this.hud.on("new-messages", function onThisMessage(messages) {
+        this.webConsoleUI.on("new-messages", function onThisMessage(messages) {
           for (const m of messages) {
             if (m.timeStamp === timeStampToMatch) {
               resolve(m.node);
-              this.hud.off("new-messages", onThisMessage);
+              this.webConsoleUI.off("new-messages", onThisMessage);
               return;
             }
           }
         }.bind(this));
       });
     } else {
       promise = Promise.resolve();
     }
@@ -372,17 +376,17 @@ class WebConsoleWrapper {
   dispatchMessagesClear() {
     // We might still have pending message additions and updates when the clear action is
     // triggered, so we need to flush them to make sure we don't have unexpected behavior
     // in the ConsoleOutput.
     this.queuedMessageAdds = [];
     this.queuedMessageUpdates = [];
     this.queuedRequestUpdates = [];
     store.dispatch(actions.messagesClear());
-    this.hud.emit("messages-cleared");
+    this.webConsoleUI.emit("messages-cleared");
   }
 
   dispatchPrivateMessagesClear() {
     // We might still have pending private message additions when the private messages
     // clear action is triggered. We need to remove any private-window-issued packets from
     // the queue so they won't appear in the output.
 
     // For (network) message updates, we need to check both messages queue and the state
@@ -445,17 +449,17 @@ class WebConsoleWrapper {
     // that networkInfo.updates has all we need.
     // Note that 'requestPostData' is sent only for POST requests, so we need
     // to count with that.
     // 'fetchCacheDescriptor' will also cause a network update and increment
     // the number of networkInfo.updates
     const NUMBER_OF_NETWORK_UPDATE = 8;
 
     let expectedLength = NUMBER_OF_NETWORK_UPDATE;
-    if (this.hud.proxy.webConsoleClient.traits.fetchCacheDescriptor
+    if (this.webConsoleUI.webConsoleClient.traits.fetchCacheDescriptor
       && res.networkInfo.updates.includes("responseCache")) {
       expectedLength++;
     }
     if (res.networkInfo.updates.includes("requestPostData")) {
       expectedLength++;
     }
 
     if (res.networkInfo.updates.length === expectedLength) {
@@ -478,23 +482,23 @@ class WebConsoleWrapper {
 
   dispatchTabWillNavigate(packet) {
     const { ui } = store.getState();
 
     // For the browser console, we receive tab navigation
     // when the original top level window we attached to is closed,
     // but we don't want to reset console history and just switch to
     // the next available window.
-    if (ui.persistLogs || this.hud.isBrowserConsole) {
+    if (ui.persistLogs || this.webConsoleUI.isBrowserConsole) {
       // Add a type in order for this event packet to be identified by
       // utils/messages.js's `transformPacket`
       packet.type = "will-navigate";
       this.dispatchMessageAdd(packet);
     } else {
-      this.hud.webConsoleClient.clearNetworkRequests();
+      this.webConsoleUI.webConsoleClient.clearNetworkRequests();
       this.dispatchMessagesClear();
       store.dispatch({
         type: Constants.WILL_NAVIGATE,
       });
     }
   }
 
   batchedMessageUpdates(info) {
@@ -558,34 +562,34 @@ class WebConsoleWrapper {
             this.toolbox, "enter", "webconsole", null, "message_count", length);
         }
 
         this.queuedMessageAdds = [];
 
         if (this.queuedMessageUpdates.length > 0) {
           this.queuedMessageUpdates.forEach(({ message, res }) => {
             store.dispatch(actions.networkMessageUpdate(message, null, res));
-            this.hud.emit("network-message-updated", res);
+            this.webConsoleUI.emit("network-message-updated", res);
           });
           this.queuedMessageUpdates = [];
         }
         if (this.queuedRequestUpdates.length > 0) {
           this.queuedRequestUpdates.forEach(({ id, data}) => {
             store.dispatch(actions.networkUpdateRequest(id, data));
           });
           this.queuedRequestUpdates = [];
 
           // Fire an event indicating that all data fetched from
           // the backend has been received. This is based on
           // 'FirefoxDataProvider.isQueuePayloadReady', see more
           // comments in that method.
           // (netmonitor/src/connector/firefox-data-provider).
           // This event might be utilized in tests to find the right
           // time when to finish.
-          this.hud.emit("network-request-payload-ready");
+          this.webConsoleUI.emit("network-request-payload-ready");
         }
         done();
       }, 50);
     });
   }
 
   // Should be used for test purpose only.
   getStore() {