The Tor Browser: browser/devtools/debugger/debugger-view.js@b8a032363ba2 (annotated)

browser/devtools/debugger/debugger-view.js@b8a032363ba2 (annotated)

browser/devtools/debugger/debugger-view.js

Thu, 22 Jan 2015 13:21:57 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Thu, 22 Jan 2015 13:21:57 +0100
branch: TOR_BUG_9701
changeset 15: b8a032363ba2
permissions: -rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE = 1048576; // 1 MB in bytes
 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_LINE_TOOLTIP_MAX_LENGTH = 1000; // chars
 const BREAKPOINT_CONDITIONAL_POPUP_POSITION = "before_start";
 const BREAKPOINT_CONDITIONAL_POPUP_OFFSET_X = 7; // px
 const BREAKPOINT_CONDITIONAL_POPUP_OFFSET_Y = -3; // 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 EDITOR_VARIABLE_HOVER_DELAY = 350; // ms
 const EDITOR_VARIABLE_POPUP_POSITION = "topcenter bottomleft";
 const TOOLBAR_ORDER_POPUP_POSITION = "topcenter bottomleft";
 /**
  * Object defining the debugger view components.
  */
 let DebuggerView = {
   /**
    * Initializes the debugger view.
    *
    * @return object
    *         A promise that is resolved when the view finishes initializing.
    */
   initialize: function() {
     if (this._startup) {
       return this._startup;
     }
     let deferred = promise.defer();
     this._startup = deferred.promise;
     this._initializePanes();
     this.Toolbar.initialize();
     this.Options.initialize();
     this.Filtering.initialize();
     this.FilteredSources.initialize();
     this.FilteredFunctions.initialize();
     this.StackFrames.initialize();
     this.StackFramesClassicList.initialize();
     this.Sources.initialize();
     this.VariableBubble.initialize();
     this.Tracer.initialize();
     this.WatchExpressions.initialize();
     this.EventListeners.initialize();
     this.GlobalSearch.initialize();
     this._initializeVariablesView();
     this._initializeEditor(deferred.resolve);
     document.title = L10N.getStr("DebuggerWindowTitle");
     return deferred.promise;
   },
   /**
    * Destroys the debugger view.
    *
    * @return object
    *         A promise that is resolved when the view finishes destroying.
    */
   destroy: function() {
     if (this._shutdown) {
       return this._shutdown;
     }
     let deferred = promise.defer();
     this._shutdown = deferred.promise;
     this.Toolbar.destroy();
     this.Options.destroy();
     this.Filtering.destroy();
     this.FilteredSources.destroy();
     this.FilteredFunctions.destroy();
     this.StackFrames.destroy();
     this.StackFramesClassicList.destroy();
     this.Sources.destroy();
     this.VariableBubble.destroy();
     this.Tracer.destroy();
     this.WatchExpressions.destroy();
     this.EventListeners.destroy();
     this.GlobalSearch.destroy();
     this._destroyPanes();
     this._destroyEditor(deferred.resolve);
     return deferred.promise;
   },
   /**
    * 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._sourcesPane = document.getElementById("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.maybeShowBlackBoxMessage = this.maybeShowBlackBoxMessage.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._sourcesPane.setAttribute("width", Prefs.sourcesWidth);
     this._instrumentsPane.setAttribute("width", Prefs.instrumentsWidth);
     this.toggleInstrumentsPane({ visible: Prefs.panesVisibleOnStartup });
     // Side hosts requires a different arrangement of the debugger widgets.
     if (gHostType == "side") {
       this.handleHostChanged(gHostType);
     }
   },
   /**
    * Destroys the UI for all the displayed panes.
    */
   _destroyPanes: function() {
     dumpn("Destroying the DebuggerView panes");
     if (gHostType != "side") {
       Prefs.sourcesWidth = this._sourcesPane.getAttribute("width");
       Prefs.instrumentsWidth = this._instrumentsPane.getAttribute("width");
     }
     this._sourcesPane = 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 aObject instanceof DebuggerController.Tracer.WrappedObject
           ? DebuggerController.Tracer.syncGripClient(aObject.object)
           : 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(aCallback) {
     dumpn("Initializing the DebuggerView editor");
     let extraKeys = {};
     bindKey("_doTokenSearch", "tokenSearchKey");
     bindKey("_doGlobalSearch", "globalSearchKey", { alt: true });
     bindKey("_doFunctionSearch", "functionSearchKey");
     extraKeys[Editor.keyFor("jumpToLine")] = false;
     function bindKey(func, key, modifiers = {}) {
       let key = document.getElementById(key).getAttribute("key");
       let shortcut = Editor.accel(key, modifiers);
       extraKeys[shortcut] = () => DebuggerView.Filtering[func]();
     }
     this.editor = new Editor({
       mode: Editor.modes.text,
       readOnly: true,
       lineNumbers: true,
       showAnnotationRuler: true,
       gutters: [ "breakpoints" ],
       extraKeys: extraKeys,
       contextMenu: "sourceEditorContextMenu"
     });
     this.editor.appendTo(document.getElementById("editor")).then(() => {
       this.editor.extend(DebuggerEditor);
       this._loadingText = L10N.getStr("loadingText");
       this._onEditorLoad(aCallback);
     });
     this.editor.on("gutterClick", (ev, line) => {
       if (this.editor.hasBreakpoint(line)) {
         this.editor.removeBreakpoint(line);
       } else {
         this.editor.addBreakpoint(line);
       }
     });
   },
   /**
    * The load event handler for the source editor, also executing any necessary
    * post-load operations.
    *
    * @param function aCallback
    *        Called after the editor finishes loading.
    */
   _onEditorLoad: function(aCallback) {
     dumpn("Finished loading the DebuggerView editor");
     DebuggerController.Breakpoints.initialize().then(() => {
       window.emit(EVENTS.EDITOR_LOADED, this.editor);
       aCallback();
     });
   },
   /**
    * Destroys the Editor instance and also executes any necessary
    * post-unload operations.
    *
    * @param function aCallback
    *        Called after the editor finishes destroying.
    */
   _destroyEditor: function(aCallback) {
     dumpn("Destroying the DebuggerView editor");
     DebuggerController.Breakpoints.destroy().then(() => {
       window.emit(EVENTS.EDITOR_UNLOADED, this.editor);
       this.editor.destroy();
       this.editor = null;
       aCallback();
     });
   },
   /**
    * 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;
   },
   /**
    * Show or hide the black box message vs. source editor depending on if the
    * selected source is black boxed or not.
    */
   maybeShowBlackBoxMessage: function() {
     let { source } = DebuggerView.Sources.selectedItem.attachment;
     if (gThreadClient.source(source).isBlackBoxed) {
       this.showBlackBoxMessage();
     } else {
       this.showEditor();
     }
   },
   /**
    * Sets the currently displayed text contents in the source editor.
    * This resets the mode and undo stack.
    *
    * @param string aTextContent
    *        The source text content.
    */
   _setEditorText: function(aTextContent = "") {
     this.editor.setMode(Editor.modes.text);
     this.editor.setText(aTextContent);
     this.editor.clearDebugLocation();
     this.editor.clearHistory();
   },
   /**
    * 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 = "") {
     // Avoid setting the editor mode for very large files.
     // Is this still necessary? See bug 929225.
     if (aTextContent.length >= SOURCE_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE) {
       return void this.editor.setMode(Editor.modes.text);
     }
     // Use JS mode for files with .js and .jsm extensions.
     if (SourceUtils.isJavaScript(aUrl, aContentType)) {
       return void this.editor.setMode(Editor.modes.js);
     }
     // Use HTML mode for files in which the first non whitespace character is
     // &lt;, 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 currently displayed source text in the editor.
    *
    * You should use DebuggerView.updateEditor instead. It updates the current
    * caret and debug location based on a requested url and line.
    *
    * @param object aSource
    *        The source object coming from the active thread.
    * @param object aFlags
    *        Additional options for setting the source. Supported options:
    *          - force: boolean allowing whether we can get the selected url's
    *                   text again.
    * @return object
    *         A promise that is resolved after the source text has been set.
    */
   _setEditorSource: function(aSource, aFlags={}) {
     // Avoid setting the same source text in the editor again.
     if (this._editorSource.url == aSource.url && !aFlags.force) {
       return this._editorSource.promise;
     }
     let transportType = gClient.localTransport ? "_LOCAL" : "_REMOTE";
     let histogramId = "DEVTOOLS_DEBUGGER_DISPLAY_SOURCE" + transportType + "_MS";
     let histogram = Services.telemetry.getHistogramById(histogramId);
     let startTime = Date.now();
     let deferred = promise.defer();
     this._setEditorText(L10N.getStr("loadingText"));
     this._editorSource = { url: aSource.url, promise: deferred.promise };
     DebuggerController.SourceScripts.getText(aSource).then(([, aText, aContentType]) => {
       // Avoid setting an unexpected source. This may happen when switching
       // very fast between sources that haven't been fetched yet.
       if (this._editorSource.url != aSource.url) {
         return;
       }
       this._setEditorText(aText);
       this._setEditorMode(aSource.url, aContentType, aText);
       // Synchronize any other components with the currently displayed source.
       DebuggerView.Sources.selectedValue = aSource.url;
       DebuggerController.Breakpoints.updateEditorBreakpoints();
       histogram.add(Date.now() - startTime);
       // Resolve and notify that a source file was shown.
       window.emit(EVENTS.SOURCE_SHOWN, aSource);
       deferred.resolve([aSource, aText, aContentType]);
     },
     ([, aError]) => {
       let msg = L10N.getStr("errorLoadingText") + DevToolsUtils.safeErrorString(aError);
       this._setEditorText(msg);
       Cu.reportError(msg);
       dumpn(msg);
       // Reject and notify that there was an error showing the source file.
       window.emit(EVENTS.SOURCE_ERROR_SHOWN, aSource);
       deferred.reject([aSource, aError]);
     });
     return deferred.promise;
   },
   /**
    * Update the source editor's current caret and debug location based on
    * a requested url and line.
    *
    * @param string aUrl
    *        The target source url.
    * @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 allowing whether we can get the selected url's
    *                   text again
    * @return object
    *         A promise that is resolved after the source text has been set.
    */
   setEditorLocation: function(aUrl, aLine = 0, aFlags = {}) {
     // Avoid trying to set a source for a url that isn't known yet.
     if (!this.Sources.containsValue(aUrl)) {
       return promise.reject(new Error("Unknown source for the specified URL."));
     }
     // 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 (!aLine) {
       let cachedFrames = DebuggerController.activeThread.cachedFrames;
       let currentDepth = DebuggerController.StackFrames.currentFrameDepth;
       let frame = cachedFrames[currentDepth];
       if (frame && frame.where.url == aUrl) {
         aLine = frame.where.line;
       }
     }
     let sourceItem = this.Sources.getItemByValue(aUrl);
     let sourceForm = 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.
     return this._setEditorSource(sourceForm, aFlags).then(([,, aContentType]) => {
       // Record the contentType learned from fetching
       sourceForm.contentType = aContentType;
       // Line numbers in the source editor should start from 1. If invalid
       // or not specified, then don't do anything.
       if (aLine < 1) {
         window.emit(EVENTS.EDITOR_LOCATION_SET);
         return;
       }
       if (aFlags.charOffset) {
         aLine += this.editor.getPosition(aFlags.charOffset).line;
       }
       if (aFlags.lineOffset) {
         aLine += aFlags.lineOffset;
       }
       if (!aFlags.noCaret) {
         let location = { line: aLine -1, ch: aFlags.columnOffset || 0 };
         this.editor.setCursor(location, aFlags.align);
       }
       if (!aFlags.noDebug) {
         this.editor.setDebugLocation(aLine - 1);
       }
       window.emit(EVENTS.EDITOR_LOCATION_SET);
     }).then(null, console.error);
   },
   /**
    * Gets the visibility state of the instruments pane.
    * @return boolean
    */
   get instrumentsPaneHidden()
     this._instrumentsPane.hasAttribute("pane-collapsed"),
   /**
    * Gets the currently selected tab in the instruments pane.
    * @return string
    */
   get instrumentsPaneTab()
     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.removeAttribute("pane-collapsed");
       button.setAttribute("tooltiptext", this._collapsePaneString);
     } else {
       button.setAttribute("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") {
       DebuggerController.Breakpoints.DOM.scheduleEventListenersFetch();
     }
   },
   /**
    * Handles a host change event issued by the parent toolbox.
    *
    * @param string aType
    *        The host type, either "bottom", "side" or "window".
    */
   handleHostChanged: function(aType) {
     let newLayout = "";
     if (aType == "side") {
       newLayout = "vertical";
       this._enterVerticalLayout();
     } else {
       newLayout = "horizontal";
       this._enterHorizontalLayout();
     }
     this._hostType = aType;
     this._body.setAttribute("layout", newLayout);
     window.emit(EVENTS.LAYOUT_CHANGED, newLayout);
   },
   /**
    * Switches the debugger widgets to a horizontal layout.
    */
   _enterVerticalLayout: function() {
     let normContainer = document.getElementById("debugger-widgets");
     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._sourcesPane, 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 vertical layout.
    */
   _enterHorizontalLayout: function() {
     let normContainer = document.getElementById("debugger-widgets");
     let vertContainer = document.getElementById("vertical-layout-panes-container");
     // 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._sourcesPane, splitter);
     normContainer.appendChild(this._instrumentsPane);
     // Revert to the preferred sources and instruments widths, because
     // they flexed in the vertical layout.
     this._sourcesPane.setAttribute("width", Prefs.sourcesWidth);
     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.FilteredSources.clearView();
     this.FilteredFunctions.clearView();
     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.Sources.emptyText = L10N.getStr("loadingSourcesText");
   },
   _startup: null,
   _shutdown: null,
   Toolbar: null,
   Options: null,
   Filtering: null,
   FilteredSources: null,
   FilteredFunctions: null,
   GlobalSearch: null,
   StackFrames: null,
   Sources: null,
   Tracer: null,
   Variables: null,
   VariableBubble: null,
   WatchExpressions: null,
   EventListeners: null,
   editor: null,
   _editorSource: {},
   _loadingText: "",
   _body: null,
   _editorDeck: null,
   _sourcesPane: 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()
     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
 });