The Tor Browser / file revision

 /* -*- 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";

 XPCOMUtils.defineLazyModuleGetter(this, "Task",

                                   "resource://gre/modules/Task.jsm");

 // Used to detect minification for automatic pretty printing

 const SAMPLE_SIZE = 50; // no of lines

 const INDENT_COUNT_THRESHOLD = 5; // percentage

 const CHARACTER_LIMIT = 250; // line character limit

 // Maps known URLs to friendly source group names

 const KNOWN_SOURCE_GROUPS = {

   "Add-on SDK": "resource://gre/modules/commonjs/",

 };

 /**

  * Functions handling the sources UI.

  */

 function SourcesView() {

   dumpn("SourcesView was instantiated");

   this.togglePrettyPrint = this.togglePrettyPrint.bind(this);

   this.toggleBlackBoxing = this.toggleBlackBoxing.bind(this);

   this.toggleBreakpoints = this.toggleBreakpoints.bind(this);

   this._onEditorLoad = this._onEditorLoad.bind(this);

   this._onEditorUnload = this._onEditorUnload.bind(this);

   this._onEditorCursorActivity = this._onEditorCursorActivity.bind(this);

   this._onSourceSelect = this._onSourceSelect.bind(this);

   this._onStopBlackBoxing = this._onStopBlackBoxing.bind(this);

   this._onBreakpointRemoved = this._onBreakpointRemoved.bind(this);

   this._onBreakpointClick = this._onBreakpointClick.bind(this);

   this._onBreakpointCheckboxClick = this._onBreakpointCheckboxClick.bind(this);

   this._onConditionalPopupShowing = this._onConditionalPopupShowing.bind(this);

   this._onConditionalPopupShown = this._onConditionalPopupShown.bind(this);

   this._onConditionalPopupHiding = this._onConditionalPopupHiding.bind(this);

   this._onConditionalTextboxKeyPress = this._onConditionalTextboxKeyPress.bind(this);

   this.updateToolbarButtonsState = this.updateToolbarButtonsState.bind(this);

 }

 SourcesView.prototype = Heritage.extend(WidgetMethods, {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the SourcesView");

     this.widget = new SideMenuWidget(document.getElementById("sources"), {

       showArrows: true

     });

     // Sort known source groups towards the end of the list

     this.widget.groupSortPredicate = function(a, b) {

       if ((a in KNOWN_SOURCE_GROUPS) == (b in KNOWN_SOURCE_GROUPS)) {

         return a.localeCompare(b);

       }

       return (a in KNOWN_SOURCE_GROUPS) ? 1 : -1;

     };

     this.emptyText = L10N.getStr("noSourcesText");

     this._blackBoxCheckboxTooltip = L10N.getStr("blackBoxCheckboxTooltip");

     this._commandset = document.getElementById("debuggerCommands");

     this._popupset = document.getElementById("debuggerPopupset");

     this._cmPopup = document.getElementById("sourceEditorContextMenu");

     this._cbPanel = document.getElementById("conditional-breakpoint-panel");

     this._cbTextbox = document.getElementById("conditional-breakpoint-panel-textbox");

     this._blackBoxButton = document.getElementById("black-box");

     this._stopBlackBoxButton = document.getElementById("black-boxed-message-button");

     this._prettyPrintButton = document.getElementById("pretty-print");

     this._toggleBreakpointsButton = document.getElementById("toggle-breakpoints");

     if (Prefs.prettyPrintEnabled) {

       this._prettyPrintButton.removeAttribute("hidden");

     }

     window.on(EVENTS.EDITOR_LOADED, this._onEditorLoad, false);

     window.on(EVENTS.EDITOR_UNLOADED, this._onEditorUnload, false);

     this.widget.addEventListener("select", this._onSourceSelect, false);

     this._stopBlackBoxButton.addEventListener("click", this._onStopBlackBoxing, false);

     this._cbPanel.addEventListener("popupshowing", this._onConditionalPopupShowing, false);

     this._cbPanel.addEventListener("popupshown", this._onConditionalPopupShown, false);

     this._cbPanel.addEventListener("popuphiding", this._onConditionalPopupHiding, false);

     this._cbTextbox.addEventListener("keypress", this._onConditionalTextboxKeyPress, false);

     this.autoFocusOnSelection = false;

     // Sort the contents by the displayed label.

     this.sortContents((aFirst, aSecond) => {

       return +(aFirst.attachment.label.toLowerCase() >

                aSecond.attachment.label.toLowerCase());

     });

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the SourcesView");

     window.off(EVENTS.EDITOR_LOADED, this._onEditorLoad, false);

     window.off(EVENTS.EDITOR_UNLOADED, this._onEditorUnload, false);

     this.widget.removeEventListener("select", this._onSourceSelect, false);

     this._stopBlackBoxButton.removeEventListener("click", this._onStopBlackBoxing, false);

     this._cbPanel.removeEventListener("popupshowing", this._onConditionalPopupShowing, false);

     this._cbPanel.removeEventListener("popupshowing", this._onConditionalPopupShown, false);

     this._cbPanel.removeEventListener("popuphiding", this._onConditionalPopupHiding, false);

     this._cbTextbox.removeEventListener("keypress", this._onConditionalTextboxKeyPress, false);

   },

   /**

    * Sets the preferred location to be selected in this sources container.

    * @param string aUrl

    */

   set preferredSource(aUrl) {

     this._preferredValue = aUrl;

     // Selects the element with the specified value in this sources container,

     // if already inserted.

     if (this.containsValue(aUrl)) {

       this.selectedValue = aUrl;

     }

   },

   /**

    * Adds a source to this sources container.

    *

    * @param object aSource

    *        The source object coming from the active thread.

    * @param object aOptions [optional]

    *        Additional options for adding the source. Supported options:

    *        - staged: true to stage the item to be appended later

    */

   addSource: function(aSource, aOptions = {}) {

     let fullUrl = aSource.url;

     let url = fullUrl.split(" -> ").pop();

     let label = aSource.addonPath ? aSource.addonPath : SourceUtils.getSourceLabel(url);

     let group = aSource.addonID ? aSource.addonID : SourceUtils.getSourceGroup(url);

     let unicodeUrl = NetworkHelper.convertToUnicode(unescape(fullUrl));

     let contents = document.createElement("label");

     contents.className = "plain dbg-source-item";

     contents.setAttribute("value", label);

     contents.setAttribute("crop", "start");

     contents.setAttribute("flex", "1");

     contents.setAttribute("tooltiptext", unicodeUrl);

     // Append a source item to this container.

     this.push([contents, fullUrl], {

       staged: aOptions.staged, /* stage the item to be appended later? */

       attachment: {

         label: label,

         group: group,

         checkboxState: !aSource.isBlackBoxed,

         checkboxTooltip: this._blackBoxCheckboxTooltip,

         source: aSource

       }

     });

   },

   /**

    * Adds a breakpoint to this sources container.

    *

    * @param object aBreakpointData

    *        Information about the breakpoint to be shown.

    *        This object must have the following properties:

    *          - location: the breakpoint's source location and line number

    *          - disabled: the breakpoint's disabled state, boolean

    *          - text: the breakpoint's line text to be displayed

    * @param object aOptions [optional]

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   addBreakpoint: function(aBreakpointData, aOptions = {}) {

     let { location, disabled } = aBreakpointData;

     // Make sure we're not duplicating anything. If a breakpoint at the

     // specified source url and line already exists, just toggle it.

     if (this.getBreakpoint(location)) {

       this[disabled ? "disableBreakpoint" : "enableBreakpoint"](location);

       return;

     }

     // Get the source item to which the breakpoint should be attached.

     let sourceItem = this.getItemByValue(location.url);

     // Create the element node and menu popup for the breakpoint item.

     let breakpointArgs = Heritage.extend(aBreakpointData, aOptions);

     let breakpointView = this._createBreakpointView.call(this, breakpointArgs);

     let contextMenu = this._createContextMenu.call(this, breakpointArgs);

     // Append a breakpoint child item to the corresponding source item.

     sourceItem.append(breakpointView.container, {

       attachment: Heritage.extend(breakpointArgs, {

         url: location.url,

         line: location.line,

         view: breakpointView,

         popup: contextMenu

       }),

       attributes: [

         ["contextmenu", contextMenu.menupopupId]

       ],

       // Make sure that when the breakpoint item is removed, the corresponding

       // menupopup and commandset are also destroyed.

       finalize: this._onBreakpointRemoved

     });

     // Highlight the newly appended breakpoint child item if necessary.

     if (aOptions.openPopup || !aOptions.noEditorUpdate) {

       this.highlightBreakpoint(location, aOptions);

     }

   },

   /**

    * Removes a breakpoint from this sources container.

    * It does not also remove the breakpoint from the controller. Be careful.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   removeBreakpoint: function(aLocation) {

     // When a parent source item is removed, all the child breakpoint items are

     // also automagically removed.

     let sourceItem = this.getItemByValue(aLocation.url);

     if (!sourceItem) {

       return;

     }

     let breakpointItem = this.getBreakpoint(aLocation);

     if (!breakpointItem) {

       return;

     }

     // Clear the breakpoint view.

     sourceItem.remove(breakpointItem);

   },

   /**

    * Returns the breakpoint at the specified source url and line.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    * @return object

    *         The corresponding breakpoint item if found, null otherwise.

    */

   getBreakpoint: function(aLocation) {

     return this.getItemForPredicate(aItem =>

       aItem.attachment.url == aLocation.url &&

       aItem.attachment.line == aLocation.line);

   },

   /**

    * Returns all breakpoints for all sources.

    *

    * @return array

    *         The breakpoints for all sources if any, an empty array otherwise.

    */

   getAllBreakpoints: function(aStore = []) {

     return this.getOtherBreakpoints(undefined, aStore);

   },

   /**

    * Returns all breakpoints which are not at the specified source url and line.

    *

    * @param object aLocation [optional]

    *        @see DebuggerController.Breakpoints.addBreakpoint

    * @param array aStore [optional]

    *        A list in which to store the corresponding breakpoints.

    * @return array

    *         The corresponding breakpoints if found, an empty array otherwise.

    */

   getOtherBreakpoints: function(aLocation = {}, aStore = []) {

     for (let source of this) {

       for (let breakpointItem of source) {

         let { url, line } = breakpointItem.attachment;

         if (url != aLocation.url || line != aLocation.line) {

           aStore.push(breakpointItem);

         }

       }

     }

     return aStore;

   },

   /**

    * Enables a breakpoint.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    * @param object aOptions [optional]

    *        Additional options or flags supported by this operation:

    *          - silent: pass true to not update the checkbox checked state;

    *                    this is usually necessary when the checked state will

    *                    be updated automatically (e.g: on a checkbox click).

    * @return object

    *         A promise that is resolved after the breakpoint is enabled, or

    *         rejected if no breakpoint was found at the specified location.

    */

   enableBreakpoint: function(aLocation, aOptions = {}) {

     let breakpointItem = this.getBreakpoint(aLocation);

     if (!breakpointItem) {

       return promise.reject(new Error("No breakpoint found."));

     }

     // Breakpoint will now be enabled.

     let attachment = breakpointItem.attachment;

     attachment.disabled = false;

     // Update the corresponding menu items to reflect the enabled state.

     let prefix = "bp-cMenu-"; // "breakpoints context menu"

     let identifier = DebuggerController.Breakpoints.getIdentifier(attachment);

     let enableSelfId = prefix + "enableSelf-" + identifier + "-menuitem";

     let disableSelfId = prefix + "disableSelf-" + identifier + "-menuitem";

     document.getElementById(enableSelfId).setAttribute("hidden", "true");

     document.getElementById(disableSelfId).removeAttribute("hidden");

     // Update the breakpoint toggle button checked state.

     this._toggleBreakpointsButton.removeAttribute("checked");

     // Update the checkbox state if necessary.

     if (!aOptions.silent) {

       attachment.view.checkbox.setAttribute("checked", "true");

     }

     return DebuggerController.Breakpoints.addBreakpoint(aLocation, {

       // No need to update the pane, since this method is invoked because

       // a breakpoint's view was interacted with.

       noPaneUpdate: true

     });

   },

   /**

    * Disables a breakpoint.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    * @param object aOptions [optional]

    *        Additional options or flags supported by this operation:

    *          - silent: pass true to not update the checkbox checked state;

    *                    this is usually necessary when the checked state will

    *                    be updated automatically (e.g: on a checkbox click).

    * @return object

    *         A promise that is resolved after the breakpoint is disabled, or

    *         rejected if no breakpoint was found at the specified location.

    */

   disableBreakpoint: function(aLocation, aOptions = {}) {

     let breakpointItem = this.getBreakpoint(aLocation);

     if (!breakpointItem) {

       return promise.reject(new Error("No breakpoint found."));

     }

     // Breakpoint will now be disabled.

     let attachment = breakpointItem.attachment;

     attachment.disabled = true;

     // Update the corresponding menu items to reflect the disabled state.

     let prefix = "bp-cMenu-"; // "breakpoints context menu"

     let identifier = DebuggerController.Breakpoints.getIdentifier(attachment);

     let enableSelfId = prefix + "enableSelf-" + identifier + "-menuitem";

     let disableSelfId = prefix + "disableSelf-" + identifier + "-menuitem";

     document.getElementById(enableSelfId).removeAttribute("hidden");

     document.getElementById(disableSelfId).setAttribute("hidden", "true");

     // Update the checkbox state if necessary.

     if (!aOptions.silent) {

       attachment.view.checkbox.removeAttribute("checked");

     }

     return DebuggerController.Breakpoints.removeBreakpoint(aLocation, {

       // No need to update this pane, since this method is invoked because

       // a breakpoint's view was interacted with.

       noPaneUpdate: true,

       // Mark this breakpoint as being "disabled", not completely removed.

       // This makes sure it will not be forgotten across target navigations.

       rememberDisabled: true

     });

   },

   /**

    * Highlights a breakpoint in this sources container.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    * @param object aOptions [optional]

    *        An object containing some of the following boolean properties:

    *          - openPopup: tells if the expression popup should be shown.

    *          - noEditorUpdate: tells if you want to skip editor updates.

    */

   highlightBreakpoint: function(aLocation, aOptions = {}) {

     let breakpointItem = this.getBreakpoint(aLocation);

     if (!breakpointItem) {

       return;

     }

     // Breakpoint will now be selected.

     this._selectBreakpoint(breakpointItem);

     // Update the editor location if necessary.

     if (!aOptions.noEditorUpdate) {

       DebuggerView.setEditorLocation(aLocation.url, aLocation.line, { noDebug: true });

     }

     // If the breakpoint requires a new conditional expression, display

     // the panel to input the corresponding expression.

     if (aOptions.openPopup) {

       this._openConditionalPopup();

     } else {

       this._hideConditionalPopup();

     }

   },

   /**

    * Unhighlights the current breakpoint in this sources container.

    */

   unhighlightBreakpoint: function() {

     this._unselectBreakpoint();

     this._hideConditionalPopup();

   },

   /**

    * Update the checked/unchecked and enabled/disabled states of the buttons in

    * the sources toolbar based on the currently selected source's state.

    */

   updateToolbarButtonsState: function() {

     const { source } = this.selectedItem.attachment;

     const sourceClient = gThreadClient.source(source);

     if (sourceClient.isBlackBoxed) {

       this._prettyPrintButton.setAttribute("disabled", true);

       this._blackBoxButton.setAttribute("checked", true);

     } else {

       this._prettyPrintButton.removeAttribute("disabled");

       this._blackBoxButton.removeAttribute("checked");

     }

     if (sourceClient.isPrettyPrinted) {

       this._prettyPrintButton.setAttribute("checked", true);

     } else {

       this._prettyPrintButton.removeAttribute("checked");

     }

   },

   /**

    * Toggle the pretty printing of the selected source.

    */

   togglePrettyPrint: function() {

     if (this._prettyPrintButton.hasAttribute("disabled")) {

       return;

     }

     const resetEditor = ([{ url }]) => {

       // Only set the text when the source is still selected.

       if (url == this.selectedValue) {

         DebuggerView.setEditorLocation(url, 0, { force: true });

       }

     };

     const printError = ([{ url }, error]) => {

       DevToolsUtils.reportException("togglePrettyPrint", error);

     };

     DebuggerView.showProgressBar();

     const { source } = this.selectedItem.attachment;

     const sourceClient = gThreadClient.source(source);

     const shouldPrettyPrint = !sourceClient.isPrettyPrinted;

     if (shouldPrettyPrint) {

       this._prettyPrintButton.setAttribute("checked", true);

     } else {

       this._prettyPrintButton.removeAttribute("checked");

     }

     DebuggerController.SourceScripts.togglePrettyPrint(source)

       .then(resetEditor, printError)

       .then(DebuggerView.showEditor)

       .then(this.updateToolbarButtonsState);

   },

   /**

    * Toggle the black boxed state of the selected source.

    */

   toggleBlackBoxing: function() {

     const { source } = this.selectedItem.attachment;

     const sourceClient = gThreadClient.source(source);

     const shouldBlackBox = !sourceClient.isBlackBoxed;

     // Be optimistic that the (un-)black boxing will succeed, so enable/disable

     // the pretty print button and check/uncheck the black box button

     // immediately. Then, once we actually get the results from the server, make

     // sure that it is in the correct state again by calling

     // `updateToolbarButtonsState`.

     if (shouldBlackBox) {

       this._prettyPrintButton.setAttribute("disabled", true);

       this._blackBoxButton.setAttribute("checked", true);

     } else {

       this._prettyPrintButton.removeAttribute("disabled");

       this._blackBoxButton.removeAttribute("checked");

     }

     DebuggerController.SourceScripts.setBlackBoxing(source, shouldBlackBox)

       .then(this.updateToolbarButtonsState,

             this.updateToolbarButtonsState);

   },

   /**

    * Toggles all breakpoints enabled/disabled.

    */

   toggleBreakpoints: function() {

     let breakpoints = this.getAllBreakpoints();

     let hasBreakpoints = breakpoints.length > 0;

     let hasEnabledBreakpoints = breakpoints.some(e => !e.attachment.disabled);

     if (hasBreakpoints && hasEnabledBreakpoints) {

       this._toggleBreakpointsButton.setAttribute("checked", true);

       this._onDisableAll();

     } else {

       this._toggleBreakpointsButton.removeAttribute("checked");

       this._onEnableAll();

     }

   },

   /**

    * Marks a breakpoint as selected in this sources container.

    *

    * @param object aItem

    *        The breakpoint item to select.

    */

   _selectBreakpoint: function(aItem) {

     if (this._selectedBreakpointItem == aItem) {

       return;

     }

     this._unselectBreakpoint();

     this._selectedBreakpointItem = aItem;

     this._selectedBreakpointItem.target.classList.add("selected");

     // Ensure the currently selected breakpoint is visible.

     this.widget.ensureElementIsVisible(aItem.target);

   },

   /**

    * Marks the current breakpoint as unselected in this sources container.

    */

   _unselectBreakpoint: function() {

     if (!this._selectedBreakpointItem) {

       return;

     }

     this._selectedBreakpointItem.target.classList.remove("selected");

     this._selectedBreakpointItem = null;

   },

   /**

    * Opens a conditional breakpoint's expression input popup.

    */

   _openConditionalPopup: function() {

     let breakpointItem = this._selectedBreakpointItem;

     let attachment = breakpointItem.attachment;

     // Check if this is an enabled conditional breakpoint, and if so,

     // retrieve the current conditional epression.

     let breakpointPromise = DebuggerController.Breakpoints._getAdded(attachment);

     if (breakpointPromise) {

       breakpointPromise.then(aBreakpointClient => {

         let isConditionalBreakpoint = aBreakpointClient.hasCondition();

         let condition = aBreakpointClient.getCondition();

         doOpen.call(this, isConditionalBreakpoint ? condition : "")

       });

     } else {

       doOpen.call(this, "")

     }

     function doOpen(aConditionalExpression) {

       // Update the conditional expression textbox. If no expression was

       // previously set, revert to using an empty string by default.

       this._cbTextbox.value = aConditionalExpression;

       // Show the conditional expression panel. The popup arrow should be pointing

       // at the line number node in the breakpoint item view.

       this._cbPanel.hidden = false;

       this._cbPanel.openPopup(breakpointItem.attachment.view.lineNumber,

         BREAKPOINT_CONDITIONAL_POPUP_POSITION,

         BREAKPOINT_CONDITIONAL_POPUP_OFFSET_X,

         BREAKPOINT_CONDITIONAL_POPUP_OFFSET_Y);

     }

   },

   /**

    * Hides a conditional breakpoint's expression input popup.

    */

   _hideConditionalPopup: function() {

     this._cbPanel.hidden = true;

     // Sometimes this._cbPanel doesn't have hidePopup method which doesn't

     // break anything but simply outputs an exception to the console.

     if (this._cbPanel.hidePopup) {

       this._cbPanel.hidePopup();

     }

   },

   /**

    * Customization function for creating a breakpoint item's UI.

    *

    * @param object aOptions

    *        A couple of options or flags supported by this operation:

    *          - location: the breakpoint's source location and line number

    *          - disabled: the breakpoint's disabled state, boolean

    *          - text: the breakpoint's line text to be displayed

    * @return object

    *         An object containing the breakpoint container, checkbox,

    *         line number and line text nodes.

    */

   _createBreakpointView: function(aOptions) {

     let { location, disabled, text } = aOptions;

     let identifier = DebuggerController.Breakpoints.getIdentifier(location);

     let checkbox = document.createElement("checkbox");

     checkbox.setAttribute("checked", !disabled);

     checkbox.className = "dbg-breakpoint-checkbox";

     let lineNumberNode = document.createElement("label");

     lineNumberNode.className = "plain dbg-breakpoint-line";

     lineNumberNode.setAttribute("value", location.line);

     let lineTextNode = document.createElement("label");

     lineTextNode.className = "plain dbg-breakpoint-text";

     lineTextNode.setAttribute("value", text);

     lineTextNode.setAttribute("crop", "end");

     lineTextNode.setAttribute("flex", "1");

     let tooltip = text.substr(0, BREAKPOINT_LINE_TOOLTIP_MAX_LENGTH);

     lineTextNode.setAttribute("tooltiptext", tooltip);

     let container = document.createElement("hbox");

     container.id = "breakpoint-" + identifier;

     container.className = "dbg-breakpoint side-menu-widget-item-other";

     container.classList.add("devtools-monospace");

     container.setAttribute("align", "center");

     container.setAttribute("flex", "1");

     container.addEventListener("click", this._onBreakpointClick, false);

     checkbox.addEventListener("click", this._onBreakpointCheckboxClick, false);

     container.appendChild(checkbox);

     container.appendChild(lineNumberNode);

     container.appendChild(lineTextNode);

     return {

       container: container,

       checkbox: checkbox,

       lineNumber: lineNumberNode,

       lineText: lineTextNode

     };

   },

   /**

    * Creates a context menu for a breakpoint element.

    *

    * @param object aOptions

    *        A couple of options or flags supported by this operation:

    *          - location: the breakpoint's source location and line number

    *          - disabled: the breakpoint's disabled state, boolean

    * @return object

    *         An object containing the breakpoint commandset and menu popup ids.

    */

   _createContextMenu: function(aOptions) {

     let { location, disabled } = aOptions;

     let identifier = DebuggerController.Breakpoints.getIdentifier(location);

     let commandset = document.createElement("commandset");

     let menupopup = document.createElement("menupopup");

     commandset.id = "bp-cSet-" + identifier;

     menupopup.id = "bp-mPop-" + identifier;

     createMenuItem.call(this, "enableSelf", !disabled);

     createMenuItem.call(this, "disableSelf", disabled);

     createMenuItem.call(this, "deleteSelf");

     createMenuSeparator();

     createMenuItem.call(this, "setConditional");

     createMenuSeparator();

     createMenuItem.call(this, "enableOthers");

     createMenuItem.call(this, "disableOthers");

     createMenuItem.call(this, "deleteOthers");

     createMenuSeparator();

     createMenuItem.call(this, "enableAll");

     createMenuItem.call(this, "disableAll");

     createMenuSeparator();

     createMenuItem.call(this, "deleteAll");

     this._popupset.appendChild(menupopup);

     this._commandset.appendChild(commandset);

     return {

       commandsetId: commandset.id,

       menupopupId: menupopup.id

     };

     /**

      * Creates a menu item specified by a name with the appropriate attributes

      * (label and handler).

      *

      * @param string aName

      *        A global identifier for the menu item.

      * @param boolean aHiddenFlag

      *        True if this menuitem should be hidden.

      */

     function createMenuItem(aName, aHiddenFlag) {

       let menuitem = document.createElement("menuitem");

       let command = document.createElement("command");

       let prefix = "bp-cMenu-"; // "breakpoints context menu"

       let commandId = prefix + aName + "-" + identifier + "-command";

       let menuitemId = prefix + aName + "-" + identifier + "-menuitem";

       let label = L10N.getStr("breakpointMenuItem." + aName);

       let func = "_on" + aName.charAt(0).toUpperCase() + aName.slice(1);

       command.id = commandId;

       command.setAttribute("label", label);

       command.addEventListener("command", () => this[func](location), false);

       menuitem.id = menuitemId;

       menuitem.setAttribute("command", commandId);

       aHiddenFlag && menuitem.setAttribute("hidden", "true");

       commandset.appendChild(command);

       menupopup.appendChild(menuitem);

     }

     /**

      * Creates a simple menu separator element and appends it to the current

      * menupopup hierarchy.

      */

     function createMenuSeparator() {

       let menuseparator = document.createElement("menuseparator");

       menupopup.appendChild(menuseparator);

     }

   },

   /**

    * Function called each time a breakpoint item is removed.

    *

    * @param object aItem

    *        The corresponding item.

    */

   _onBreakpointRemoved: function(aItem) {

     dumpn("Finalizing breakpoint item: " + aItem);

     // Destroy the context menu for the breakpoint.

     let contextMenu = aItem.attachment.popup;

     document.getElementById(contextMenu.commandsetId).remove();

     document.getElementById(contextMenu.menupopupId).remove();

     // Clear the breakpoint selection.

     if (this._selectedBreakpointItem == aItem) {

       this._selectedBreakpointItem = null;

     }

   },

   /**

    * The load listener for the source editor.

    */

   _onEditorLoad: function(aName, aEditor) {

     aEditor.on("cursorActivity", this._onEditorCursorActivity);

   },

   /**

    * The unload listener for the source editor.

    */

   _onEditorUnload: function(aName, aEditor) {

     aEditor.off("cursorActivity", this._onEditorCursorActivity);

   },

   /**

    * The selection listener for the source editor.

    */

   _onEditorCursorActivity: function(e) {

     let editor = DebuggerView.editor;

     let start  = editor.getCursor("start").line + 1;

     let end    = editor.getCursor().line + 1;

     let url    = this.selectedValue;

     let location = { url: url, line: start };

     if (this.getBreakpoint(location) && start == end) {

       this.highlightBreakpoint(location, { noEditorUpdate: true });

     } else {

       this.unhighlightBreakpoint();

     }

   },

   /**

    * The select listener for the sources container.

    */

   _onSourceSelect: function({ detail: sourceItem }) {

     if (!sourceItem) {

       return;

     }

     const { source } = sourceItem.attachment;

     const sourceClient = gThreadClient.source(source);

     // The container is not empty and an actual item was selected.

     DebuggerView.setEditorLocation(sourceItem.value);

     if (Prefs.autoPrettyPrint && !sourceClient.isPrettyPrinted) {

       DebuggerController.SourceScripts.getText(source).then(([, aText]) => {

         if (SourceUtils.isMinified(sourceClient, aText)) {

           this.togglePrettyPrint();

         }

       }).then(null, e => DevToolsUtils.reportException("_onSourceSelect", e));

     }

     // Set window title. No need to split the url by " -> " here, because it was

     // already sanitized when the source was added.

     document.title = L10N.getFormatStr("DebuggerWindowScriptTitle", sourceItem.value);

     DebuggerView.maybeShowBlackBoxMessage();

     this.updateToolbarButtonsState();

   },

   /**

    * The click listener for the "stop black boxing" button.

    */

   _onStopBlackBoxing: function() {

     const { source } = this.selectedItem.attachment;

     DebuggerController.SourceScripts.setBlackBoxing(source, false)

       .then(this.updateToolbarButtonsState,

             this.updateToolbarButtonsState);

   },

   /**

    * The click listener for a breakpoint container.

    */

   _onBreakpointClick: function(e) {

     let sourceItem = this.getItemForElement(e.target);

     let breakpointItem = this.getItemForElement.call(sourceItem, e.target);

     let attachment = breakpointItem.attachment;

     // Check if this is an enabled conditional breakpoint.

     let breakpointPromise = DebuggerController.Breakpoints._getAdded(attachment);

     if (breakpointPromise) {

       breakpointPromise.then(aBreakpointClient => {

         doHighlight.call(this, aBreakpointClient.hasCondition());

       });

     } else {

       doHighlight.call(this, false);

     }

     function doHighlight(aConditionalBreakpointFlag) {

       // Highlight the breakpoint in this pane and in the editor.

       this.highlightBreakpoint(attachment, {

         // Don't show the conditional expression popup if this is not a

         // conditional breakpoint, or the right mouse button was pressed (to

         // avoid clashing the popup with the context menu).

         openPopup: aConditionalBreakpointFlag && e.button == 0

       });

     }

   },

   /**

    * The click listener for a breakpoint checkbox.

    */

   _onBreakpointCheckboxClick: function(e) {

     let sourceItem = this.getItemForElement(e.target);

     let breakpointItem = this.getItemForElement.call(sourceItem, e.target);

     let attachment = breakpointItem.attachment;

     // Toggle the breakpoint enabled or disabled.

     this[attachment.disabled ? "enableBreakpoint" : "disableBreakpoint"](attachment, {

       // Do this silently (don't update the checkbox checked state), since

       // this listener is triggered because a checkbox was already clicked.

       silent: true

     });

     // Don't update the editor location (avoid propagating into _onBreakpointClick).

     e.preventDefault();

     e.stopPropagation();

   },

   /**

    * The popup showing listener for the breakpoints conditional expression panel.

    */

   _onConditionalPopupShowing: function() {

     this._conditionalPopupVisible = true; // Used in tests.

     window.emit(EVENTS.CONDITIONAL_BREAKPOINT_POPUP_SHOWING);

   },

   /**

    * The popup shown listener for the breakpoints conditional expression panel.

    */

   _onConditionalPopupShown: function() {

     this._cbTextbox.focus();

     this._cbTextbox.select();

   },

   /**

    * The popup hiding listener for the breakpoints conditional expression panel.

    */

   _onConditionalPopupHiding: Task.async(function*() {

     this._conditionalPopupVisible = false; // Used in tests.

     let breakpointItem = this._selectedBreakpointItem;

     let attachment = breakpointItem.attachment;

     // Check if this is an enabled conditional breakpoint, and if so,

     // save the current conditional epression.

     let breakpointPromise = DebuggerController.Breakpoints._getAdded(attachment);

     if (breakpointPromise) {

       let breakpointClient = yield breakpointPromise;

       yield DebuggerController.Breakpoints.updateCondition(

         breakpointClient.location,

         this._cbTextbox.value

       );

     }

     window.emit(EVENTS.CONDITIONAL_BREAKPOINT_POPUP_HIDING);

   }),

   /**

    * The keypress listener for the breakpoints conditional expression textbox.

    */

   _onConditionalTextboxKeyPress: function(e) {

     if (e.keyCode == e.DOM_VK_RETURN) {

       this._hideConditionalPopup();

     }

   },

   /**

    * Called when the add breakpoint key sequence was pressed.

    */

   _onCmdAddBreakpoint: function(e) {

     let url = DebuggerView.Sources.selectedValue;

     let line = DebuggerView.editor.getCursor().line + 1;

     let location = { url: url, line: line };

     let breakpointItem = this.getBreakpoint(location);

     // If a breakpoint already existed, remove it now.

     if (breakpointItem) {

       DebuggerController.Breakpoints.removeBreakpoint(location);

     }

     // No breakpoint existed at the required location, add one now.

     else {

       DebuggerController.Breakpoints.addBreakpoint(location);

     }

   },

   /**

    * Called when the add conditional breakpoint key sequence was pressed.

    */

   _onCmdAddConditionalBreakpoint: function() {

     let url =  DebuggerView.Sources.selectedValue;

     let line = DebuggerView.editor.getCursor().line + 1;

     let location = { url: url, line: line };

     let breakpointItem = this.getBreakpoint(location);

     // If a breakpoint already existed or wasn't a conditional, morph it now.

     if (breakpointItem) {

       this.highlightBreakpoint(location, { openPopup: true });

     }

     // No breakpoint existed at the required location, add one now.

     else {

       DebuggerController.Breakpoints.addBreakpoint(location, { openPopup: true });

     }

   },

   /**

    * Function invoked on the "setConditional" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onSetConditional: function(aLocation) {

     // Highlight the breakpoint and show a conditional expression popup.

     this.highlightBreakpoint(aLocation, { openPopup: true });

   },

   /**

    * Function invoked on the "enableSelf" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onEnableSelf: function(aLocation) {

     // Enable the breakpoint, in this container and the controller store.

     this.enableBreakpoint(aLocation);

   },

   /**

    * Function invoked on the "disableSelf" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onDisableSelf: function(aLocation) {

     // Disable the breakpoint, in this container and the controller store.

     this.disableBreakpoint(aLocation);

   },

   /**

    * Function invoked on the "deleteSelf" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onDeleteSelf: function(aLocation) {

     // Remove the breakpoint, from this container and the controller store.

     this.removeBreakpoint(aLocation);

     DebuggerController.Breakpoints.removeBreakpoint(aLocation);

   },

   /**

    * Function invoked on the "enableOthers" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onEnableOthers: function(aLocation) {

     let enableOthers = aCallback => {

       let other = this.getOtherBreakpoints(aLocation);

       let outstanding = other.map(e => this.enableBreakpoint(e.attachment));

       promise.all(outstanding).then(aCallback);

     }

     // Breakpoints can only be set while the debuggee is paused. To avoid

     // an avalanche of pause/resume interrupts of the main thread, simply

     // pause it beforehand if it's not already.

     if (gThreadClient.state != "paused") {

       gThreadClient.interrupt(() => enableOthers(() => gThreadClient.resume()));

     } else {

       enableOthers();

     }

   },

   /**

    * Function invoked on the "disableOthers" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onDisableOthers: function(aLocation) {

     let other = this.getOtherBreakpoints(aLocation);

     other.forEach(e => this._onDisableSelf(e.attachment));

   },

   /**

    * Function invoked on the "deleteOthers" menuitem command.

    *

    * @param object aLocation

    *        @see DebuggerController.Breakpoints.addBreakpoint

    */

   _onDeleteOthers: function(aLocation) {

     let other = this.getOtherBreakpoints(aLocation);

     other.forEach(e => this._onDeleteSelf(e.attachment));

   },

   /**

    * Function invoked on the "enableAll" menuitem command.

    */

   _onEnableAll: function() {

     this._onEnableOthers(undefined);

   },

   /**

    * Function invoked on the "disableAll" menuitem command.

    */

   _onDisableAll: function() {

     this._onDisableOthers(undefined);

   },

   /**

    * Function invoked on the "deleteAll" menuitem command.

    */

   _onDeleteAll: function() {

     this._onDeleteOthers(undefined);

   },

   _commandset: null,

   _popupset: null,

   _cmPopup: null,

   _cbPanel: null,

   _cbTextbox: null,

   _selectedBreakpointItem: null,

   _conditionalPopupVisible: false

 });

 /**

  * Functions handling the traces UI.

  */

 function TracerView() {

   this._selectedItem = null;

   this._matchingItems = null;

   this.widget = null;

   this._highlightItem = this._highlightItem.bind(this);

   this._isNotSelectedItem = this._isNotSelectedItem.bind(this);

   this._unhighlightMatchingItems =

     DevToolsUtils.makeInfallible(this._unhighlightMatchingItems.bind(this));

   this._onToggleTracing =

     DevToolsUtils.makeInfallible(this._onToggleTracing.bind(this));

   this._onStartTracing =

     DevToolsUtils.makeInfallible(this._onStartTracing.bind(this));

   this._onClear =

     DevToolsUtils.makeInfallible(this._onClear.bind(this));

   this._onSelect =

     DevToolsUtils.makeInfallible(this._onSelect.bind(this));

   this._onMouseOver =

     DevToolsUtils.makeInfallible(this._onMouseOver.bind(this));

   this._onSearch = DevToolsUtils.makeInfallible(this._onSearch.bind(this));

 }

 TracerView.MAX_TRACES = 200;

 TracerView.prototype = Heritage.extend(WidgetMethods, {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the TracerView");

     this._traceButton = document.getElementById("trace");

     this._tracerTab = document.getElementById("tracer-tab");

     // Remove tracer related elements from the dom and tear everything down if

     // the tracer isn't enabled.

     if (!Prefs.tracerEnabled) {

       this._traceButton.remove();

       this._traceButton = null;

       this._tracerTab.remove();

       this._tracerTab = null;

       return;

     }

     this.widget = new FastListWidget(document.getElementById("tracer-traces"));

     this._traceButton.removeAttribute("hidden");

     this._tracerTab.removeAttribute("hidden");

     this._search = document.getElementById("tracer-search");

     this._template = document.getElementsByClassName("trace-item-template")[0];

     this._templateItem = this._template.getElementsByClassName("trace-item")[0];

     this._templateTypeIcon = this._template.getElementsByClassName("trace-type")[0];

     this._templateNameNode = this._template.getElementsByClassName("trace-name")[0];

     this.widget.addEventListener("select", this._onSelect, false);

     this.widget.addEventListener("mouseover", this._onMouseOver, false);

     this.widget.addEventListener("mouseout", this._unhighlightMatchingItems, false);

     this._search.addEventListener("input", this._onSearch, false);

     this._startTooltip = L10N.getStr("startTracingTooltip");

     this._stopTooltip = L10N.getStr("stopTracingTooltip");

     this._tracingNotStartedString = L10N.getStr("tracingNotStartedText");

     this._noFunctionCallsString = L10N.getStr("noFunctionCallsText");

     this._traceButton.setAttribute("tooltiptext", this._startTooltip);

     this.emptyText = this._tracingNotStartedString;

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the TracerView");

     if (!this.widget) {

       return;

     }

     this.widget.removeEventListener("select", this._onSelect, false);

     this.widget.removeEventListener("mouseover", this._onMouseOver, false);

     this.widget.removeEventListener("mouseout", this._unhighlightMatchingItems, false);

     this._search.removeEventListener("input", this._onSearch, false);

   },

   /**

    * Function invoked by the "toggleTracing" command to switch the tracer state.

    */

   _onToggleTracing: function() {

     if (DebuggerController.Tracer.tracing) {

       this._onStopTracing();

     } else {

       this._onStartTracing();

     }

   },

   /**

    * Function invoked either by the "startTracing" command or by

    * _onToggleTracing to start execution tracing in the backend.

    *

    * @return object

    *         A promise resolved once the tracing has successfully started.

    */

   _onStartTracing: function() {

     this._traceButton.setAttribute("checked", true);

     this._traceButton.setAttribute("tooltiptext", this._stopTooltip);

     this.empty();

     this.emptyText = this._noFunctionCallsString;

     let deferred = promise.defer();

     DebuggerController.Tracer.startTracing(deferred.resolve);

     return deferred.promise;

   },

   /**

    * Function invoked by _onToggleTracing to stop execution tracing in the

    * backend.

    *

    * @return object

    *         A promise resolved once the tracing has successfully stopped.

    */

   _onStopTracing: function() {

     this._traceButton.removeAttribute("checked");

     this._traceButton.setAttribute("tooltiptext", this._startTooltip);

     this.emptyText = this._tracingNotStartedString;

     let deferred = promise.defer();

     DebuggerController.Tracer.stopTracing(deferred.resolve);

     return deferred.promise;

   },

   /**

    * Function invoked by the "clearTraces" command to empty the traces pane.

    */

   _onClear: function() {

     this.empty();

   },

   /**

    * Populate the given parent scope with the variable with the provided name

    * and value.

    *

    * @param String aName

    *        The name of the variable.

    * @param Object aParent

    *        The parent scope.

    * @param Object aValue

    *        The value of the variable.

    */

   _populateVariable: function(aName, aParent, aValue) {

     let item = aParent.addItem(aName, { value: aValue });

     if (aValue) {

       let wrappedValue = new DebuggerController.Tracer.WrappedObject(aValue);

       DebuggerView.Variables.controller.populate(item, wrappedValue);

       item.expand();

       item.twisty = false;

     }

   },

   /**

    * Handler for the widget's "select" event. Displays parameters, exception, or

    * return value depending on whether the selected trace is a call, throw, or

    * return respectively.

    *

    * @param Object traceItem

    *        The selected trace item.

    */

   _onSelect: function _onSelect({ detail: traceItem }) {

     if (!traceItem) {

       return;

     }

     const data = traceItem.attachment.trace;

     const { location: { url, line } } = data;

     DebuggerView.setEditorLocation(url, line, { noDebug: true });

     DebuggerView.Variables.empty();

     const scope = DebuggerView.Variables.addScope();

     if (data.type == "call") {

       const params = DevToolsUtils.zip(data.parameterNames, data.arguments);

       for (let [name, val] of params) {

         if (val === undefined) {

           scope.addItem(name, { value: "<value not available>" });

         } else {

           this._populateVariable(name, scope, val);

         }

       }

     } else {

       const varName = "<" + (data.type == "throw" ? "exception" : data.type) + ">";

       this._populateVariable(varName, scope, data.returnVal);

     }

     scope.expand();

     DebuggerView.showInstrumentsPane();

   },

   /**

    * Add the hover frame enter/exit highlighting to a given item.

    */

   _highlightItem: function(aItem) {

     if (!aItem || !aItem.target) {

       return;

     }

     const trace = aItem.target.querySelector(".trace-item");

     trace.classList.add("selected-matching");

   },

   /**

    * Remove the hover frame enter/exit highlighting to a given item.

    */

   _unhighlightItem: function(aItem) {

     if (!aItem || !aItem.target) {

       return;

     }

     const match = aItem.target.querySelector(".selected-matching");

     if (match) {

       match.classList.remove("selected-matching");

     }

   },

   /**

    * Remove the frame enter/exit pair highlighting we do when hovering.

    */

   _unhighlightMatchingItems: function() {

     if (this._matchingItems) {

       this._matchingItems.forEach(this._unhighlightItem);

       this._matchingItems = null;

     }

   },

   /**

    * Returns true if the given item is not the selected item.

    */

   _isNotSelectedItem: function(aItem) {

     return aItem !== this.selectedItem;

   },

   /**

    * Highlight the frame enter/exit pair of items for the given item.

    */

   _highlightMatchingItems: function(aItem) {

     const frameId = aItem.attachment.trace.frameId;

     const predicate = e => e.attachment.trace.frameId == frameId;

     this._unhighlightMatchingItems();

     this._matchingItems = this.items.filter(predicate);

     this._matchingItems

       .filter(this._isNotSelectedItem)

       .forEach(this._highlightItem);

   },

   /**

    * Listener for the mouseover event.

    */

   _onMouseOver: function({ target }) {

     const traceItem = this.getItemForElement(target);

     if (traceItem) {

       this._highlightMatchingItems(traceItem);

     }

   },

   /**

    * Listener for typing in the search box.

    */

   _onSearch: function() {

     const query = this._search.value.trim().toLowerCase();

     const predicate = name => name.toLowerCase().contains(query);

     this.filterContents(item => predicate(item.attachment.trace.name));

   },

   /**

    * Select the traces tab in the sidebar.

    */

   selectTab: function() {

     const tabs = this._tracerTab.parentElement;

     tabs.selectedIndex = Array.indexOf(tabs.children, this._tracerTab);

   },

   /**

    * Commit all staged items to the widget. Overridden so that we can call

    * |FastListWidget.prototype.flush|.

    */

   commit: function() {

     WidgetMethods.commit.call(this);

     // TODO: Accessing non-standard widget properties. Figure out what's the

     // best way to expose such things. Bug 895514.

     this.widget.flush();

   },

   /**

    * Adds the trace record provided as an argument to the view.

    *

    * @param object aTrace

    *        The trace record coming from the tracer actor.

    */

   addTrace: function(aTrace) {

     // Create the element node for the trace item.

     let view = this._createView(aTrace);

     // Append a source item to this container.

     this.push([view], {

       staged: true,

       attachment: {

         trace: aTrace

       }

     });

   },

   /**

    * Customization function for creating an item's UI.

    *

    * @return nsIDOMNode

    *         The network request view.

    */

   _createView: function(aTrace) {

     let { type, name, location, depth, frameId } = aTrace;

     let { parameterNames, returnVal, arguments: args } = aTrace;

     let fragment = document.createDocumentFragment();

     this._templateItem.setAttribute("tooltiptext", SourceUtils.trimUrl(location.url));

     this._templateItem.style.MozPaddingStart = depth + "em";

     const TYPES = ["call", "yield", "return", "throw"];

     for (let t of TYPES) {

       this._templateTypeIcon.classList.toggle("trace-" + t, t == type);

     }

     this._templateTypeIcon.setAttribute("value", {

       call: "\u2192",

       yield: "Y",

       return: "\u2190",

       throw: "E",

       terminated: "TERMINATED"

     }[type]);

     this._templateNameNode.setAttribute("value", name);

     // All extra syntax and parameter nodes added.

     const addedNodes = [];

     if (parameterNames) {

       const syntax = (p) => {

         const el = document.createElement("label");

         el.setAttribute("value", p);

         el.classList.add("trace-syntax");

         el.classList.add("plain");

         addedNodes.push(el);

         return el;

       };

       this._templateItem.appendChild(syntax("("));

       for (let i = 0, n = parameterNames.length; i < n; i++) {

         let param = document.createElement("label");

         param.setAttribute("value", parameterNames[i]);

         param.classList.add("trace-param");

         param.classList.add("plain");

         addedNodes.push(param);

         this._templateItem.appendChild(param);

         if (i + 1 !== n) {

           this._templateItem.appendChild(syntax(", "));

         }

       }

       this._templateItem.appendChild(syntax(")"));

     }

     // Flatten the DOM by removing one redundant box (the template container).

     for (let node of this._template.childNodes) {

       fragment.appendChild(node.cloneNode(true));

     }

     // Remove any added nodes from the template.

     for (let node of addedNodes) {

       this._templateItem.removeChild(node);

     }

     return fragment;

   }

 });

 /**

  * Utility functions for handling sources.

  */

 let SourceUtils = {

   _labelsCache: new Map(), // Can't use WeakMaps because keys are strings.

   _groupsCache: new Map(),

   _minifiedCache: new WeakMap(),

   /**

    * Returns true if the specified url and/or content type are specific to

    * javascript files.

    *

    * @return boolean

    *         True if the source is likely javascript.

    */

   isJavaScript: function(aUrl, aContentType = "") {

     return /\.jsm?$/.test(this.trimUrlQuery(aUrl)) ||

            aContentType.contains("javascript");

   },

   /**

    * Determines if the source text is minified by using

    * the percentage indented of a subset of lines

    *

    * @param string aText

    *        The source text.

    * @return boolean

    *        True if source text is minified.

    */

   isMinified: function(sourceClient, aText){

     if (this._minifiedCache.has(sourceClient)) {

       return this._minifiedCache.get(sourceClient);

     }

     let isMinified;

     let lineEndIndex = 0;

     let lineStartIndex = 0;

     let lines = 0;

     let indentCount = 0;

     let overCharLimit = false;

     // Strip comments.

     aText = aText.replace(/\/\*[\S\s]*?\*\/|\/\/(.+|\n)/g, "");

     while (lines++ < SAMPLE_SIZE) {

       lineEndIndex = aText.indexOf("\n", lineStartIndex);

       if (lineEndIndex == -1) {

          break;

       }

       if (/^\s+/.test(aText.slice(lineStartIndex, lineEndIndex))) {

         indentCount++;

       }

       // For files with no indents but are not minified.

       if ((lineEndIndex - lineStartIndex) > CHARACTER_LIMIT) {

         overCharLimit = true;

         break;

       }

       lineStartIndex = lineEndIndex + 1;

     }

     isMinified = ((indentCount / lines ) * 100) < INDENT_COUNT_THRESHOLD ||

                  overCharLimit;

     this._minifiedCache.set(sourceClient, isMinified);

     return isMinified;

   },

   /**

    * Clears the labels, groups and minify cache, populated by methods like

    * SourceUtils.getSourceLabel or Source Utils.getSourceGroup.

    * This should be done every time the content location changes.

    */

   clearCache: function() {

     this._labelsCache.clear();

     this._groupsCache.clear();

     this._minifiedCache.clear();

   },

   /**

    * Gets a unique, simplified label from a source url.

    *

    * @param string aUrl

    *        The source url.

    * @return string

    *         The simplified label.

    */

   getSourceLabel: function(aUrl) {

     let cachedLabel = this._labelsCache.get(aUrl);

     if (cachedLabel) {

       return cachedLabel;

     }

     let sourceLabel = null;

     for (let name of Object.keys(KNOWN_SOURCE_GROUPS)) {

       if (aUrl.startsWith(KNOWN_SOURCE_GROUPS[name])) {

         sourceLabel = aUrl.substring(KNOWN_SOURCE_GROUPS[name].length);

       }

     }

     if (!sourceLabel) {

       sourceLabel = this.trimUrl(aUrl);

     }

     let unicodeLabel = NetworkHelper.convertToUnicode(unescape(sourceLabel));

     this._labelsCache.set(aUrl, unicodeLabel);

     return unicodeLabel;

   },

   /**

    * Gets as much information as possible about the hostname and directory paths

    * of an url to create a short url group identifier.

    *

    * @param string aUrl

    *        The source url.

    * @return string

    *         The simplified group.

    */

   getSourceGroup: function(aUrl) {

     let cachedGroup = this._groupsCache.get(aUrl);

     if (cachedGroup) {

       return cachedGroup;

     }

     try {

       // Use an nsIURL to parse all the url path parts.

       var uri = Services.io.newURI(aUrl, null, null).QueryInterface(Ci.nsIURL);

     } catch (e) {

       // This doesn't look like a url, or nsIURL can't handle it.

       return "";

     }

     let groupLabel = uri.prePath;

     for (let name of Object.keys(KNOWN_SOURCE_GROUPS)) {

       if (aUrl.startsWith(KNOWN_SOURCE_GROUPS[name])) {

         groupLabel = name;

       }

     }

     let unicodeLabel = NetworkHelper.convertToUnicode(unescape(groupLabel));

     this._groupsCache.set(aUrl, unicodeLabel)

     return unicodeLabel;

   },

   /**

    * Trims the url by shortening it if it exceeds a certain length, adding an

    * ellipsis at the end.

    *

    * @param string aUrl

    *        The source url.

    * @param number aLength [optional]

    *        The expected source url length.

    * @param number aSection [optional]

    *        The section to trim. Supported values: "start", "center", "end"

    * @return string

    *         The shortened url.

    */

   trimUrlLength: function(aUrl, aLength, aSection) {

     aLength = aLength || SOURCE_URL_DEFAULT_MAX_LENGTH;

     aSection = aSection || "end";

     if (aUrl.length > aLength) {

       switch (aSection) {

         case "start":

           return L10N.ellipsis + aUrl.slice(-aLength);

           break;

         case "center":

           return aUrl.substr(0, aLength / 2 - 1) + L10N.ellipsis + aUrl.slice(-aLength / 2 + 1);

           break;

         case "end":

           return aUrl.substr(0, aLength) + L10N.ellipsis;

           break;

       }

     }

     return aUrl;

   },

   /**

    * Trims the query part or reference identifier of a url string, if necessary.

    *

    * @param string aUrl

    *        The source url.

    * @return string

    *         The shortened url.

    */

   trimUrlQuery: function(aUrl) {

     let length = aUrl.length;

     let q1 = aUrl.indexOf('?');

     let q2 = aUrl.indexOf('&');

     let q3 = aUrl.indexOf('#');

     let q = Math.min(q1 != -1 ? q1 : length,

                      q2 != -1 ? q2 : length,

                      q3 != -1 ? q3 : length);

     return aUrl.slice(0, q);

   },

   /**

    * Trims as much as possible from a url, while keeping the label unique

    * in the sources container.

    *

    * @param string | nsIURL aUrl

    *        The source url.

    * @param string aLabel [optional]

    *        The resulting label at each step.

    * @param number aSeq [optional]

    *        The current iteration step.

    * @return string

    *         The resulting label at the final step.

    */

   trimUrl: function(aUrl, aLabel, aSeq) {

     if (!(aUrl instanceof Ci.nsIURL)) {

       try {

         // Use an nsIURL to parse all the url path parts.

         aUrl = Services.io.newURI(aUrl, null, null).QueryInterface(Ci.nsIURL);

       } catch (e) {

         // This doesn't look like a url, or nsIURL can't handle it.

         return aUrl;

       }

     }

     if (!aSeq) {

       let name = aUrl.fileName;

       if (name) {

         // This is a regular file url, get only the file name (contains the

         // base name and extension if available).

         // If this url contains an invalid query, unfortunately nsIURL thinks

         // it's part of the file extension. It must be removed.

         aLabel = aUrl.fileName.replace(/\&.*/, "");

       } else {

         // This is not a file url, hence there is no base name, nor extension.

         // Proceed using other available information.

         aLabel = "";

       }

       aSeq = 1;

     }

     // If we have a label and it doesn't only contain a query...

     if (aLabel && aLabel.indexOf("?") != 0) {

       // A page may contain multiple requests to the same url but with different

       // queries. It is *not* redundant to show each one.

       if (!DebuggerView.Sources.getItemForAttachment(e => e.label == aLabel)) {

         return aLabel;

       }

     }

     // Append the url query.

     if (aSeq == 1) {

       let query = aUrl.query;

       if (query) {

         return this.trimUrl(aUrl, aLabel + "?" + query, aSeq + 1);

       }

       aSeq++;

     }

     // Append the url reference.

     if (aSeq == 2) {

       let ref = aUrl.ref;

       if (ref) {

         return this.trimUrl(aUrl, aLabel + "#" + aUrl.ref, aSeq + 1);

       }

       aSeq++;

     }

     // Prepend the url directory.

     if (aSeq == 3) {

       let dir = aUrl.directory;

       if (dir) {

         return this.trimUrl(aUrl, dir.replace(/^\//, "") + aLabel, aSeq + 1);

       }

       aSeq++;

     }

     // Prepend the hostname and port number.

     if (aSeq == 4) {

       let host = aUrl.hostPort;

       if (host) {

         return this.trimUrl(aUrl, host + "/" + aLabel, aSeq + 1);

       }

       aSeq++;

     }

     // Use the whole url spec but ignoring the reference.

     if (aSeq == 5) {

       return this.trimUrl(aUrl, aUrl.specIgnoringRef, aSeq + 1);

     }

     // Give up.

     return aUrl.spec;

   }

 };

 /**

  * Functions handling the variables bubble UI.

  */

 function VariableBubbleView() {

   dumpn("VariableBubbleView was instantiated");

   this._onMouseMove = this._onMouseMove.bind(this);

   this._onMouseLeave = this._onMouseLeave.bind(this);

   this._onPopupHiding = this._onPopupHiding.bind(this);

 }

 VariableBubbleView.prototype = {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the VariableBubbleView");

     this._editorContainer = document.getElementById("editor");

     this._editorContainer.addEventListener("mousemove", this._onMouseMove, false);

     this._editorContainer.addEventListener("mouseleave", this._onMouseLeave, false);

     this._tooltip = new Tooltip(document, {

       closeOnEvents: [{

         emitter: DebuggerController._toolbox,

         event: "select"

       }, {

         emitter: this._editorContainer,

         event: "scroll",

         useCapture: true

       }]

     });

     this._tooltip.defaultPosition = EDITOR_VARIABLE_POPUP_POSITION;

     this._tooltip.defaultShowDelay = EDITOR_VARIABLE_HOVER_DELAY;

     this._tooltip.panel.addEventListener("popuphiding", this._onPopupHiding);

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the VariableBubbleView");

     this._tooltip.panel.removeEventListener("popuphiding", this._onPopupHiding);

     this._editorContainer.removeEventListener("mousemove", this._onMouseMove, false);

     this._editorContainer.removeEventListener("mouseleave", this._onMouseLeave, false);

   },

   /**

    * Specifies whether literals can be (redundantly) inspected in a popup.

    * This behavior is deprecated, but still tested in a few places.

    */

   _ignoreLiterals: true,

   /**

    * Searches for an identifier underneath the specified position in the

    * source editor, and if found, opens a VariablesView inspection popup.

    *

    * @param number x, y

    *        The left/top coordinates where to look for an identifier.

    */

   _findIdentifier: function(x, y) {

     let editor = DebuggerView.editor;

     // Calculate the editor's line and column at the current x and y coords.

     let hoveredPos = editor.getPositionFromCoords({ left: x, top: y });

     let hoveredOffset = editor.getOffset(hoveredPos);

     let hoveredLine = hoveredPos.line;

     let hoveredColumn = hoveredPos.ch;

     // A source contains multiple scripts. Find the start index of the script

     // containing the specified offset relative to its parent source.

     let contents = editor.getText();

     let location = DebuggerView.Sources.selectedValue;

     let parsedSource = DebuggerController.Parser.get(contents, location);

     let scriptInfo = parsedSource.getScriptInfo(hoveredOffset);

     // If the script length is negative, we're not hovering JS source code.

     if (scriptInfo.length == -1) {

       return;

     }

     // Using the script offset, determine the actual line and column inside the

     // script, to use when finding identifiers.

     let scriptStart = editor.getPosition(scriptInfo.start);

     let scriptLineOffset = scriptStart.line;

     let scriptColumnOffset = (hoveredLine == scriptStart.line ? scriptStart.ch : 0);

     let scriptLine = hoveredLine - scriptLineOffset;

     let scriptColumn = hoveredColumn - scriptColumnOffset;

     let identifierInfo = parsedSource.getIdentifierAt({

       line: scriptLine + 1,

       column: scriptColumn,

       scriptIndex: scriptInfo.index,

       ignoreLiterals: this._ignoreLiterals

     });

     // If the info is null, we're not hovering any identifier.

     if (!identifierInfo) {

       return;

     }

     // Transform the line and column relative to the parsed script back

     // to the context of the parent source.

     let { start: identifierStart, end: identifierEnd } = identifierInfo.location;

     let identifierCoords = {

       line: identifierStart.line + scriptLineOffset,

       column: identifierStart.column + scriptColumnOffset,

       length: identifierEnd.column - identifierStart.column

     };

     // Evaluate the identifier in the current stack frame and show the

     // results in a VariablesView inspection popup.

     DebuggerController.StackFrames.evaluate(identifierInfo.evalString)

       .then(frameFinished => {

         if ("return" in frameFinished) {

           this.showContents({

             coords: identifierCoords,

             evalPrefix: identifierInfo.evalString,

             objectActor: frameFinished.return

           });

         } else {

           let msg = "Evaluation has thrown for: " + identifierInfo.evalString;

           console.warn(msg);

           dumpn(msg);

         }

       })

       .then(null, err => {

         let msg = "Couldn't evaluate: " + err.message;

         console.error(msg);

         dumpn(msg);

       });

   },

   /**

    * Shows an inspection popup for a specified object actor grip.

    *

    * @param string object

    *        An object containing the following properties:

    *          - coords: the inspected identifier coordinates in the editor,

    *                    containing the { line, column, length } properties.

    *          - evalPrefix: a prefix for the variables view evaluation macros.

    *          - objectActor: the value grip for the object actor.

    */

   showContents: function({ coords, evalPrefix, objectActor }) {

     let editor = DebuggerView.editor;

     let { line, column, length } = coords;

     // Highlight the function found at the mouse position.

     this._markedText = editor.markText(

       { line: line - 1, ch: column },

       { line: line - 1, ch: column + length });

     // If the grip represents a primitive value, use a more lightweight

     // machinery to display it.

     if (VariablesView.isPrimitive({ value: objectActor })) {

       let className = VariablesView.getClass(objectActor);

       let textContent = VariablesView.getString(objectActor);

       this._tooltip.setTextContent({

         messages: [textContent],

         messagesClass: className,

         containerClass: "plain"

       }, [{

         label: L10N.getStr('addWatchExpressionButton'),

         className: "dbg-expression-button",

         command: () => {

           DebuggerView.VariableBubble.hideContents();

           DebuggerView.WatchExpressions.addExpression(evalPrefix, true);

         }

       }]);

     } else {

       this._tooltip.setVariableContent(objectActor, {

         searchPlaceholder: L10N.getStr("emptyPropertiesFilterText"),

         searchEnabled: Prefs.variablesSearchboxVisible,

         eval: (variable, value) => {

           let string = variable.evaluationMacro(variable, value);

           DebuggerController.StackFrames.evaluate(string);

           DebuggerView.VariableBubble.hideContents();

         }

       }, {

         getEnvironmentClient: aObject => gThreadClient.environment(aObject),

         getObjectClient: aObject => gThreadClient.pauseGrip(aObject),

         simpleValueEvalMacro: this._getSimpleValueEvalMacro(evalPrefix),

         getterOrSetterEvalMacro: this._getGetterOrSetterEvalMacro(evalPrefix),

         overrideValueEvalMacro: this._getOverrideValueEvalMacro(evalPrefix)

       }, {

         fetched: (aEvent, aType) => {

           if (aType == "properties") {

             window.emit(EVENTS.FETCHED_BUBBLE_PROPERTIES);

           }

         }

       }, [{

         label: L10N.getStr("addWatchExpressionButton"),

         className: "dbg-expression-button",

         command: () => {

           DebuggerView.VariableBubble.hideContents();

           DebuggerView.WatchExpressions.addExpression(evalPrefix, true);

         }

       }], DebuggerController._toolbox);

     }

     this._tooltip.show(this._markedText.anchor);

   },

   /**

    * Hides the inspection popup.

    */

   hideContents: function() {

     clearNamedTimeout("editor-mouse-move");

     this._tooltip.hide();

   },

   /**

    * Checks whether the inspection popup is shown.

    *

    * @return boolean

    *         True if the panel is shown or showing, false otherwise.

    */

   contentsShown: function() {

     return this._tooltip.isShown();

   },

   /**

    * Functions for getting customized variables view evaluation macros.

    *

    * @param string aPrefix

    *        See the corresponding VariablesView.* functions.

    */

   _getSimpleValueEvalMacro: function(aPrefix) {

     return (item, string) =>

       VariablesView.simpleValueEvalMacro(item, string, aPrefix);

   },

   _getGetterOrSetterEvalMacro: function(aPrefix) {

     return (item, string) =>

       VariablesView.getterOrSetterEvalMacro(item, string, aPrefix);

   },

   _getOverrideValueEvalMacro: function(aPrefix) {

     return (item, string) =>

       VariablesView.overrideValueEvalMacro(item, string, aPrefix);

   },

   /**

    * The mousemove listener for the source editor.

    */

   _onMouseMove: function({ clientX: x, clientY: y, buttons: btns }) {

     // Prevent the variable inspection popup from showing when the thread client

     // is not paused, or while a popup is already visible, or when the user tries

     // to select text in the editor.

     if (gThreadClient && gThreadClient.state != "paused"

         || !this._tooltip.isHidden()

         || (DebuggerView.editor.somethingSelected()

          && btns > 0)) {

       clearNamedTimeout("editor-mouse-move");

       return;

     }

     // Allow events to settle down first. If the mouse hovers over

     // a certain point in the editor long enough, try showing a variable bubble.

     setNamedTimeout("editor-mouse-move",

       EDITOR_VARIABLE_HOVER_DELAY, () => this._findIdentifier(x, y));

   },

   /**

    * The mouseleave listener for the source editor container node.

    */

   _onMouseLeave: function() {

     clearNamedTimeout("editor-mouse-move");

   },

   /**

    * Listener handling the popup hiding event.

    */

   _onPopupHiding: function({ target }) {

     if (this._tooltip.panel != target) {

       return;

     }

     if (this._markedText) {

       this._markedText.clear();

       this._markedText = null;

     }

     if (!this._tooltip.isEmpty()) {

       this._tooltip.empty();

     }

   },

   _editorContainer: null,

   _markedText: null,

   _tooltip: null

 };

 /**

  * Functions handling the watch expressions UI.

  */

 function WatchExpressionsView() {

   dumpn("WatchExpressionsView was instantiated");

   this.switchExpression = this.switchExpression.bind(this);

   this.deleteExpression = this.deleteExpression.bind(this);

   this._createItemView = this._createItemView.bind(this);

   this._onClick = this._onClick.bind(this);

   this._onClose = this._onClose.bind(this);

   this._onBlur = this._onBlur.bind(this);

   this._onKeyPress = this._onKeyPress.bind(this);

 }

 WatchExpressionsView.prototype = Heritage.extend(WidgetMethods, {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the WatchExpressionsView");

     this.widget = new SimpleListWidget(document.getElementById("expressions"));

     this.widget.setAttribute("context", "debuggerWatchExpressionsContextMenu");

     this.widget.addEventListener("click", this._onClick, false);

     this.headerText = L10N.getStr("addWatchExpressionText");

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the WatchExpressionsView");

     this.widget.removeEventListener("click", this._onClick, false);

   },

   /**

    * Adds a watch expression in this container.

    *

    * @param string aExpression [optional]

    *        An optional initial watch expression text.

    * @param boolean aSkipUserInput [optional]

    *        Pass true to avoid waiting for additional user input

    *        on the watch expression.

    */

   addExpression: function(aExpression = "", aSkipUserInput = false) {

     // Watch expressions are UI elements which benefit from visible panes.

     DebuggerView.showInstrumentsPane();

     // Create the element node for the watch expression item.

     let itemView = this._createItemView(aExpression);

     // Append a watch expression item to this container.

     let expressionItem = this.push([itemView.container], {

       index: 0, /* specifies on which position should the item be appended */

       attachment: {

         view: itemView,

         initialExpression: aExpression,

         currentExpression: "",

       }

     });

     // Automatically focus the new watch expression input

     // if additional user input is desired.

     if (!aSkipUserInput) {

       expressionItem.attachment.view.inputNode.select();

       expressionItem.attachment.view.inputNode.focus();

       DebuggerView.Variables.parentNode.scrollTop = 0;

     }

     // Otherwise, add and evaluate the new watch expression immediately.

     else {

       this.toggleContents(false);

       this._onBlur({ target: expressionItem.attachment.view.inputNode });

     }

   },

   /**

    * Changes the watch expression corresponding to the specified variable item.

    * This function is called whenever a watch expression's code is edited in

    * the variables view container.

    *

    * @param Variable aVar

    *        The variable representing the watch expression evaluation.

    * @param string aExpression

    *        The new watch expression text.

    */

   switchExpression: function(aVar, aExpression) {

     let expressionItem =

       [i for (i of this) if (i.attachment.currentExpression == aVar.name)][0];

     // Remove the watch expression if it's going to be empty or a duplicate.

     if (!aExpression || this.getAllStrings().indexOf(aExpression) != -1) {

       this.deleteExpression(aVar);

       return;

     }

     // Save the watch expression code string.

     expressionItem.attachment.currentExpression = aExpression;

     expressionItem.attachment.view.inputNode.value = aExpression;

     // Synchronize with the controller's watch expressions store.

     DebuggerController.StackFrames.syncWatchExpressions();

   },

   /**

    * Removes the watch expression corresponding to the specified variable item.

    * This function is called whenever a watch expression's value is edited in

    * the variables view container.

    *

    * @param Variable aVar

    *        The variable representing the watch expression evaluation.

    */

   deleteExpression: function(aVar) {

     let expressionItem =

       [i for (i of this) if (i.attachment.currentExpression == aVar.name)][0];

     // Remove the watch expression.

     this.remove(expressionItem);

     // Synchronize with the controller's watch expressions store.

     DebuggerController.StackFrames.syncWatchExpressions();

   },

   /**

    * Gets the watch expression code string for an item in this container.

    *

    * @param number aIndex

    *        The index used to identify the watch expression.

    * @return string

    *         The watch expression code string.

    */

   getString: function(aIndex) {

     return this.getItemAtIndex(aIndex).attachment.currentExpression;

   },

   /**

    * Gets the watch expressions code strings for all items in this container.

    *

    * @return array

    *         The watch expressions code strings.

    */

   getAllStrings: function() {

     return this.items.map(e => e.attachment.currentExpression);

   },

   /**

    * Customization function for creating an item's UI.

    *

    * @param string aExpression

    *        The watch expression string.

    */

   _createItemView: function(aExpression) {

     let container = document.createElement("hbox");

     container.className = "list-widget-item dbg-expression";

     let arrowNode = document.createElement("hbox");

     arrowNode.className = "dbg-expression-arrow";

     let inputNode = document.createElement("textbox");

     inputNode.className = "plain dbg-expression-input devtools-monospace";

     inputNode.setAttribute("value", aExpression);

     inputNode.setAttribute("flex", "1");

     let closeNode = document.createElement("toolbarbutton");

     closeNode.className = "plain variables-view-delete";

     closeNode.addEventListener("click", this._onClose, false);

     inputNode.addEventListener("blur", this._onBlur, false);

     inputNode.addEventListener("keypress", this._onKeyPress, false);

     container.appendChild(arrowNode);

     container.appendChild(inputNode);

     container.appendChild(closeNode);

     return {

       container: container,

       arrowNode: arrowNode,

       inputNode: inputNode,

       closeNode: closeNode

     };

   },

   /**

    * Called when the add watch expression key sequence was pressed.

    */

   _onCmdAddExpression: function(aText) {

     // Only add a new expression if there's no pending input.

     if (this.getAllStrings().indexOf("") == -1) {

       this.addExpression(aText || DebuggerView.editor.getSelection());

     }

   },

   /**

    * Called when the remove all watch expressions key sequence was pressed.

    */

   _onCmdRemoveAllExpressions: function() {

     // Empty the view of all the watch expressions and clear the cache.

     this.empty();

     // Synchronize with the controller's watch expressions store.

     DebuggerController.StackFrames.syncWatchExpressions();

   },

   /**

    * The click listener for this container.

    */

   _onClick: function(e) {

     if (e.button != 0) {

       // Only allow left-click to trigger this event.

       return;

     }

     let expressionItem = this.getItemForElement(e.target);

     if (!expressionItem) {

       // The container is empty or we didn't click on an actual item.

       this.addExpression();

     }

   },

   /**

    * The click listener for a watch expression's close button.

    */

   _onClose: function(e) {

     // Remove the watch expression.

     this.remove(this.getItemForElement(e.target));

     // Synchronize with the controller's watch expressions store.

     DebuggerController.StackFrames.syncWatchExpressions();

     // Prevent clicking the expression element itself.

     e.preventDefault();

     e.stopPropagation();

   },

   /**

    * The blur listener for a watch expression's textbox.

    */

   _onBlur: function({ target: textbox }) {

     let expressionItem = this.getItemForElement(textbox);

     let oldExpression = expressionItem.attachment.currentExpression;

     let newExpression = textbox.value.trim();

     // Remove the watch expression if it's empty.

     if (!newExpression) {

       this.remove(expressionItem);

     }

     // Remove the watch expression if it's a duplicate.

     else if (!oldExpression && this.getAllStrings().indexOf(newExpression) != -1) {

       this.remove(expressionItem);

     }

     // Expression is eligible.

     else {

       expressionItem.attachment.currentExpression = newExpression;

     }

     // Synchronize with the controller's watch expressions store.

     DebuggerController.StackFrames.syncWatchExpressions();

   },

   /**

    * The keypress listener for a watch expression's textbox.

    */

   _onKeyPress: function(e) {

     switch(e.keyCode) {

       case e.DOM_VK_RETURN:

       case e.DOM_VK_ESCAPE:

         e.stopPropagation();

         DebuggerView.editor.focus();

         return;

     }

   }

 });

 /**

  * Functions handling the event listeners UI.

  */

 function EventListenersView() {

   dumpn("EventListenersView was instantiated");

   this._onCheck = this._onCheck.bind(this);

   this._onClick = this._onClick.bind(this);

 }

 EventListenersView.prototype = Heritage.extend(WidgetMethods, {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the EventListenersView");

     this.widget = new SideMenuWidget(document.getElementById("event-listeners"), {

       showItemCheckboxes: true,

       showGroupCheckboxes: true

     });

     this.emptyText = L10N.getStr("noEventListenersText");

     this._eventCheckboxTooltip = L10N.getStr("eventCheckboxTooltip");

     this._onSelectorString = " " + L10N.getStr("eventOnSelector") + " ";

     this._inSourceString = " " + L10N.getStr("eventInSource") + " ";

     this._inNativeCodeString = L10N.getStr("eventNative");

     this.widget.addEventListener("check", this._onCheck, false);

     this.widget.addEventListener("click", this._onClick, false);

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the EventListenersView");

     this.widget.removeEventListener("check", this._onCheck, false);

     this.widget.removeEventListener("click", this._onClick, false);

   },

   /**

    * Adds an event to this event listeners container.

    *

    * @param object aListener

    *        The listener object coming from the active thread.

    * @param object aOptions [optional]

    *        Additional options for adding the source. Supported options:

    *        - staged: true to stage the item to be appended later

    */

   addListener: function(aListener, aOptions = {}) {

     let { node: { selector }, function: { url }, type } = aListener;

     if (!type) return;

     // Some listener objects may be added from plugins, thus getting

     // translated to native code.

     if (!url) {

       url = this._inNativeCodeString;

     }

     // If an event item for this listener's url and type was already added,

     // avoid polluting the view and simply increase the "targets" count.

     let eventItem = this.getItemForPredicate(aItem =>

       aItem.attachment.url == url &&

       aItem.attachment.type == type);

     if (eventItem) {

       let { selectors, view: { targets } } = eventItem.attachment;

       if (selectors.indexOf(selector) == -1) {

         selectors.push(selector);

         targets.setAttribute("value", L10N.getFormatStr("eventNodes", selectors.length));

       }

       return;

     }

     // There's no easy way of grouping event types into higher-level groups,

     // so we need to do this by hand.

     let is = (...args) => args.indexOf(type) != -1;

     let has = str => type.contains(str);

     let starts = str => type.startsWith(str);

     let group;

     if (starts("animation")) {

       group = L10N.getStr("animationEvents");

     } else if (starts("audio")) {

       group = L10N.getStr("audioEvents");

     } else if (is("levelchange")) {

       group = L10N.getStr("batteryEvents");

     } else if (is("cut", "copy", "paste")) {

       group = L10N.getStr("clipboardEvents");

     } else if (starts("composition")) {

       group = L10N.getStr("compositionEvents");

     } else if (starts("device")) {

       group = L10N.getStr("deviceEvents");

     } else if (is("fullscreenchange", "fullscreenerror", "orientationchange",

       "overflow", "resize", "scroll", "underflow", "zoom")) {

       group = L10N.getStr("displayEvents");

     } else if (starts("drag") || starts("drop")) {

       group = L10N.getStr("Drag and dropEvents");

     } else if (starts("gamepad")) {

       group = L10N.getStr("gamepadEvents");

     } else if (is("canplay", "canplaythrough", "durationchange", "emptied",

       "ended", "loadeddata", "loadedmetadata", "pause", "play", "playing",

       "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate",

       "volumechange", "waiting")) {

       group = L10N.getStr("mediaEvents");

     } else if (is("blocked", "complete", "success", "upgradeneeded", "versionchange")) {

       group = L10N.getStr("indexedDBEvents");

     } else if (is("blur", "change", "focus", "focusin", "focusout", "invalid",

       "reset", "select", "submit")) {

       group = L10N.getStr("interactionEvents");

     } else if (starts("key") || is("input")) {

       group = L10N.getStr("keyboardEvents");

     } else if (starts("mouse") || has("click") || is("contextmenu", "show", "wheel")) {

       group = L10N.getStr("mouseEvents");

     } else if (starts("DOM")) {

       group = L10N.getStr("mutationEvents");

     } else if (is("abort", "error", "hashchange", "load", "loadend", "loadstart",

       "pagehide", "pageshow", "progress", "timeout", "unload", "uploadprogress",

       "visibilitychange")) {

       group = L10N.getStr("navigationEvents");

     } else if (is("pointerlockchange", "pointerlockerror")) {

       group = L10N.getStr("Pointer lockEvents");

     } else if (is("compassneedscalibration", "userproximity")) {

       group = L10N.getStr("sensorEvents");

     } else if (starts("storage")) {

       group = L10N.getStr("storageEvents");

     } else if (is("beginEvent", "endEvent", "repeatEvent")) {

       group = L10N.getStr("timeEvents");

     } else if (starts("touch")) {

       group = L10N.getStr("touchEvents");

     } else {

       group = L10N.getStr("otherEvents");

     }

     // Create the element node for the event listener item.

     let itemView = this._createItemView(type, selector, url);

     // Event breakpoints survive target navigations. Make sure the newly

     // inserted event item is correctly checked.

     let checkboxState =

       DebuggerController.Breakpoints.DOM.activeEventNames.indexOf(type) != -1;

     // Append an event listener item to this container.

     this.push([itemView.container], {

       staged: aOptions.staged, /* stage the item to be appended later? */

       attachment: {

         url: url,

         type: type,

         view: itemView,

         selectors: [selector],

         group: group,

         checkboxState: checkboxState,

         checkboxTooltip: this._eventCheckboxTooltip

       }

     });

   },

   /**

    * Gets all the event types known to this container.

    *

    * @return array

    *         List of event types, for example ["load", "click"...]

    */

   getAllEvents: function() {

     return this.attachments.map(e => e.type);

   },

   /**

    * Gets the checked event types in this container.

    *

    * @return array

    *         List of event types, for example ["load", "click"...]

    */

   getCheckedEvents: function() {

     return this.attachments.filter(e => e.checkboxState).map(e => e.type);

   },

   /**

    * Customization function for creating an item's UI.

    *

    * @param string aType

    *        The event type, for example "click".

    * @param string aSelector

    *        The target element's selector.

    * @param string url

    *        The source url in which the event listener is located.

    * @return object

    *         An object containing the event listener view nodes.

    */

   _createItemView: function(aType, aSelector, aUrl) {

     let container = document.createElement("hbox");

     container.className = "dbg-event-listener";

     let eventType = document.createElement("label");

     eventType.className = "plain dbg-event-listener-type";

     eventType.setAttribute("value", aType);

     container.appendChild(eventType);

     let typeSeparator = document.createElement("label");

     typeSeparator.className = "plain dbg-event-listener-separator";

     typeSeparator.setAttribute("value", this._onSelectorString);

     container.appendChild(typeSeparator);

     let eventTargets = document.createElement("label");

     eventTargets.className = "plain dbg-event-listener-targets";

     eventTargets.setAttribute("value", aSelector);

     container.appendChild(eventTargets);

     let selectorSeparator = document.createElement("label");

     selectorSeparator.className = "plain dbg-event-listener-separator";

     selectorSeparator.setAttribute("value", this._inSourceString);

     container.appendChild(selectorSeparator);

     let eventLocation = document.createElement("label");

     eventLocation.className = "plain dbg-event-listener-location";

     eventLocation.setAttribute("value", SourceUtils.getSourceLabel(aUrl));

     eventLocation.setAttribute("flex", "1");

     eventLocation.setAttribute("crop", "center");

     container.appendChild(eventLocation);

     return {

       container: container,

       type: eventType,

       targets: eventTargets,

       location: eventLocation

     };

   },

   /**

    * The check listener for the event listeners container.

    */

   _onCheck: function({ detail: { description, checked }, target }) {

     if (description == "item") {

       this.getItemForElement(target).attachment.checkboxState = checked;

       DebuggerController.Breakpoints.DOM.scheduleEventBreakpointsUpdate();

       return;

     }

     // Check all the event items in this group.

     this.items

       .filter(e => e.attachment.group == description)

       .forEach(e => this.callMethod("checkItem", e.target, checked));

   },

   /**

    * The select listener for the event listeners container.

    */

   _onClick: function({ target }) {

     // Changing the checkbox state is handled by the _onCheck event. Avoid

     // handling that again in this click event, so pass in "noSiblings"

     // when retrieving the target's item, to ignore the checkbox.

     let eventItem = this.getItemForElement(target, { noSiblings: true });

     if (eventItem) {

       let newState = eventItem.attachment.checkboxState ^= 1;

       this.callMethod("checkItem", eventItem.target, newState);

     }

   },

   _eventCheckboxTooltip: "",

   _onSelectorString: "",

   _inSourceString: "",

   _inNativeCodeString: ""

 });

 /**

  * Functions handling the global search UI.

  */

 function GlobalSearchView() {

   dumpn("GlobalSearchView was instantiated");

   this._onHeaderClick = this._onHeaderClick.bind(this);

   this._onLineClick = this._onLineClick.bind(this);

   this._onMatchClick = this._onMatchClick.bind(this);

 }

 GlobalSearchView.prototype = Heritage.extend(WidgetMethods, {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the GlobalSearchView");

     this.widget = new SimpleListWidget(document.getElementById("globalsearch"));

     this._splitter = document.querySelector("#globalsearch + .devtools-horizontal-splitter");

     this.emptyText = L10N.getStr("noMatchingStringsText");

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the GlobalSearchView");

   },

   /**

    * Sets the results container hidden or visible. It's hidden by default.

    * @param boolean aFlag

    */

   set hidden(aFlag) {

     this.widget.setAttribute("hidden", aFlag);

     this._splitter.setAttribute("hidden", aFlag);

   },

   /**

    * Gets the visibility state of the global search container.

    * @return boolean

    */

   get hidden()

     this.widget.getAttribute("hidden") == "true" ||

     this._splitter.getAttribute("hidden") == "true",

   /**

    * Hides and removes all items from this search container.

    */

   clearView: function() {

     this.hidden = true;

     this.empty();

   },

   /**

    * Selects the next found item in this container.