Add m-esr52 at 52.6.0

1 files changed, 982 insertions, 0 deletions

diff --git a/devtools/client/debugger/debugger-view.js b/devtools/client/debugger/debugger-view.js
new file mode 100644
index 000000000..b6a5850ff
--- /dev/null
+++ b/devtools/client/debugger/debugger-view.js
@@ -0,0 +1,982 @@
+/* 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 SOURCE_URL_DEFAULT_MAX_LENGTH = 64; // chars
+const STACK_FRAMES_SOURCE_URL_MAX_LENGTH = 15; // chars
+const STACK_FRAMES_SOURCE_URL_TRIM_SECTION = "center";
+const STACK_FRAMES_SCROLL_DELAY = 100; // ms
+const BREAKPOINT_SMALL_WINDOW_WIDTH = 850; // px
+const RESULTS_PANEL_POPUP_POSITION = "before_end";
+const RESULTS_PANEL_MAX_RESULTS = 10;
+const FILE_SEARCH_ACTION_MAX_DELAY = 300; // ms
+const GLOBAL_SEARCH_EXPAND_MAX_RESULTS = 50;
+const GLOBAL_SEARCH_LINE_MAX_LENGTH = 300; // chars
+const GLOBAL_SEARCH_ACTION_MAX_DELAY = 1500; // ms
+const FUNCTION_SEARCH_ACTION_MAX_DELAY = 400; // ms
+const SEARCH_GLOBAL_FLAG = "!";
+const SEARCH_FUNCTION_FLAG = "@";
+const SEARCH_TOKEN_FLAG = "#";
+const SEARCH_LINE_FLAG = ":";
+const SEARCH_VARIABLE_FLAG = "*";
+const SEARCH_AUTOFILL = [SEARCH_GLOBAL_FLAG, SEARCH_FUNCTION_FLAG, SEARCH_TOKEN_FLAG];
+const TOOLBAR_ORDER_POPUP_POSITION = "topcenter bottomleft";
+const RESIZE_REFRESH_RATE = 50; // ms
+
+const EventListenersView = require("./content/views/event-listeners-view");
+const SourcesView = require("./content/views/sources-view");
+var actions = Object.assign(
+  {},
+  require("./content/globalActions"),
+  require("./content/actions/breakpoints"),
+  require("./content/actions/sources"),
+  require("./content/actions/event-listeners")
+);
+var queries = require("./content/queries");
+var constants = require("./content/constants");
+
+/**
+ * Object defining the debugger view components.
+ */
+var DebuggerView = {
+
+  /**
+   * This is attached so tests can change it without needing to load an
+   * actual large file in automation
+   */
+  LARGE_FILE_SIZE: 1048576, // 1 MB in bytes
+
+  /**
+   * Initializes the debugger view.
+   *
+   * @return object
+   *         A promise that is resolved when the view finishes initializing.
+   */
+  initialize: function (isWorker) {
+    if (this._startup) {
+      return this._startup;
+    }
+    const deferred = promise.defer();
+    this._startup = deferred.promise;
+
+    this._initializePanes();
+    this._initializeEditor(deferred.resolve);
+    this.Toolbar.initialize();
+    this.Options.initialize();
+    this.Filtering.initialize();
+    this.StackFrames.initialize();
+    this.StackFramesClassicList.initialize();
+    this.Workers.initialize();
+    this.Sources.initialize(isWorker);
+    this.VariableBubble.initialize();
+    this.WatchExpressions.initialize();
+    this.EventListeners.initialize();
+    this.GlobalSearch.initialize();
+    this._initializeVariablesView();
+
+    this._editorSource = {};
+    this._editorDocuments = {};
+
+    this.editor.on("cursorActivity", this.Sources._onEditorCursorActivity);
+
+    this.controller = DebuggerController;
+    const getState = this.controller.getState;
+
+    onReducerEvents(this.controller, {
+      "source-text-loaded": this.renderSourceText,
+      "source-selected": this.renderSourceText,
+      "blackboxed": this.renderBlackBoxed,
+      "prettyprinted": this.renderPrettyPrinted,
+      "breakpoint-added": this.addEditorBreakpoint,
+      "breakpoint-enabled": this.addEditorBreakpoint,
+      "breakpoint-disabled": this.removeEditorBreakpoint,
+      "breakpoint-removed": this.removeEditorBreakpoint,
+      "breakpoint-condition-updated": this.renderEditorBreakpointCondition,
+      "breakpoint-moved": ({ breakpoint, prevLocation }) => {
+        const selectedSource = queries.getSelectedSource(getState());
+        const { location } = breakpoint;
+
+        if (selectedSource &&
+           selectedSource.actor === location.actor) {
+          this.editor.moveBreakpoint(prevLocation.line - 1,
+                                     location.line - 1);
+        }
+      }
+    }, this);
+
+    return deferred.promise;
+  },
+
+  /**
+   * Destroys the debugger view.
+   *
+   * @return object
+   *         A promise that is resolved when the view finishes destroying.
+   */
+  destroy: function () {
+    if (this._hasShutdown) {
+      return;
+    }
+    this._hasShutdown = true;
+
+    window.removeEventListener("resize", this._onResize, false);
+    this.editor.off("cursorActivity", this.Sources._onEditorCursorActivity);
+
+    this.Toolbar.destroy();
+    this.Options.destroy();
+    this.Filtering.destroy();
+    this.StackFrames.destroy();
+    this.StackFramesClassicList.destroy();
+    this.Sources.destroy();
+    this.VariableBubble.destroy();
+    this.WatchExpressions.destroy();
+    this.EventListeners.destroy();
+    this.GlobalSearch.destroy();
+    this._destroyPanes();
+
+    this.editor.destroy();
+    this.editor = null;
+
+    this.controller.dispatch(actions.removeAllBreakpoints());
+  },
+
+  /**
+   * Initializes the UI for all the displayed panes.
+   */
+  _initializePanes: function () {
+    dumpn("Initializing the DebuggerView panes");
+
+    this._body = document.getElementById("body");
+    this._editorDeck = document.getElementById("editor-deck");
+    this._workersAndSourcesPane = document.getElementById("workers-and-sources-pane");
+    this._instrumentsPane = document.getElementById("instruments-pane");
+    this._instrumentsPaneToggleButton = document.getElementById("instruments-pane-toggle");
+
+    this.showEditor = this.showEditor.bind(this);
+    this.showBlackBoxMessage = this.showBlackBoxMessage.bind(this);
+    this.showProgressBar = this.showProgressBar.bind(this);
+
+    this._onTabSelect = this._onInstrumentsPaneTabSelect.bind(this);
+    this._instrumentsPane.tabpanels.addEventListener("select", this._onTabSelect);
+
+    this._collapsePaneString = L10N.getStr("collapsePanes");
+    this._expandPaneString = L10N.getStr("expandPanes");
+
+    this._workersAndSourcesPane.setAttribute("width", Prefs.workersAndSourcesWidth);
+    this._instrumentsPane.setAttribute("width", Prefs.instrumentsWidth);
+    this.toggleInstrumentsPane({ visible: Prefs.panesVisibleOnStartup });
+
+    this.updateLayoutMode();
+
+    this._onResize = this._onResize.bind(this);
+    window.addEventListener("resize", this._onResize, false);
+  },
+
+  /**
+   * Destroys the UI for all the displayed panes.
+   */
+  _destroyPanes: function () {
+    dumpn("Destroying the DebuggerView panes");
+
+    if (gHostType != "side") {
+      Prefs.workersAndSourcesWidth = this._workersAndSourcesPane.getAttribute("width");
+      Prefs.instrumentsWidth = this._instrumentsPane.getAttribute("width");
+    }
+
+    this._workersAndSourcesPane = null;
+    this._instrumentsPane = null;
+    this._instrumentsPaneToggleButton = null;
+  },
+
+  /**
+   * Initializes the VariablesView instance and attaches a controller.
+   */
+  _initializeVariablesView: function () {
+    this.Variables = new VariablesView(document.getElementById("variables"), {
+      searchPlaceholder: L10N.getStr("emptyVariablesFilterText"),
+      emptyText: L10N.getStr("emptyVariablesText"),
+      onlyEnumVisible: Prefs.variablesOnlyEnumVisible,
+      searchEnabled: Prefs.variablesSearchboxVisible,
+      eval: (variable, value) => {
+        let string = variable.evaluationMacro(variable, value);
+        DebuggerController.StackFrames.evaluate(string);
+      },
+      lazyEmpty: true
+    });
+
+    // Attach the current toolbox to the VView so it can link DOMNodes to
+    // the inspector/highlighter
+    this.Variables.toolbox = DebuggerController._toolbox;
+
+    // Attach a controller that handles interfacing with the debugger protocol.
+    VariablesViewController.attach(this.Variables, {
+      getEnvironmentClient: aObject => gThreadClient.environment(aObject),
+      getObjectClient: aObject => {
+        return gThreadClient.pauseGrip(aObject);
+      }
+    });
+
+    // Relay events from the VariablesView.
+    this.Variables.on("fetched", (aEvent, aType) => {
+      switch (aType) {
+        case "scopes":
+          window.emit(EVENTS.FETCHED_SCOPES);
+          break;
+        case "variables":
+          window.emit(EVENTS.FETCHED_VARIABLES);
+          break;
+        case "properties":
+          window.emit(EVENTS.FETCHED_PROPERTIES);
+          break;
+      }
+    });
+  },
+
+  /**
+   * Initializes the Editor instance.
+   *
+   * @param function aCallback
+   *        Called after the editor finishes initializing.
+   */
+  _initializeEditor: function (callback) {
+    dumpn("Initializing the DebuggerView editor");
+
+    let extraKeys = {};
+    bindKey("_doTokenSearch", "tokenSearchKey");
+    bindKey("_doGlobalSearch", "globalSearchKey", { alt: true });
+    bindKey("_doFunctionSearch", "functionSearchKey");
+    extraKeys[Editor.keyFor("jumpToLine")] = false;
+    extraKeys["Esc"] = false;
+
+    function bindKey(func, key, modifiers = {}) {
+      key = document.getElementById(key).getAttribute("key");
+      let shortcut = Editor.accel(key, modifiers);
+      extraKeys[shortcut] = () => DebuggerView.Filtering[func]();
+    }
+
+    let gutters = ["breakpoints"];
+
+    this.editor = new Editor({
+      mode: Editor.modes.text,
+      readOnly: true,
+      lineNumbers: true,
+      showAnnotationRuler: true,
+      gutters: gutters,
+      extraKeys: extraKeys,
+      contextMenu: "sourceEditorContextMenu",
+      enableCodeFolding: false
+    });
+
+    this.editor.appendTo(document.getElementById("editor")).then(() => {
+      this.editor.extend(DebuggerEditor);
+      this._loadingText = L10N.getStr("loadingText");
+      callback();
+    });
+
+    this.editor.on("gutterClick", (ev, line, button) => {
+      // A right-click shouldn't do anything but keep track of where
+      // it was clicked.
+      if (button == 2) {
+        this.clickedLine = line;
+      }
+      else {
+        const source = queries.getSelectedSource(this.controller.getState());
+        if (source) {
+          const location = { actor: source.actor, line: line + 1 };
+          if (this.editor.hasBreakpoint(line)) {
+            this.controller.dispatch(actions.removeBreakpoint(location));
+          } else {
+            this.controller.dispatch(actions.addBreakpoint(location));
+          }
+        }
+      }
+    });
+
+    this.editor.on("cursorActivity", () => {
+      this.clickedLine = null;
+    });
+  },
+
+  updateEditorBreakpoints: function (source) {
+    const breakpoints = queries.getBreakpoints(this.controller.getState());
+    const sources = queries.getSources(this.controller.getState());
+
+    for (let bp of breakpoints) {
+      if (sources[bp.location.actor] && !bp.disabled) {
+        this.addEditorBreakpoint(bp);
+      }
+      else {
+        this.removeEditorBreakpoint(bp);
+      }
+    }
+  },
+
+  addEditorBreakpoint: function (breakpoint) {
+    const { location, condition } = breakpoint;
+    const source = queries.getSelectedSource(this.controller.getState());
+
+    if (source &&
+       source.actor === location.actor &&
+       !breakpoint.disabled) {
+      this.editor.addBreakpoint(location.line - 1, condition);
+    }
+  },
+
+  removeEditorBreakpoint: function (breakpoint) {
+    const { location } = breakpoint;
+    const source = queries.getSelectedSource(this.controller.getState());
+
+    if (source && source.actor === location.actor) {
+      this.editor.removeBreakpoint(location.line - 1);
+      this.editor.removeBreakpointCondition(location.line - 1);
+    }
+  },
+
+  renderEditorBreakpointCondition: function (breakpoint) {
+    const { location, condition, disabled } = breakpoint;
+    const source = queries.getSelectedSource(this.controller.getState());
+
+    if (source && source.actor === location.actor && !disabled) {
+      if (condition) {
+        this.editor.setBreakpointCondition(location.line - 1);
+      } else {
+        this.editor.removeBreakpointCondition(location.line - 1);
+      }
+    }
+  },
+
+  /**
+   * Display the source editor.
+   */
+  showEditor: function () {
+    this._editorDeck.selectedIndex = 0;
+  },
+
+  /**
+   * Display the black box message.
+   */
+  showBlackBoxMessage: function () {
+    this._editorDeck.selectedIndex = 1;
+  },
+
+  /**
+   * Display the progress bar.
+   */
+  showProgressBar: function () {
+    this._editorDeck.selectedIndex = 2;
+  },
+
+  /**
+   * Sets the currently displayed text contents in the source editor.
+   * This resets the mode and undo stack.
+   *
+   * @param string documentKey
+   *        Key to get the correct editor document
+   *
+   * @param string aTextContent
+   *        The source text content.
+   *
+   * @param boolean shouldUpdateText
+            Forces a text and mode reset
+   */
+  _setEditorText: function (documentKey, aTextContent = "", shouldUpdateText = false) {
+    const isNew = this._setEditorDocument(documentKey);
+
+    this.editor.clearDebugLocation();
+    this.editor.clearHistory();
+    this.editor.removeBreakpoints();
+
+    // Only set editor's text and mode if it is a new document
+    if (isNew || shouldUpdateText) {
+      this.editor.setMode(Editor.modes.text);
+      this.editor.setText(aTextContent);
+    }
+  },
+
+  /**
+   * Sets the proper editor mode (JS or HTML) according to the specified
+   * content type, or by determining the type from the url or text content.
+   *
+   * @param string aUrl
+   *        The source url.
+   * @param string aContentType [optional]
+   *        The source content type.
+   * @param string aTextContent [optional]
+   *        The source text content.
+   */
+  _setEditorMode: function (aUrl, aContentType = "", aTextContent = "") {
+    // Use JS mode for files with .js and .jsm extensions.
+    if (SourceUtils.isJavaScript(aUrl, aContentType)) {
+      return void this.editor.setMode(Editor.modes.js);
+    }
+
+    if (aContentType === "text/wasm") {
+      return void this.editor.setMode(Editor.modes.text);
+    }
+
+    // Use HTML mode for files in which the first non whitespace character is
+    // <, regardless of extension.
+    if (aTextContent.match(/^\s*</)) {
+      return void this.editor.setMode(Editor.modes.html);
+    }
+
+    // Unknown language, use text.
+    this.editor.setMode(Editor.modes.text);
+  },
+
+  /**
+   * Sets the editor's displayed document.
+   * If there isn't a document for the source, create one
+   *
+   * @param string key - key used to access the editor document cache
+   *
+   * @return boolean isNew - was the document just created
+   */
+  _setEditorDocument: function (key) {
+    let isNew;
+
+    if (!this._editorDocuments[key]) {
+      isNew = true;
+      this._editorDocuments[key] = this.editor.createDocument();
+    } else {
+      isNew = false;
+    }
+
+    const doc = this._editorDocuments[key];
+    this.editor.replaceDocument(doc);
+    return isNew;
+  },
+
+  renderBlackBoxed: function (source) {
+    this._renderSourceText(
+      source,
+      queries.getSourceText(this.controller.getState(), source.actor)
+    );
+  },
+
+  renderPrettyPrinted: function (source) {
+    this._renderSourceText(
+      source,
+      queries.getSourceText(this.controller.getState(), source.actor)
+    );
+  },
+
+  renderSourceText: function (source) {
+    this._renderSourceText(
+      source,
+      queries.getSourceText(this.controller.getState(), source.actor),
+      queries.getSelectedSourceOpts(this.controller.getState())
+    );
+  },
+
+  _renderSourceText: function (source, textInfo, opts = {}) {
+    const selectedSource = queries.getSelectedSource(this.controller.getState());
+
+    // Exit early if we're attempting to render an unselected source
+    if (!selectedSource || selectedSource.actor !== source.actor) {
+      return;
+    }
+
+    if (source.isBlackBoxed) {
+      this.showBlackBoxMessage();
+      setTimeout(() => {
+        window.emit(EVENTS.SOURCE_SHOWN, source);
+      }, 0);
+      return;
+    }
+    else {
+      this.showEditor();
+    }
+
+    if (textInfo.loading) {
+      // TODO: bug 1228866, we need to update `_editorSource` here but
+      // still make the editor be updated when the full text comes
+      // through somehow.
+      this._setEditorText("loading", L10N.getStr("loadingText"));
+      return;
+    }
+    else if (textInfo.error) {
+      let msg = L10N.getFormatStr("errorLoadingText2", textInfo.error);
+      this._setEditorText("error", msg);
+      console.error(new Error(msg));
+      dumpn(msg);
+
+      this.showEditor();
+      window.emit(EVENTS.SOURCE_ERROR_SHOWN, source);
+      return;
+    }
+
+    // If the line is not specified, default to the current frame's position,
+    // if available and the frame's url corresponds to the requested url.
+    if (!("line" in opts)) {
+      let cachedFrames = DebuggerController.activeThread.cachedFrames;
+      let currentDepth = DebuggerController.StackFrames.currentFrameDepth;
+      let frame = cachedFrames[currentDepth];
+      if (frame && frame.source.actor == source.actor) {
+        opts.line = frame.where.line;
+      }
+    }
+
+    if (this._editorSource.actor === source.actor &&
+        this._editorSource.prettyPrinted === source.isPrettyPrinted &&
+        this._editorSource.blackboxed === source.isBlackBoxed) {
+      this.updateEditorPosition(opts);
+      return;
+    }
+
+    let { text, contentType } = textInfo;
+    let shouldUpdateText = this._editorSource.prettyPrinted != source.isPrettyPrinted;
+    this._setEditorText(source.actor, text, shouldUpdateText);
+
+    this._editorSource.actor = source.actor;
+    this._editorSource.prettyPrinted = source.isPrettyPrinted;
+    this._editorSource.blackboxed = source.isBlackBoxed;
+    this._editorSource.prettyPrinted = source.isPrettyPrinted;
+
+    this._setEditorMode(source.url, contentType, text);
+    this.updateEditorBreakpoints(source);
+
+    setTimeout(() => {
+      window.emit(EVENTS.SOURCE_SHOWN, source);
+    }, 0);
+
+    this.updateEditorPosition(opts);
+  },
+
+  updateEditorPosition: function (opts) {
+    let line = opts.line || 0;
+
+    // Line numbers in the source editor should start from 1. If
+    // invalid or not specified, then don't do anything.
+    if (line < 1) {
+      window.emit(EVENTS.EDITOR_LOCATION_SET);
+      return;
+    }
+
+    if (opts.charOffset) {
+      line += this.editor.getPosition(opts.charOffset).line;
+    }
+    if (opts.lineOffset) {
+      line += opts.lineOffset;
+    }
+    if (opts.moveCursor) {
+      let location = { line: line - 1, ch: opts.columnOffset || 0 };
+      this.editor.setCursor(location);
+    }
+    if (!opts.noDebug) {
+      this.editor.setDebugLocation(line - 1);
+    }
+    window.emit(EVENTS.EDITOR_LOCATION_SET);
+  },
+
+  /**
+   * Update the source editor's current caret and debug location based on
+   * a requested url and line.
+   *
+   * @param string aActor
+   *        The target actor id.
+   * @param number aLine [optional]
+   *        The target line in the source.
+   * @param object aFlags [optional]
+   *        Additional options for showing the source. Supported options:
+   *          - charOffset: character offset for the caret or debug location
+   *          - lineOffset: line offset for the caret or debug location
+   *          - columnOffset: column offset for the caret or debug location
+   *          - noCaret: don't set the caret location at the specified line
+   *          - noDebug: don't set the debug location at the specified line
+   *          - align: string specifying whether to align the specified line
+   *                   at the "top", "center" or "bottom" of the editor
+   *          - force: boolean forcing all text to be reshown in the editor
+   * @return object
+   *         A promise that is resolved after the source text has been set.
+   */
+  setEditorLocation: function (aActor, aLine, aFlags = {}) {
+    // Avoid trying to set a source for a url that isn't known yet.
+    if (!this.Sources.containsValue(aActor)) {
+      throw new Error("Unknown source for the specified URL.");
+    }
+
+    let sourceItem = this.Sources.getItemByValue(aActor);
+    let source = sourceItem.attachment.source;
+
+    // Make sure the requested source client is shown in the editor,
+    // then update the source editor's caret position and debug
+    // location.
+    this.controller.dispatch(actions.selectSource(source, {
+      line: aLine,
+      charOffset: aFlags.charOffset,
+      lineOffset: aFlags.lineOffset,
+      columnOffset: aFlags.columnOffset,
+      moveCursor: !aFlags.noCaret,
+      noDebug: aFlags.noDebug,
+      forceUpdate: aFlags.force
+    }));
+  },
+
+  /**
+   * Gets the visibility state of the instruments pane.
+   * @return boolean
+   */
+  get instrumentsPaneHidden() {
+    return this._instrumentsPane.classList.contains("pane-collapsed");
+  },
+
+  /**
+   * Gets the currently selected tab in the instruments pane.
+   * @return string
+   */
+  get instrumentsPaneTab() {
+    return this._instrumentsPane.selectedTab.id;
+  },
+
+  /**
+   * Sets the instruments pane hidden or visible.
+   *
+   * @param object aFlags
+   *        An object containing some of the following properties:
+   *        - visible: true if the pane should be shown, false to hide
+   *        - animated: true to display an animation on toggle
+   *        - delayed: true to wait a few cycles before toggle
+   *        - callback: a function to invoke when the toggle finishes
+   * @param number aTabIndex [optional]
+   *        The index of the intended selected tab in the details pane.
+   */
+  toggleInstrumentsPane: function (aFlags, aTabIndex) {
+    let pane = this._instrumentsPane;
+    let button = this._instrumentsPaneToggleButton;
+
+    ViewHelpers.togglePane(aFlags, pane);
+
+    if (aFlags.visible) {
+      button.classList.remove("pane-collapsed");
+      button.setAttribute("tooltiptext", this._collapsePaneString);
+    } else {
+      button.classList.add("pane-collapsed");
+      button.setAttribute("tooltiptext", this._expandPaneString);
+    }
+
+    if (aTabIndex !== undefined) {
+      pane.selectedIndex = aTabIndex;
+    }
+  },
+
+  /**
+   * Sets the instruments pane visible after a short period of time.
+   *
+   * @param function aCallback
+   *        A function to invoke when the toggle finishes.
+   */
+  showInstrumentsPane: function (aCallback) {
+    DebuggerView.toggleInstrumentsPane({
+      visible: true,
+      animated: true,
+      delayed: true,
+      callback: aCallback
+    }, 0);
+  },
+
+  /**
+   * Handles a tab selection event on the instruments pane.
+   */
+  _onInstrumentsPaneTabSelect: function () {
+    if (this._instrumentsPane.selectedTab.id == "events-tab") {
+      this.controller.dispatch(actions.fetchEventListeners());
+    }
+  },
+
+  /**
+   * Handles a host change event issued by the parent toolbox.
+   *
+   * @param string aType
+   *        The host type, either "bottom", "side" or "window".
+   */
+  handleHostChanged: function (hostType) {
+    this._hostType = hostType;
+    this.updateLayoutMode();
+  },
+
+  /**
+   * Resize handler for this container's window.
+   */
+  _onResize: function (evt) {
+    // Allow requests to settle down first.
+    setNamedTimeout(
+      "resize-events", RESIZE_REFRESH_RATE, () => this.updateLayoutMode());
+  },
+
+  /**
+   * Set the layout to "vertical" or "horizontal" depending on the host type.
+   */
+  updateLayoutMode: function () {
+    if (this._isSmallWindowHost() || this._hostType == "side") {
+      this._setLayoutMode("vertical");
+    } else {
+      this._setLayoutMode("horizontal");
+    }
+  },
+
+  /**
+   * Check if the current host is in window mode and is
+   * too small for horizontal layout
+   */
+  _isSmallWindowHost: function () {
+    if (this._hostType != "window") {
+      return false;
+    }
+
+    return window.outerWidth <= BREAKPOINT_SMALL_WINDOW_WIDTH;
+  },
+
+  /**
+   * Enter the provided layoutMode. Do nothing if the layout is the same as the current one.
+   * @param {String} layoutMode new layout ("vertical" or "horizontal")
+   */
+  _setLayoutMode: function (layoutMode) {
+    if (this._body.getAttribute("layout") == layoutMode) {
+      return;
+    }
+
+    if (layoutMode == "vertical") {
+      this._enterVerticalLayout();
+    } else {
+      this._enterHorizontalLayout();
+    }
+
+    this._body.setAttribute("layout", layoutMode);
+    window.emit(EVENTS.LAYOUT_CHANGED, layoutMode);
+  },
+
+  /**
+   * Switches the debugger widgets to a vertical layout.
+   */
+  _enterVerticalLayout: function () {
+    let vertContainer = document.getElementById("vertical-layout-panes-container");
+
+    // Move the soruces and instruments panes in a different container.
+    let splitter = document.getElementById("sources-and-instruments-splitter");
+    vertContainer.insertBefore(this._workersAndSourcesPane, splitter);
+    vertContainer.appendChild(this._instrumentsPane);
+
+    // Make sure the vertical layout container's height doesn't repeatedly
+    // grow or shrink based on the displayed sources, variables etc.
+    vertContainer.setAttribute("height",
+      vertContainer.getBoundingClientRect().height);
+  },
+
+  /**
+   * Switches the debugger widgets to a horizontal layout.
+   */
+  _enterHorizontalLayout: function () {
+    let normContainer = document.getElementById("debugger-widgets");
+    let editorPane = document.getElementById("editor-and-instruments-pane");
+
+    // The sources and instruments pane need to be inserted at their
+    // previous locations in their normal container.
+    let splitter = document.getElementById("sources-and-editor-splitter");
+    normContainer.insertBefore(this._workersAndSourcesPane, splitter);
+    editorPane.appendChild(this._instrumentsPane);
+
+    // Revert to the preferred sources and instruments widths, because
+    // they flexed in the vertical layout.
+    this._workersAndSourcesPane.setAttribute("width", Prefs.workersAndSourcesWidth);
+    this._instrumentsPane.setAttribute("width", Prefs.instrumentsWidth);
+  },
+
+  /**
+   * Handles any initialization on a tab navigation event issued by the client.
+   */
+  handleTabNavigation: function () {
+    dumpn("Handling tab navigation in the DebuggerView");
+    this.Filtering.clearSearch();
+    this.GlobalSearch.clearView();
+    this.StackFrames.empty();
+    this.Sources.empty();
+    this.Variables.empty();
+    this.EventListeners.empty();
+
+    if (this.editor) {
+      this.editor.setMode(Editor.modes.text);
+      this.editor.setText("");
+      this.editor.clearHistory();
+      this._editorSource = {};
+      this._editorDocuments = {};
+    }
+  },
+
+  Toolbar: null,
+  Options: null,
+  Filtering: null,
+  GlobalSearch: null,
+  StackFrames: null,
+  Sources: null,
+  Variables: null,
+  VariableBubble: null,
+  WatchExpressions: null,
+  EventListeners: null,
+  editor: null,
+  _loadingText: "",
+  _body: null,
+  _editorDeck: null,
+  _workersAndSourcesPane: null,
+  _instrumentsPane: null,
+  _instrumentsPaneToggleButton: null,
+  _collapsePaneString: "",
+  _expandPaneString: ""
+};
+
+/**
+ * A custom items container, used for displaying views like the
+ * FilteredSources, FilteredFunctions etc., inheriting the generic WidgetMethods.
+ */
+function ResultsPanelContainer() {
+}
+
+ResultsPanelContainer.prototype = Heritage.extend(WidgetMethods, {
+  /**
+   * Sets the anchor node for this container panel.
+   * @param nsIDOMNode aNode
+   */
+  set anchor(aNode) {
+    this._anchor = aNode;
+
+    // If the anchor node is not null, create a panel to attach to the anchor
+    // when showing the popup.
+    if (aNode) {
+      if (!this._panel) {
+        this._panel = document.createElement("panel");
+        this._panel.id = "results-panel";
+        this._panel.setAttribute("level", "top");
+        this._panel.setAttribute("noautofocus", "true");
+        this._panel.setAttribute("consumeoutsideclicks", "false");
+        document.documentElement.appendChild(this._panel);
+      }
+      if (!this.widget) {
+        this.widget = new SimpleListWidget(this._panel);
+        this.autoFocusOnFirstItem = false;
+        this.autoFocusOnSelection = false;
+        this.maintainSelectionVisible = false;
+      }
+    }
+    // Cleanup the anchor and remove the previously created panel.
+    else {
+      this._panel.remove();
+      this._panel = null;
+      this.widget = null;
+    }
+  },
+
+  /**
+   * Gets the anchor node for this container panel.
+   * @return nsIDOMNode
+   */
+  get anchor() {
+    return this._anchor;
+  },
+
+  /**
+   * Sets the container panel hidden or visible. It's hidden by default.
+   * @param boolean aFlag
+   */
+  set hidden(aFlag) {
+    if (aFlag) {
+      this._panel.hidden = true;
+      this._panel.hidePopup();
+    } else {
+      this._panel.hidden = false;
+      this._panel.openPopup(this._anchor, this.position, this.left, this.top);
+    }
+  },
+
+  /**
+   * Gets this container's visibility state.
+   * @return boolean
+   */
+  get hidden() {
+    return this._panel.state == "closed" ||
+           this._panel.state == "hiding";
+  },
+
+  /**
+   * Removes all items from this container and hides it.
+   */
+  clearView: function () {
+    this.hidden = true;
+    this.empty();
+  },
+
+  /**
+   * Selects the next found item in this container.
+   * Does not change the currently focused node.
+   */
+  selectNext: function () {
+    let nextIndex = this.selectedIndex + 1;
+    if (nextIndex >= this.itemCount) {
+      nextIndex = 0;
+    }
+    this.selectedItem = this.getItemAtIndex(nextIndex);
+  },
+
+  /**
+   * Selects the previously found item in this container.
+   * Does not change the currently focused node.
+   */
+  selectPrev: function () {
+    let prevIndex = this.selectedIndex - 1;
+    if (prevIndex < 0) {
+      prevIndex = this.itemCount - 1;
+    }
+    this.selectedItem = this.getItemAtIndex(prevIndex);
+  },
+
+  /**
+   * Customization function for creating an item's UI.
+   *
+   * @param string aLabel
+   *        The item's label string.
+   * @param string aBeforeLabel
+   *        An optional string shown before the label.
+   * @param string aBelowLabel
+   *        An optional string shown underneath the label.
+   */
+  _createItemView: function (aLabel, aBelowLabel, aBeforeLabel) {
+    let container = document.createElement("vbox");
+    container.className = "results-panel-item";
+
+    let firstRowLabels = document.createElement("hbox");
+    let secondRowLabels = document.createElement("hbox");
+
+    if (aBeforeLabel) {
+      let beforeLabelNode = document.createElement("label");
+      beforeLabelNode.className = "plain results-panel-item-label-before";
+      beforeLabelNode.setAttribute("value", aBeforeLabel);
+      firstRowLabels.appendChild(beforeLabelNode);
+    }
+
+    let labelNode = document.createElement("label");
+    labelNode.className = "plain results-panel-item-label";
+    labelNode.setAttribute("value", aLabel);
+    firstRowLabels.appendChild(labelNode);
+
+    if (aBelowLabel) {
+      let belowLabelNode = document.createElement("label");
+      belowLabelNode.className = "plain results-panel-item-label-below";
+      belowLabelNode.setAttribute("value", aBelowLabel);
+      secondRowLabels.appendChild(belowLabelNode);
+    }
+
+    container.appendChild(firstRowLabels);
+    container.appendChild(secondRowLabels);
+
+    return container;
+  },
+
+  _anchor: null,
+  _panel: null,
+  position: RESULTS_PANEL_POPUP_POSITION,
+  left: 0,
+  top: 0
+});
+
+DebuggerView.EventListeners = new EventListenersView(DebuggerController);
+DebuggerView.Sources = new SourcesView(DebuggerController, DebuggerView);