The Tor Browser: browser/devtools/shared/widgets/VariablesView.jsm@925c144e1f1f (annotated)

browser/devtools/shared/widgets/VariablesView.jsm@925c144e1f1f (annotated)

browser/devtools/shared/widgets/VariablesView.jsm

Fri, 16 Jan 2015 18:13:44 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Fri, 16 Jan 2015 18:13:44 +0100
branch: TOR_BUG_9701
changeset 14: 925c144e1f1f
permissions: -rw-r--r--

Integrate suggestion from review to improve consistency with existing code.

 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 const DBG_STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
 const LAZY_EMPTY_DELAY = 150; // ms
 const LAZY_EXPAND_DELAY = 50; // ms
 const SCROLL_PAGE_SIZE_DEFAULT = 0;
 const APPEND_PAGE_SIZE_DEFAULT = 500;
 const PAGE_SIZE_SCROLL_HEIGHT_RATIO = 100;
 const PAGE_SIZE_MAX_JUMPS = 30;
 const SEARCH_ACTION_MAX_DELAY = 300; // ms
 const ITEM_FLASH_DURATION = 300 // ms
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
 Cu.import("resource://gre/modules/devtools/event-emitter.js");
 Cu.import("resource://gre/modules/devtools/DevToolsUtils.jsm");
 Cu.import("resource://gre/modules/Task.jsm");
 let {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
 XPCOMUtils.defineLazyModuleGetter(this, "devtools",
   "resource://gre/modules/devtools/Loader.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
   "resource://gre/modules/PluralForm.jsm");
 XPCOMUtils.defineLazyServiceGetter(this, "clipboardHelper",
   "@mozilla.org/widget/clipboardhelper;1",
   "nsIClipboardHelper");
 Object.defineProperty(this, "WebConsoleUtils", {
   get: function() {
     return devtools.require("devtools/toolkit/webconsole/utils").Utils;
   },
   configurable: true,
   enumerable: true
 });
 Object.defineProperty(this, "NetworkHelper", {
   get: function() {
     return devtools.require("devtools/toolkit/webconsole/network-helper");
   },
   configurable: true,
   enumerable: true
 });
 this.EXPORTED_SYMBOLS = ["VariablesView", "escapeHTML"];
 /**
  * Debugger localization strings.
  */
 const STR = Services.strings.createBundle(DBG_STRINGS_URI);
 /**
  * A tree view for inspecting scopes, objects and properties.
  * Iterable via "for (let [id, scope] of instance) { }".
  * Requires the devtools common.css and debugger.css skin stylesheets.
  *
  * To allow replacing variable or property values in this view, provide an
  * "eval" function property. To allow replacing variable or property names,
  * provide a "switch" function. To handle deleting variables or properties,
  * provide a "delete" function.
  *
  * @param nsIDOMNode aParentNode
  *        The parent node to hold this view.
  * @param object aFlags [optional]
  *        An object contaning initialization options for this view.
  *        e.g. { lazyEmpty: true, searchEnabled: true ... }
  */
 this.VariablesView = function VariablesView(aParentNode, aFlags = {}) {
   this._store = []; // Can't use a Map because Scope names needn't be unique.
   this._itemsByElement = new WeakMap();
   this._prevHierarchy = new Map();
   this._currHierarchy = new Map();
   this._parent = aParentNode;
   this._parent.classList.add("variables-view-container");
   this._parent.classList.add("theme-body");
   this._appendEmptyNotice();
   this._onSearchboxInput = this._onSearchboxInput.bind(this);
   this._onSearchboxKeyPress = this._onSearchboxKeyPress.bind(this);
   this._onViewKeyPress = this._onViewKeyPress.bind(this);
   this._onViewKeyDown = this._onViewKeyDown.bind(this);
   // Create an internal scrollbox container.
   this._list = this.document.createElement("scrollbox");
   this._list.setAttribute("orient", "vertical");
   this._list.addEventListener("keypress", this._onViewKeyPress, false);
   this._list.addEventListener("keydown", this._onViewKeyDown, false);
   this._parent.appendChild(this._list);
   for (let name in aFlags) {
     this[name] = aFlags[name];
   }
   EventEmitter.decorate(this);
 };
 VariablesView.prototype = {
   /**
    * Helper setter for populating this container with a raw object.
    *
    * @param object aObject
    *        The raw object to display. You can only provide this object
    *        if you want the variables view to work in sync mode.
    */
   set rawObject(aObject) {
     this.empty();
     this.addScope()
         .addItem("", { enumerable: true })
         .populate(aObject, { sorted: true });
   },
   /**
    * Adds a scope to contain any inspected variables.
    *
    * This new scope will be considered the parent of any other scope
    * added afterwards.
    *
    * @param string aName
    *        The scope's name (e.g. "Local", "Global" etc.).
    * @return Scope
    *         The newly created Scope instance.
    */
   addScope: function(aName = "") {
     this._removeEmptyNotice();
     this._toggleSearchVisibility(true);
     let scope = new Scope(this, aName);
     this._store.push(scope);
     this._itemsByElement.set(scope._target, scope);
     this._currHierarchy.set(aName, scope);
     scope.header = !!aName;
     return scope;
   },
   /**
    * Removes all items from this container.
    *
    * @param number aTimeout [optional]
    *        The number of milliseconds to delay the operation if
    *        lazy emptying of this container is enabled.
    */
   empty: function(aTimeout = this.lazyEmptyDelay) {
     // If there are no items in this container, emptying is useless.
     if (!this._store.length) {
       return;
     }
     this._store.length = 0;
     this._itemsByElement.clear();
     this._prevHierarchy = this._currHierarchy;
     this._currHierarchy = new Map(); // Don't clear, this is just simple swapping.
     // Check if this empty operation may be executed lazily.
     if (this.lazyEmpty && aTimeout > 0) {
       this._emptySoon(aTimeout);
       return;
     }
     while (this._list.hasChildNodes()) {
       this._list.firstChild.remove();
     }
     this._appendEmptyNotice();
     this._toggleSearchVisibility(false);
   },
   /**
    * Emptying this container and rebuilding it immediately afterwards would
    * result in a brief redraw flicker, because the previously expanded nodes
    * may get asynchronously re-expanded, after fetching the prototype and
    * properties from a server.
    *
    * To avoid such behaviour, a normal container list is rebuild, but not
    * immediately attached to the parent container. The old container list
    * is kept around for a short period of time, hopefully accounting for the
    * data fetching delay. In the meantime, any operations can be executed
    * normally.
    *
    * @see VariablesView.empty
    * @see VariablesView.commitHierarchy
    */
   _emptySoon: function(aTimeout) {
     let prevList = this._list;
     let currList = this._list = this.document.createElement("scrollbox");
     this.window.setTimeout(() => {
       prevList.removeEventListener("keypress", this._onViewKeyPress, false);
       prevList.removeEventListener("keydown", this._onViewKeyDown, false);
       currList.addEventListener("keypress", this._onViewKeyPress, false);
       currList.addEventListener("keydown", this._onViewKeyDown, false);
       currList.setAttribute("orient", "vertical");
       this._parent.removeChild(prevList);
       this._parent.appendChild(currList);
       if (!this._store.length) {
         this._appendEmptyNotice();
         this._toggleSearchVisibility(false);
       }
     }, aTimeout);
   },
   /**
    * Optional DevTools toolbox containing this VariablesView. Used to
    * communicate with the inspector and highlighter.
    */
   toolbox: null,
   /**
    * The controller for this VariablesView, if it has one.
    */
   controller: null,
   /**
    * The amount of time (in milliseconds) it takes to empty this view lazily.
    */
   lazyEmptyDelay: LAZY_EMPTY_DELAY,
   /**
    * Specifies if this view may be emptied lazily.
    * @see VariablesView.prototype.empty
    */
   lazyEmpty: false,
   /**
    * Specifies if nodes in this view may be searched lazily.
    */
   lazySearch: true,
   /**
    * The number of elements in this container to jump when Page Up or Page Down
    * keys are pressed. If falsy, then the page size will be based on the
    * container height.
    */
   scrollPageSize: SCROLL_PAGE_SIZE_DEFAULT,
   /**
    * The maximum number of elements allowed in a scope, variable or property
    * that allows pagination when appending children.
    */
   appendPageSize: APPEND_PAGE_SIZE_DEFAULT,
   /**
    * Function called each time a variable or property's value is changed via
    * user interaction. If null, then value changes are disabled.
    *
    * This property is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   eval: null,
   /**
    * Function called each time a variable or property's name is changed via
    * user interaction. If null, then name changes are disabled.
    *
    * This property is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   switch: null,
   /**
    * Function called each time a variable or property is deleted via
    * user interaction. If null, then deletions are disabled.
    *
    * This property is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   delete: null,
   /**
    * Function called each time a property is added via user interaction. If
    * null, then property additions are disabled.
    *
    * This property is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   new: null,
   /**
    * Specifies if after an eval or switch operation, the variable or property
    * which has been edited should be disabled.
    */
   preventDisableOnChange: false,
   /**
    * Specifies if, whenever a variable or property descriptor is available,
    * configurable, enumerable, writable, frozen, sealed and extensible
    * attributes should not affect presentation.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   preventDescriptorModifiers: false,
   /**
    * The tooltip text shown on a variable or property's value if an |eval|
    * function is provided, in order to change the variable or property's value.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   editableValueTooltip: STR.GetStringFromName("variablesEditableValueTooltip"),
   /**
    * The tooltip text shown on a variable or property's name if a |switch|
    * function is provided, in order to change the variable or property's name.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   editableNameTooltip: STR.GetStringFromName("variablesEditableNameTooltip"),
   /**
    * The tooltip text shown on a variable or property's edit button if an
    * |eval| function is provided and a getter/setter descriptor is present,
    * in order to change the variable or property to a plain value.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   editButtonTooltip: STR.GetStringFromName("variablesEditButtonTooltip"),
   /**
    * The tooltip text shown on a variable or property's value if that value is
    * a DOMNode that can be highlighted and selected in the inspector.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   domNodeValueTooltip: STR.GetStringFromName("variablesDomNodeValueTooltip"),
   /**
    * The tooltip text shown on a variable or property's delete button if a
    * |delete| function is provided, in order to delete the variable or property.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   deleteButtonTooltip: STR.GetStringFromName("variablesCloseButtonTooltip"),
   /**
    * Specifies the context menu attribute set on variables and properties.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   contextMenuId: "",
   /**
    * The separator label between the variables or properties name and value.
    *
    * This flag is applied recursively onto each scope in this view and
    * affects only the child nodes when they're created.
    */
   separatorStr: STR.GetStringFromName("variablesSeparatorLabel"),
   /**
    * Specifies if enumerable properties and variables should be displayed.
    * These variables and properties are visible by default.
    * @param boolean aFlag
    */
   set enumVisible(aFlag) {
     this._enumVisible = aFlag;
     for (let scope of this._store) {
       scope._enumVisible = aFlag;
     }
   },
   /**
    * Specifies if non-enumerable properties and variables should be displayed.
    * These variables and properties are visible by default.
    * @param boolean aFlag
    */
   set nonEnumVisible(aFlag) {
     this._nonEnumVisible = aFlag;
     for (let scope of this._store) {
       scope._nonEnumVisible = aFlag;
     }
   },
   /**
    * Specifies if only enumerable properties and variables should be displayed.
    * Both types of these variables and properties are visible by default.
    * @param boolean aFlag
    */
   set onlyEnumVisible(aFlag) {
     if (aFlag) {
       this.enumVisible = true;
       this.nonEnumVisible = false;
     } else {
       this.enumVisible = true;
       this.nonEnumVisible = true;
     }
   },
   /**
    * Sets if the variable and property searching is enabled.
    * @param boolean aFlag
    */
   set searchEnabled(aFlag) aFlag ? this._enableSearch() : this._disableSearch(),
   /**
    * Gets if the variable and property searching is enabled.
    * @return boolean
    */
   get searchEnabled() !!this._searchboxContainer,
   /**
    * Sets the text displayed for the searchbox in this container.
    * @param string aValue
    */
   set searchPlaceholder(aValue) {
     if (this._searchboxNode) {
       this._searchboxNode.setAttribute("placeholder", aValue);
     }
     this._searchboxPlaceholder = aValue;
   },
   /**
    * Gets the text displayed for the searchbox in this container.
    * @return string
    */
   get searchPlaceholder() this._searchboxPlaceholder,
   /**
    * Enables variable and property searching in this view.
    * Use the "searchEnabled" setter to enable searching.
    */
   _enableSearch: function() {
     // If searching was already enabled, no need to re-enable it again.
     if (this._searchboxContainer) {
       return;
     }
     let document = this.document;
     let ownerNode = this._parent.parentNode;
     let container = this._searchboxContainer = document.createElement("hbox");
     container.className = "devtools-toolbar";
     // Hide the variables searchbox container if there are no variables or
     // properties to display.
     container.hidden = !this._store.length;
     let searchbox = this._searchboxNode = document.createElement("textbox");
     searchbox.className = "variables-view-searchinput devtools-searchinput";
     searchbox.setAttribute("placeholder", this._searchboxPlaceholder);
     searchbox.setAttribute("type", "search");
     searchbox.setAttribute("flex", "1");
     searchbox.addEventListener("input", this._onSearchboxInput, false);
     searchbox.addEventListener("keypress", this._onSearchboxKeyPress, false);
     container.appendChild(searchbox);
     ownerNode.insertBefore(container, this._parent);
   },
   /**
    * Disables variable and property searching in this view.
    * Use the "searchEnabled" setter to disable searching.
    */
   _disableSearch: function() {
     // If searching was already disabled, no need to re-disable it again.
     if (!this._searchboxContainer) {
       return;
     }
     this._searchboxContainer.remove();
     this._searchboxNode.removeEventListener("input", this._onSearchboxInput, false);
     this._searchboxNode.removeEventListener("keypress", this._onSearchboxKeyPress, false);
     this._searchboxContainer = null;
     this._searchboxNode = null;
   },
   /**
    * Sets the variables searchbox container hidden or visible.
    * It's hidden by default.
    *
    * @param boolean aVisibleFlag
    *        Specifies the intended visibility.
    */
   _toggleSearchVisibility: function(aVisibleFlag) {
     // If searching was already disabled, there's no need to hide it.
     if (!this._searchboxContainer) {
       return;
     }
     this._searchboxContainer.hidden = !aVisibleFlag;
   },
   /**
    * Listener handling the searchbox input event.
    */
   _onSearchboxInput: function() {
     this.scheduleSearch(this._searchboxNode.value);
   },
   /**
    * Listener handling the searchbox key press event.
    */
   _onSearchboxKeyPress: function(e) {
     switch(e.keyCode) {
       case e.DOM_VK_RETURN:
         this._onSearchboxInput();
         return;
       case e.DOM_VK_ESCAPE:
         this._searchboxNode.value = "";
         this._onSearchboxInput();
         return;
     }
   },
   /**
    * Schedules searching for variables or properties matching the query.
    *
    * @param string aToken
    *        The variable or property to search for.
    * @param number aWait
    *        The amount of milliseconds to wait until draining.
    */
   scheduleSearch: function(aToken, aWait) {
     // Check if this search operation may not be executed lazily.
     if (!this.lazySearch) {
       this._doSearch(aToken);
       return;
     }
     // The amount of time to wait for the requests to settle.
     let maxDelay = SEARCH_ACTION_MAX_DELAY;
     let delay = aWait === undefined ? maxDelay / aToken.length : aWait;
     // Allow requests to settle down first.
     setNamedTimeout("vview-search", delay, () => this._doSearch(aToken));
   },
   /**
    * Performs a case insensitive search for variables or properties matching
    * the query, and hides non-matched items.
    *
    * If aToken is falsy, then all the scopes are unhidden and expanded,
    * while the available variables and properties inside those scopes are
    * just unhidden.
    *
    * @param string aToken
    *        The variable or property to search for.
    */
   _doSearch: function(aToken) {
     for (let scope of this._store) {
       switch (aToken) {
         case "":
         case null:
         case undefined:
           scope.expand();
           scope._performSearch("");
           break;
         default:
           scope._performSearch(aToken.toLowerCase());
           break;
       }
     }
   },
   /**
    * Find the first item in the tree of visible items in this container that
    * matches the predicate. Searches in visual order (the order seen by the
    * user). Descends into each scope to check the scope and its children.
    *
    * @param function aPredicate
    *        A function that returns true when a match is found.
    * @return Scope | Variable | Property
    *         The first visible scope, variable or property, or null if nothing
    *         is found.
    */
   _findInVisibleItems: function(aPredicate) {
     for (let scope of this._store) {
       let result = scope._findInVisibleItems(aPredicate);
       if (result) {
         return result;
       }
     }
     return null;
   },
   /**
    * Find the last item in the tree of visible items in this container that
    * matches the predicate. Searches in reverse visual order (opposite of the
    * order seen by the user). Descends into each scope to check the scope and
    * its children.
    *
    * @param function aPredicate
    *        A function that returns true when a match is found.
    * @return Scope | Variable | Property
    *         The last visible scope, variable or property, or null if nothing
    *         is found.
    */
   _findInVisibleItemsReverse: function(aPredicate) {
     for (let i = this._store.length - 1; i >= 0; i--) {
       let scope = this._store[i];
       let result = scope._findInVisibleItemsReverse(aPredicate);
       if (result) {
         return result;
       }
     }
     return null;
   },
   /**
    * Gets the scope at the specified index.
    *
    * @param number aIndex
    *        The scope's index.
    * @return Scope
    *         The scope if found, undefined if not.
    */
   getScopeAtIndex: function(aIndex) {
     return this._store[aIndex];
   },
   /**
    * Recursively searches this container for the scope, variable or property
    * displayed by the specified node.
    *
    * @param nsIDOMNode aNode
    *        The node to search for.
    * @return Scope | Variable | Property
    *         The matched scope, variable or property, or null if nothing is found.
    */
   getItemForNode: function(aNode) {
     return this._itemsByElement.get(aNode);
   },
   /**
    * Gets the scope owning a Variable or Property.
    *
    * @param Variable | Property
    *        The variable or property to retrieven the owner scope for.
    * @return Scope
    *         The owner scope.
    */
   getOwnerScopeForVariableOrProperty: function(aItem) {
     if (!aItem) {
       return null;
     }
     // If this is a Scope, return it.
     if (!(aItem instanceof Variable)) {
       return aItem;
     }
     // If this is a Variable or Property, find its owner scope.
     if (aItem instanceof Variable && aItem.ownerView) {
       return this.getOwnerScopeForVariableOrProperty(aItem.ownerView);
     }
     return null;
   },
   /**
    * Gets the parent scopes for a specified Variable or Property.
    * The returned list will not include the owner scope.
    *
    * @param Variable | Property
    *        The variable or property for which to find the parent scopes.
    * @return array
    *         A list of parent Scopes.
    */
   getParentScopesForVariableOrProperty: function(aItem) {
     let scope = this.getOwnerScopeForVariableOrProperty(aItem);
     return this._store.slice(0, Math.max(this._store.indexOf(scope), 0));
   },
   /**
    * Gets the currently focused scope, variable or property in this view.
    *
    * @return Scope | Variable | Property
    *         The focused scope, variable or property, or null if nothing is found.
    */
   getFocusedItem: function() {
     let focused = this.document.commandDispatcher.focusedElement;
     return this.getItemForNode(focused);
   },
   /**
    * Focuses the first visible scope, variable, or property in this container.
    */
   focusFirstVisibleItem: function() {
     let focusableItem = this._findInVisibleItems(item => item.focusable);
     if (focusableItem) {
       this._focusItem(focusableItem);
     }
     this._parent.scrollTop = 0;
     this._parent.scrollLeft = 0;
   },
   /**
    * Focuses the last visible scope, variable, or property in this container.
    */
   focusLastVisibleItem: function() {
     let focusableItem = this._findInVisibleItemsReverse(item => item.focusable);
     if (focusableItem) {
       this._focusItem(focusableItem);
     }
     this._parent.scrollTop = this._parent.scrollHeight;
     this._parent.scrollLeft = 0;
   },
   /**
    * Focuses the next scope, variable or property in this view.
    */
   focusNextItem: function() {
     this.focusItemAtDelta(+1);
   },
   /**
    * Focuses the previous scope, variable or property in this view.
    */
   focusPrevItem: function() {
     this.focusItemAtDelta(-1);
   },
   /**
    * Focuses another scope, variable or property in this view, based on
    * the index distance from the currently focused item.
    *
    * @param number aDelta
    *        A scalar specifying by how many items should the selection change.
    */
   focusItemAtDelta: function(aDelta) {
     let direction = aDelta > 0 ? "advanceFocus" : "rewindFocus";
     let distance = Math.abs(Math[aDelta > 0 ? "ceil" : "floor"](aDelta));
     while (distance--) {
       if (!this._focusChange(direction)) {
         break; // Out of bounds.
       }
     }
   },
   /**
    * Focuses the next or previous scope, variable or property in this view.
    *
    * @param string aDirection
    *        Either "advanceFocus" or "rewindFocus".
    * @return boolean
    *         False if the focus went out of bounds and the first or last element
    *         in this view was focused instead.
    */
   _focusChange: function(aDirection) {
     let commandDispatcher = this.document.commandDispatcher;
     let prevFocusedElement = commandDispatcher.focusedElement;
     let currFocusedItem = null;
     do {
       commandDispatcher.suppressFocusScroll = true;
       commandDispatcher[aDirection]();
       // Make sure the newly focused item is a part of this view.
       // If the focus goes out of bounds, revert the previously focused item.
       if (!(currFocusedItem = this.getFocusedItem())) {
         prevFocusedElement.focus();
         return false;
       }
     } while (!currFocusedItem.focusable);
     // Focus remained within bounds.
     return true;
   },
   /**
    * Focuses a scope, variable or property and makes sure it's visible.
    *
    * @param aItem Scope | Variable | Property
    *        The item to focus.
    * @param boolean aCollapseFlag
    *        True if the focused item should also be collapsed.
    * @return boolean
    *         True if the item was successfully focused.
    */
   _focusItem: function(aItem, aCollapseFlag) {
     if (!aItem.focusable) {
       return false;
     }
     if (aCollapseFlag) {
       aItem.collapse();
     }
     aItem._target.focus();
     this.boxObject.ensureElementIsVisible(aItem._arrow);
     return true;
   },
   /**
    * Listener handling a key press event on the view.
    */
   _onViewKeyPress: function(e) {
     let item = this.getFocusedItem();
     // Prevent scrolling when pressing navigation keys.
     ViewHelpers.preventScrolling(e);
     switch (e.keyCode) {
       case e.DOM_VK_UP:
         // Always rewind focus.
         this.focusPrevItem(true);
         return;
       case e.DOM_VK_DOWN:
         // Always advance focus.
         this.focusNextItem(true);
         return;
       case e.DOM_VK_LEFT:
         // Collapse scopes, variables and properties before rewinding focus.
         if (item._isExpanded && item._isArrowVisible) {
           item.collapse();
         } else {
           this._focusItem(item.ownerView);
         }
         return;
       case e.DOM_VK_RIGHT:
         // Nothing to do here if this item never expands.
         if (!item._isArrowVisible) {
           return;
         }
         // Expand scopes, variables and properties before advancing focus.
         if (!item._isExpanded) {
           item.expand();
         } else {
           this.focusNextItem(true);
         }
         return;
       case e.DOM_VK_PAGE_UP:
         // Rewind a certain number of elements based on the container height.
         this.focusItemAtDelta(-(this.scrollPageSize || Math.min(Math.floor(this._list.scrollHeight /
           PAGE_SIZE_SCROLL_HEIGHT_RATIO),
           PAGE_SIZE_MAX_JUMPS)));
         return;
       case e.DOM_VK_PAGE_DOWN:
         // Advance a certain number of elements based on the container height.
         this.focusItemAtDelta(+(this.scrollPageSize || Math.min(Math.floor(this._list.scrollHeight /
           PAGE_SIZE_SCROLL_HEIGHT_RATIO),
           PAGE_SIZE_MAX_JUMPS)));
         return;
       case e.DOM_VK_HOME:
         this.focusFirstVisibleItem();
         return;
       case e.DOM_VK_END:
         this.focusLastVisibleItem();
         return;
       case e.DOM_VK_RETURN:
         // Start editing the value or name of the Variable or Property.
         if (item instanceof Variable) {
           if (e.metaKey || e.altKey || e.shiftKey) {
             item._activateNameInput();
           } else {
             item._activateValueInput();
           }
         }
         return;
       case e.DOM_VK_DELETE:
       case e.DOM_VK_BACK_SPACE:
         // Delete the Variable or Property if allowed.
         if (item instanceof Variable) {
           item._onDelete(e);
         }
         return;
       case e.DOM_VK_INSERT:
         item._onAddProperty(e);
         return;
     }
   },
   /**
    * Listener handling a key down event on the view.
    */
   _onViewKeyDown: function(e) {
     if (e.keyCode == e.DOM_VK_C) {
       // Copy current selection to clipboard.
       if (e.ctrlKey || e.metaKey) {
         let item = this.getFocusedItem();
         clipboardHelper.copyString(
           item._nameString + item.separatorStr + item._valueString
         );
       }
     }
   },
   /**
    * Sets the text displayed in this container when there are no available items.
    * @param string aValue
    */
   set emptyText(aValue) {
     if (this._emptyTextNode) {
       this._emptyTextNode.setAttribute("value", aValue);
     }
     this._emptyTextValue = aValue;
     this._appendEmptyNotice();
   },
   /**
    * Creates and appends a label signaling that this container is empty.
    */
   _appendEmptyNotice: function() {
     if (this._emptyTextNode || !this._emptyTextValue) {
       return;
     }
     let label = this.document.createElement("label");
     label.className = "variables-view-empty-notice";
     label.setAttribute("value", this._emptyTextValue);
     this._parent.appendChild(label);
     this._emptyTextNode = label;
   },
   /**
    * Removes the label signaling that this container is empty.
    */
   _removeEmptyNotice: function() {
     if (!this._emptyTextNode) {
       return;
     }
     this._parent.removeChild(this._emptyTextNode);
     this._emptyTextNode = null;
   },
   /**
    * Gets if all values should be aligned together.
    * @return boolean
    */
   get alignedValues() {
     return this._alignedValues;
   },
   /**
    * Sets if all values should be aligned together.
    * @param boolean aFlag
    */
   set alignedValues(aFlag) {
     this._alignedValues = aFlag;
     if (aFlag) {
       this._parent.setAttribute("aligned-values", "");
     } else {
       this._parent.removeAttribute("aligned-values");
     }
   },
   /**
    * Gets if action buttons (like delete) should be placed at the beginning or
    * end of a line.
    * @return boolean
    */
   get actionsFirst() {
     return this._actionsFirst;
   },
   /**
    * Sets if action buttons (like delete) should be placed at the beginning or
    * end of a line.
    * @param boolean aFlag
    */
   set actionsFirst(aFlag) {
     this._actionsFirst = aFlag;
     if (aFlag) {
       this._parent.setAttribute("actions-first", "");
     } else {
       this._parent.removeAttribute("actions-first");
     }
   },
   /**
    * Gets the parent node holding this view.
    * @return nsIDOMNode
    */
   get boxObject() this._list.boxObject.QueryInterface(Ci.nsIScrollBoxObject),
   /**
    * Gets the parent node holding this view.
    * @return nsIDOMNode
    */
   get parentNode() this._parent,
   /**
    * Gets the owner document holding this view.
    * @return nsIHTMLDocument
    */
   get document() this._document || (this._document = this._parent.ownerDocument),
   /**
    * Gets the default window holding this view.
    * @return nsIDOMWindow
    */
   get window() this._window || (this._window = this.document.defaultView),
   _document: null,
   _window: null,
   _store: null,
   _itemsByElement: null,
   _prevHierarchy: null,
   _currHierarchy: null,
   _enumVisible: true,
   _nonEnumVisible: true,
   _alignedValues: false,
   _actionsFirst: false,
   _parent: null,
   _list: null,
   _searchboxNode: null,
   _searchboxContainer: null,
   _searchboxPlaceholder: "",
   _emptyTextNode: null,
   _emptyTextValue: ""
 };
 VariablesView.NON_SORTABLE_CLASSES = [
   "Array",
   "Int8Array",
   "Uint8Array",
   "Uint8ClampedArray",
   "Int16Array",
   "Uint16Array",
   "Int32Array",
   "Uint32Array",
   "Float32Array",
   "Float64Array"
 ];
 /**
  * Determine whether an object's properties should be sorted based on its class.
  *
  * @param string aClassName
  *        The class of the object.
  */
 VariablesView.isSortable = function(aClassName) {
   return VariablesView.NON_SORTABLE_CLASSES.indexOf(aClassName) == -1;
 };
 /**
  * Generates the string evaluated when performing simple value changes.
  *
  * @param Variable | Property aItem
  *        The current variable or property.
  * @param string aCurrentString
  *        The trimmed user inputted string.
  * @param string aPrefix [optional]
  *        Prefix for the symbolic name.
  * @return string
  *         The string to be evaluated.
  */
 VariablesView.simpleValueEvalMacro = function(aItem, aCurrentString, aPrefix = "") {
   return aPrefix + aItem._symbolicName + "=" + aCurrentString;
 };
 /**
  * Generates the string evaluated when overriding getters and setters with
  * plain values.
  *
  * @param Property aItem
  *        The current getter or setter property.
  * @param string aCurrentString
  *        The trimmed user inputted string.
  * @param string aPrefix [optional]
  *        Prefix for the symbolic name.
  * @return string
  *         The string to be evaluated.
  */
 VariablesView.overrideValueEvalMacro = function(aItem, aCurrentString, aPrefix = "") {
   let property = "\"" + aItem._nameString + "\"";
   let parent = aPrefix + aItem.ownerView._symbolicName || "this";
   return "Object.defineProperty(" + parent + "," + property + "," +
     "{ value: " + aCurrentString +
     ", enumerable: " + parent + ".propertyIsEnumerable(" + property + ")" +
     ", configurable: true" +
     ", writable: true" +
     "})";
 };
 /**
  * Generates the string evaluated when performing getters and setters changes.
  *
  * @param Property aItem
  *        The current getter or setter property.
  * @param string aCurrentString
  *        The trimmed user inputted string.
  * @param string aPrefix [optional]
  *        Prefix for the symbolic name.
  * @return string
  *         The string to be evaluated.
  */
 VariablesView.getterOrSetterEvalMacro = function(aItem, aCurrentString, aPrefix = "") {
   let type = aItem._nameString;
   let propertyObject = aItem.ownerView;
   let parentObject = propertyObject.ownerView;
   let property = "\"" + propertyObject._nameString + "\"";
   let parent = aPrefix + parentObject._symbolicName || "this";
   switch (aCurrentString) {
     case "":
     case "null":
     case "undefined":
       let mirrorType = type == "get" ? "set" : "get";
       let mirrorLookup = type == "get" ? "__lookupSetter__" : "__lookupGetter__";
       // If the parent object will end up without any getter or setter,
       // morph it into a plain value.
       if ((type == "set" && propertyObject.getter.type == "undefined") ||
           (type == "get" && propertyObject.setter.type == "undefined")) {
         // Make sure the right getter/setter to value override macro is applied
         // to the target object.
         return propertyObject.evaluationMacro(propertyObject, "undefined", aPrefix);
       }
       // Construct and return the getter/setter removal evaluation string.
       // e.g: Object.defineProperty(foo, "bar", {
       //   get: foo.__lookupGetter__("bar"),
       //   set: undefined,
       //   enumerable: true,
       //   configurable: true
       // })
       return "Object.defineProperty(" + parent + "," + property + "," +
         "{" + mirrorType + ":" + parent + "." + mirrorLookup + "(" + property + ")" +
         "," + type + ":" + undefined +
         ", enumerable: " + parent + ".propertyIsEnumerable(" + property + ")" +
         ", configurable: true" +
         "})";
     default:
       // Wrap statements inside a function declaration if not already wrapped.
       if (!aCurrentString.startsWith("function")) {
         let header = "function(" + (type == "set" ? "value" : "") + ")";
         let body = "";
         // If there's a return statement explicitly written, always use the
         // standard function definition syntax
         if (aCurrentString.contains("return ")) {
           body = "{" + aCurrentString + "}";
         }
         // If block syntax is used, use the whole string as the function body.
         else if (aCurrentString.startsWith("{")) {
           body = aCurrentString;
         }
         // Prefer an expression closure.
         else {
           body = "(" + aCurrentString + ")";
         }
         aCurrentString = header + body;
       }
       // Determine if a new getter or setter should be defined.
       let defineType = type == "get" ? "__defineGetter__" : "__defineSetter__";
       // Make sure all quotes are escaped in the expression's syntax,
       let defineFunc = "eval(\"(" + aCurrentString.replace(/"/g, "\\$&") + ")\")";
       // Construct and return the getter/setter evaluation string.
       // e.g: foo.__defineGetter__("bar", eval("(function() { return 42; })"))
       return parent + "." + defineType + "(" + property + "," + defineFunc + ")";
   }
 };
 /**
  * Function invoked when a getter or setter is deleted.
  *
  * @param Property aItem
  *        The current getter or setter property.
  */
 VariablesView.getterOrSetterDeleteCallback = function(aItem) {
   aItem._disable();
   // Make sure the right getter/setter to value override macro is applied
   // to the target object.
   aItem.ownerView.eval(aItem, "");
   return true; // Don't hide the element.
 };
 /**
  * A Scope is an object holding Variable instances.
  * Iterable via "for (let [name, variable] of instance) { }".
  *
  * @param VariablesView aView
  *        The view to contain this scope.
  * @param string aName
  *        The scope's name.
  * @param object aFlags [optional]
  *        Additional options or flags for this scope.
  */
 function Scope(aView, aName, aFlags = {}) {
   this.ownerView = aView;
   this._onClick = this._onClick.bind(this);
   this._openEnum = this._openEnum.bind(this);
   this._openNonEnum = this._openNonEnum.bind(this);
   // Inherit properties and flags from the parent view. You can override
   // each of these directly onto any scope, variable or property instance.
   this.scrollPageSize = aView.scrollPageSize;
   this.appendPageSize = aView.appendPageSize;
   this.eval = aView.eval;
   this.switch = aView.switch;
   this.delete = aView.delete;
   this.new = aView.new;
   this.preventDisableOnChange = aView.preventDisableOnChange;
   this.preventDescriptorModifiers = aView.preventDescriptorModifiers;
   this.editableNameTooltip = aView.editableNameTooltip;
   this.editableValueTooltip = aView.editableValueTooltip;
   this.editButtonTooltip = aView.editButtonTooltip;
   this.deleteButtonTooltip = aView.deleteButtonTooltip;
   this.domNodeValueTooltip = aView.domNodeValueTooltip;
   this.contextMenuId = aView.contextMenuId;
   this.separatorStr = aView.separatorStr;
   this._init(aName.trim(), aFlags);
 }
 Scope.prototype = {
   /**
    * Whether this Scope should be prefetched when it is remoted.
    */
   shouldPrefetch: true,
   /**
    * Whether this Scope should paginate its contents.
    */
   allowPaginate: false,
   /**
    * The class name applied to this scope's target element.
    */
   targetClassName: "variables-view-scope",
   /**
    * Create a new Variable that is a child of this Scope.
    *
    * @param string aName
    *        The name of the new Property.
    * @param object aDescriptor
    *        The variable's descriptor.
    * @return Variable
    *         The newly created child Variable.
    */
   _createChild: function(aName, aDescriptor) {
     return new Variable(this, aName, aDescriptor);
   },
   /**
    * Adds a child to contain any inspected properties.
    *
    * @param string aName
    *        The child's name.
    * @param object aDescriptor
    *        Specifies the value and/or type & class of the child,
    *        or 'get' & 'set' accessor properties. If the type is implicit,
    *        it will be inferred from the value. If this parameter is omitted,
    *        a property without a value will be added (useful for branch nodes).
    *        e.g. - { value: 42 }
    *             - { value: true }
    *             - { value: "nasu" }
    *             - { value: { type: "undefined" } }
    *             - { value: { type: "null" } }
    *             - { value: { type: "object", class: "Object" } }
    *             - { get: { type: "object", class: "Function" },
    *                 set: { type: "undefined" } }
    * @param boolean aRelaxed [optional]
    *        Pass true if name duplicates should be allowed.
    *        You probably shouldn't do it. Use this with caution.
    * @return Variable
    *         The newly created Variable instance, null if it already exists.
    */
   addItem: function(aName = "", aDescriptor = {}, aRelaxed = false) {
     if (this._store.has(aName) && !aRelaxed) {
       return null;
     }
     let child = this._createChild(aName, aDescriptor);
     this._store.set(aName, child);
     this._variablesView._itemsByElement.set(child._target, child);
     this._variablesView._currHierarchy.set(child._absoluteName, child);
     child.header = !!aName;
     return child;
   },
   /**
    * Adds items for this variable.
    *
    * @param object aItems
    *        An object containing some { name: descriptor } data properties,
    *        specifying the value and/or type & class of the variable,
    *        or 'get' & 'set' accessor properties. If the type is implicit,
    *        it will be inferred from the value.
    *        e.g. - { someProp0: { value: 42 },
    *                 someProp1: { value: true },
    *                 someProp2: { value: "nasu" },
    *                 someProp3: { value: { type: "undefined" } },
    *                 someProp4: { value: { type: "null" } },
    *                 someProp5: { value: { type: "object", class: "Object" } },
    *                 someProp6: { get: { type: "object", class: "Function" },
    *                              set: { type: "undefined" } } }
    * @param object aOptions [optional]
    *        Additional options for adding the properties. Supported options:
    *        - sorted: true to sort all the properties before adding them
    *        - callback: function invoked after each item is added
    * @param string aKeysType [optional]
    *        Helper argument in the case of paginated items. Can be either
    *        "just-strings" or "just-numbers". Humans shouldn't use this argument.
    */
   addItems: function(aItems, aOptions = {}, aKeysType = "") {
     let names = Object.keys(aItems);
     // Building the view when inspecting an object with a very large number of
     // properties may take a long time. To avoid blocking the UI, group
     // the items into several lazily populated pseudo-items.
     let exceedsThreshold = names.length >= this.appendPageSize;
     let shouldPaginate = exceedsThreshold && aKeysType != "just-strings";
     if (shouldPaginate && this.allowPaginate) {
       // Group the items to append into two separate arrays, one containing
       // number-like keys, the other one containing string keys.
       if (aKeysType == "just-numbers") {
         var numberKeys = names;
         var stringKeys = [];
       } else {
         var numberKeys = [];
         var stringKeys = [];
         for (let name of names) {
           // Be very careful. Avoid Infinity, NaN and non Natural number keys.
           let coerced = +name;
           if (Number.isInteger(coerced) && coerced > -1) {
             numberKeys.push(name);
           } else {
             stringKeys.push(name);
           }
         }
       }
       // This object contains a very large number of properties, but they're
       // almost all strings that can't be coerced to numbers. Don't paginate.
       if (numberKeys.length < this.appendPageSize) {
         this.addItems(aItems, aOptions, "just-strings");
         return;
       }
       // Slices a section of the { name: descriptor } data properties.
       let paginate = (aArray, aBegin = 0, aEnd = aArray.length) => {
         let store = {}
         for (let i = aBegin; i < aEnd; i++) {
           let name = aArray[i];
           store[name] = aItems[name];
         }
         return store;
       };
       // Creates a pseudo-item that populates itself with the data properties
       // from the corresponding page range.
       let createRangeExpander = (aArray, aBegin, aEnd, aOptions, aKeyTypes) => {
         let rangeVar = this.addItem(aArray[aBegin] + Scope.ellipsis + aArray[aEnd - 1]);
         rangeVar.onexpand = () => {
           let pageItems = paginate(aArray, aBegin, aEnd);
           rangeVar.addItems(pageItems, aOptions, aKeyTypes);
         }
         rangeVar.showArrow();
         rangeVar.target.setAttribute("pseudo-item", "");
       };
       // Divide the number keys into quarters.
       let page = +Math.round(numberKeys.length / 4).toPrecision(1);
       createRangeExpander(numberKeys, 0, page, aOptions, "just-numbers");
       createRangeExpander(numberKeys, page, page * 2, aOptions, "just-numbers");
       createRangeExpander(numberKeys, page * 2, page * 3, aOptions, "just-numbers");
       createRangeExpander(numberKeys, page * 3, numberKeys.length, aOptions, "just-numbers");
       // Append all the string keys together.
       this.addItems(paginate(stringKeys), aOptions, "just-strings");
       return;
     }
     // Sort all of the properties before adding them, if preferred.
     if (aOptions.sorted && aKeysType != "just-numbers") {
       names.sort();
     }
     // Add the properties to the current scope.
     for (let name of names) {
       let descriptor = aItems[name];
       let item = this.addItem(name, descriptor);
       if (aOptions.callback) {
         aOptions.callback(item, descriptor.value);
       }
     }
   },
   /**
    * Remove this Scope from its parent and remove all children recursively.
    */
   remove: function() {
     let view = this._variablesView;
     view._store.splice(view._store.indexOf(this), 1);
     view._itemsByElement.delete(this._target);
     view._currHierarchy.delete(this._nameString);
     this._target.remove();
     for (let variable of this._store.values()) {
       variable.remove();
     }
   },
   /**
    * Gets the variable in this container having the specified name.
    *
    * @param string aName
    *        The name of the variable to get.
    * @return Variable
    *         The matched variable, or null if nothing is found.
    */
   get: function(aName) {
     return this._store.get(aName);
   },
   /**
    * Recursively searches for the variable or property in this container
    * displayed by the specified node.
    *
    * @param nsIDOMNode aNode
    *        The node to search for.
    * @return Variable | Property
    *         The matched variable or property, or null if nothing is found.
    */
   find: function(aNode) {
     for (let [, variable] of this._store) {
       let match;
       if (variable._target == aNode) {
         match = variable;
       } else {
         match = variable.find(aNode);
       }
       if (match) {
         return match;
       }
     }
     return null;
   },
   /**
    * Determines if this scope is a direct child of a parent variables view,
    * scope, variable or property.
    *
    * @param VariablesView | Scope | Variable | Property
    *        The parent to check.
    * @return boolean
    *         True if the specified item is a direct child, false otherwise.
    */
   isChildOf: function(aParent) {
     return this.ownerView == aParent;
   },
   /**
    * Determines if this scope is a descendant of a parent variables view,
    * scope, variable or property.
    *
    * @param VariablesView | Scope | Variable | Property
    *        The parent to check.
    * @return boolean
    *         True if the specified item is a descendant, false otherwise.
    */
   isDescendantOf: function(aParent) {
     if (this.isChildOf(aParent)) {
       return true;
     }
     // Recurse to parent if it is a Scope, Variable, or Property.
     if (this.ownerView instanceof Scope) {
       return this.ownerView.isDescendantOf(aParent);
     }
     return false;
   },
   /**
    * Shows the scope.
    */
   show: function() {
     this._target.hidden = false;
     this._isContentVisible = true;
     if (this.onshow) {
       this.onshow(this);
     }
   },
   /**
    * Hides the scope.
    */
   hide: function() {
     this._target.hidden = true;
     this._isContentVisible = false;
     if (this.onhide) {
       this.onhide(this);
     }
   },
   /**
    * Expands the scope, showing all the added details.
    */
   expand: function() {
     if (this._isExpanded || this._isLocked) {
       return;
     }
     if (this._variablesView._enumVisible) {
       this._openEnum();
     }
     if (this._variablesView._nonEnumVisible) {
       Services.tm.currentThread.dispatch({ run: this._openNonEnum }, 0);
     }
     this._isExpanded = true;
     if (this.onexpand) {
       this.onexpand(this);
     }
   },
   /**
    * Collapses the scope, hiding all the added details.
    */
   collapse: function() {
     if (!this._isExpanded || this._isLocked) {
       return;
     }
     this._arrow.removeAttribute("open");
     this._enum.removeAttribute("open");
     this._nonenum.removeAttribute("open");
     this._isExpanded = false;
     if (this.oncollapse) {
       this.oncollapse(this);
     }
   },
   /**
    * Toggles between the scope's collapsed and expanded state.
    */
   toggle: function(e) {
     if (e && e.button != 0) {
       // Only allow left-click to trigger this event.
       return;
     }
     this.expanded ^= 1;
     // Make sure the scope and its contents are visibile.
     for (let [, variable] of this._store) {
       variable.header = true;
       variable._matched = true;
     }
     if (this.ontoggle) {
       this.ontoggle(this);
     }
   },
   /**
    * Shows the scope's title header.
    */
   showHeader: function() {
     if (this._isHeaderVisible || !this._nameString) {
       return;
     }
     this._target.removeAttribute("untitled");
     this._isHeaderVisible = true;
   },
   /**
    * Hides the scope's title header.
    * This action will automatically expand the scope.
    */
   hideHeader: function() {
     if (!this._isHeaderVisible) {
       return;
     }
     this.expand();
     this._target.setAttribute("untitled", "");
     this._isHeaderVisible = false;
   },
   /**
    * Shows the scope's expand/collapse arrow.
    */
   showArrow: function() {
     if (this._isArrowVisible) {
       return;
     }
     this._arrow.removeAttribute("invisible");
     this._isArrowVisible = true;
   },
   /**
    * Hides the scope's expand/collapse arrow.
    */
   hideArrow: function() {
     if (!this._isArrowVisible) {
       return;
     }
     this._arrow.setAttribute("invisible", "");
     this._isArrowVisible = false;
   },
   /**
    * Gets the visibility state.
    * @return boolean
    */
   get visible() this._isContentVisible,
   /**
    * Gets the expanded state.
    * @return boolean
    */
   get expanded() this._isExpanded,
   /**
    * Gets the header visibility state.
    * @return boolean
    */
   get header() this._isHeaderVisible,
   /**
    * Gets the twisty visibility state.
    * @return boolean
    */
   get twisty() this._isArrowVisible,
   /**
    * Gets the expand lock state.
    * @return boolean
    */
   get locked() this._isLocked,
   /**
    * Sets the visibility state.
    * @param boolean aFlag
    */
   set visible(aFlag) aFlag ? this.show() : this.hide(),
   /**
    * Sets the expanded state.
    * @param boolean aFlag
    */
   set expanded(aFlag) aFlag ? this.expand() : this.collapse(),
   /**
    * Sets the header visibility state.
    * @param boolean aFlag
    */
   set header(aFlag) aFlag ? this.showHeader() : this.hideHeader(),
   /**
    * Sets the twisty visibility state.
    * @param boolean aFlag
    */
   set twisty(aFlag) aFlag ? this.showArrow() : this.hideArrow(),
   /**
    * Sets the expand lock state.
    * @param boolean aFlag
    */
   set locked(aFlag) this._isLocked = aFlag,
   /**
    * Specifies if this target node may be focused.
    * @return boolean
    */
   get focusable() {
     // Check if this target node is actually visibile.
     if (!this._nameString ||
         !this._isContentVisible ||
         !this._isHeaderVisible ||
         !this._isMatch) {
       return false;
     }
     // Check if all parent objects are expanded.
     let item = this;
     // Recurse while parent is a Scope, Variable, or Property
     while ((item = item.ownerView) && item instanceof Scope) {
       if (!item._isExpanded) {
         return false;
       }
     }
     return true;
   },
   /**
    * Focus this scope.
    */
   focus: function() {
     this._variablesView._focusItem(this);
   },
   /**
    * Adds an event listener for a certain event on this scope's title.
    * @param string aName
    * @param function aCallback
    * @param boolean aCapture
    */
   addEventListener: function(aName, aCallback, aCapture) {
     this._title.addEventListener(aName, aCallback, aCapture);
   },
   /**
    * Removes an event listener for a certain event on this scope's title.
    * @param string aName
    * @param function aCallback
    * @param boolean aCapture
    */
   removeEventListener: function(aName, aCallback, aCapture) {
     this._title.removeEventListener(aName, aCallback, aCapture);
   },
   /**
    * Gets the id associated with this item.
    * @return string
    */
   get id() this._idString,
   /**
    * Gets the name associated with this item.
    * @return string
    */
   get name() this._nameString,
   /**
    * Gets the displayed value for this item.
    * @return string
    */
   get displayValue() this._valueString,
   /**
    * Gets the class names used for the displayed value.
    * @return string
    */
   get displayValueClassName() this._valueClassName,
   /**
    * Gets the element associated with this item.
    * @return nsIDOMNode
    */
   get target() this._target,
   /**
    * Initializes this scope's id, view and binds event listeners.
    *
    * @param string aName
    *        The scope's name.
    * @param object aFlags [optional]
    *        Additional options or flags for this scope.
    */
   _init: function(aName, aFlags) {
     this._idString = generateId(this._nameString = aName);
     this._displayScope(aName, this.targetClassName, "devtools-toolbar");
     this._addEventListeners();
     this.parentNode.appendChild(this._target);
   },
   /**
    * Creates the necessary nodes for this scope.
    *
    * @param string aName
    *        The scope's name.
    * @param string aTargetClassName
    *        A custom class name for this scope's target element.
    * @param string aTitleClassName [optional]
    *        A custom class name for this scope's title element.
    */
   _displayScope: function(aName, aTargetClassName, aTitleClassName = "") {
     let document = this.document;
     let element = this._target = document.createElement("vbox");
     element.id = this._idString;
     element.className = aTargetClassName;
     let arrow = this._arrow = document.createElement("hbox");
     arrow.className = "arrow";
     let name = this._name = document.createElement("label");
     name.className = "plain name";
     name.setAttribute("value", aName);
     let title = this._title = document.createElement("hbox");
     title.className = "title " + aTitleClassName;
     title.setAttribute("align", "center");
     let enumerable = this._enum = document.createElement("vbox");
     let nonenum = this._nonenum = document.createElement("vbox");
     enumerable.className = "variables-view-element-details enum";
     nonenum.className = "variables-view-element-details nonenum";
     title.appendChild(arrow);
     title.appendChild(name);
     element.appendChild(title);
     element.appendChild(enumerable);
     element.appendChild(nonenum);
   },
   /**
    * Adds the necessary event listeners for this scope.
    */
   _addEventListeners: function() {
     this._title.addEventListener("mousedown", this._onClick, false);
   },
   /**
    * The click listener for this scope's title.
    */
   _onClick: function(e) {
     if (this.editing ||
         e.button != 0 ||
         e.target == this._editNode ||
         e.target == this._deleteNode ||
         e.target == this._addPropertyNode) {
       return;
     }
     this.toggle();
     this.focus();
   },
   /**
    * Opens the enumerable items container.
    */
   _openEnum: function() {
     this._arrow.setAttribute("open", "");
     this._enum.setAttribute("open", "");
   },
   /**
    * Opens the non-enumerable items container.
    */
   _openNonEnum: function() {
     this._nonenum.setAttribute("open", "");
   },
   /**
    * Specifies if enumerable properties and variables should be displayed.
    * @param boolean aFlag
    */
   set _enumVisible(aFlag) {
     for (let [, variable] of this._store) {
       variable._enumVisible = aFlag;
       if (!this._isExpanded) {
         continue;
       }
       if (aFlag) {
         this._enum.setAttribute("open", "");
       } else {
         this._enum.removeAttribute("open");
       }
     }
   },
   /**
    * Specifies if non-enumerable properties and variables should be displayed.
    * @param boolean aFlag
    */
   set _nonEnumVisible(aFlag) {
     for (let [, variable] of this._store) {
       variable._nonEnumVisible = aFlag;
       if (!this._isExpanded) {
         continue;
       }
       if (aFlag) {
         this._nonenum.setAttribute("open", "");
       } else {
         this._nonenum.removeAttribute("open");
       }
     }
   },
   /**
    * Performs a case insensitive search for variables or properties matching
    * the query, and hides non-matched items.
    *
    * @param string aLowerCaseQuery
    *        The lowercased name of the variable or property to search for.
    */
   _performSearch: function(aLowerCaseQuery) {
     for (let [, variable] of this._store) {
       let currentObject = variable;
       let lowerCaseName = variable._nameString.toLowerCase();
       let lowerCaseValue = variable._valueString.toLowerCase();
       // Non-matched variables or properties require a corresponding attribute.
       if (!lowerCaseName.contains(aLowerCaseQuery) &&
           !lowerCaseValue.contains(aLowerCaseQuery)) {
         variable._matched = false;
       }
       // Variable or property is matched.
       else {
         variable._matched = true;
         // If the variable was ever expanded, there's a possibility it may
         // contain some matched properties, so make sure they're visible
         // ("expand downwards").
         if (variable._store.size) {
           variable.expand();
         }
         // If the variable is contained in another Scope, Variable, or Property,
         // the parent may not be a match, thus hidden. It should be visible
         // ("expand upwards").
         while ((variable = variable.ownerView) && variable instanceof Scope) {
           variable._matched = true;
           variable.expand();
         }
       }
       // Proceed with the search recursively inside this variable or property.
       if (currentObject._store.size || currentObject.getter || currentObject.setter) {
         currentObject._performSearch(aLowerCaseQuery);
       }
     }
   },
   /**
    * Sets if this object instance is a matched or non-matched item.
    * @param boolean aStatus
    */
   set _matched(aStatus) {
     if (this._isMatch == aStatus) {
       return;
     }
     if (aStatus) {
       this._isMatch = true;
       this.target.removeAttribute("unmatched");
     } else {
       this._isMatch = false;
       this.target.setAttribute("unmatched", "");
     }
   },
   /**
    * Find the first item in the tree of visible items in this item that matches
    * the predicate. Searches in visual order (the order seen by the user).
    * Tests itself, then descends into first the enumerable children and then
    * the non-enumerable children (since they are presented in separate groups).
    *
    * @param function aPredicate
    *        A function that returns true when a match is found.
    * @return Scope | Variable | Property
    *         The first visible scope, variable or property, or null if nothing
    *         is found.
    */
   _findInVisibleItems: function(aPredicate) {
     if (aPredicate(this)) {
       return this;
     }
     if (this._isExpanded) {
       if (this._variablesView._enumVisible) {
         for (let item of this._enumItems) {
           let result = item._findInVisibleItems(aPredicate);
           if (result) {
             return result;
           }
         }
       }
       if (this._variablesView._nonEnumVisible) {
         for (let item of this._nonEnumItems) {
           let result = item._findInVisibleItems(aPredicate);
           if (result) {
             return result;
           }
         }
       }
     }
     return null;
   },
   /**
    * Find the last item in the tree of visible items in this item that matches
    * the predicate. Searches in reverse visual order (opposite of the order
    * seen by the user). Descends into first the non-enumerable children, then
    * the enumerable children (since they are presented in separate groups), and
    * finally tests itself.
    *
    * @param function aPredicate
    *        A function that returns true when a match is found.
    * @return Scope | Variable | Property
    *         The last visible scope, variable or property, or null if nothing
    *         is found.
    */
   _findInVisibleItemsReverse: function(aPredicate) {
     if (this._isExpanded) {
       if (this._variablesView._nonEnumVisible) {
         for (let i = this._nonEnumItems.length - 1; i >= 0; i--) {
           let item = this._nonEnumItems[i];
           let result = item._findInVisibleItemsReverse(aPredicate);
           if (result) {
             return result;
           }
         }
       }
       if (this._variablesView._enumVisible) {
         for (let i = this._enumItems.length - 1; i >= 0; i--) {
           let item = this._enumItems[i];
           let result = item._findInVisibleItemsReverse(aPredicate);
           if (result) {
             return result;
           }
         }
       }
     }
     if (aPredicate(this)) {
       return this;
     }
     return null;
   },
   /**
    * Gets top level variables view instance.
    * @return VariablesView
    */
   get _variablesView() this._topView || (this._topView = (function(self) {
     let parentView = self.ownerView;
     let topView;
     while (topView = parentView.ownerView) {
       parentView = topView;
     }
     return parentView;
   })(this)),
   /**
    * Gets the parent node holding this scope.
    * @return nsIDOMNode
    */
   get parentNode() this.ownerView._list,
   /**
    * Gets the owner document holding this scope.
    * @return nsIHTMLDocument
    */
   get document() this._document || (this._document = this.ownerView.document),
   /**
    * Gets the default window holding this scope.
    * @return nsIDOMWindow
    */
   get window() this._window || (this._window = this.ownerView.window),
   _topView: null,
   _document: null,
   _window: null,
   ownerView: null,
   eval: null,
   switch: null,
   delete: null,
   new: null,
   preventDisableOnChange: false,
   preventDescriptorModifiers: false,
   editing: false,
   editableNameTooltip: "",
   editableValueTooltip: "",
   editButtonTooltip: "",
   deleteButtonTooltip: "",
   domNodeValueTooltip: "",
   contextMenuId: "",
   separatorStr: "",
   _store: null,
   _enumItems: null,
   _nonEnumItems: null,
   _fetched: false,
   _committed: false,
   _isLocked: false,
   _isExpanded: false,
   _isContentVisible: true,
   _isHeaderVisible: true,
   _isArrowVisible: true,
   _isMatch: true,
   _idString: "",
   _nameString: "",
   _target: null,
   _arrow: null,
   _name: null,
   _title: null,
   _enum: null,
   _nonenum: null,
 };
 // Creating maps and arrays thousands of times for variables or properties
 // with a large number of children fills up a lot of memory. Make sure
 // these are instantiated only if needed.
 DevToolsUtils.defineLazyPrototypeGetter(Scope.prototype, "_store", Map);
 DevToolsUtils.defineLazyPrototypeGetter(Scope.prototype, "_enumItems", Array);
 DevToolsUtils.defineLazyPrototypeGetter(Scope.prototype, "_nonEnumItems", Array);
 // An ellipsis symbol (usually "…") used for localization.
 XPCOMUtils.defineLazyGetter(Scope, "ellipsis", () =>
   Services.prefs.getComplexValue("intl.ellipsis", Ci.nsIPrefLocalizedString).data);
 /**
  * A Variable is a Scope holding Property instances.
  * Iterable via "for (let [name, property] of instance) { }".
  *
  * @param Scope aScope
  *        The scope to contain this variable.
  * @param string aName
  *        The variable's name.
  * @param object aDescriptor
  *        The variable's descriptor.
  */
 function Variable(aScope, aName, aDescriptor) {
   this._setTooltips = this._setTooltips.bind(this);
   this._activateNameInput = this._activateNameInput.bind(this);
   this._activateValueInput = this._activateValueInput.bind(this);
   this.openNodeInInspector = this.openNodeInInspector.bind(this);
   this.highlightDomNode = this.highlightDomNode.bind(this);
   this.unhighlightDomNode = this.unhighlightDomNode.bind(this);
   // Treat safe getter descriptors as descriptors with a value.
   if ("getterValue" in aDescriptor) {
     aDescriptor.value = aDescriptor.getterValue;
     delete aDescriptor.get;
     delete aDescriptor.set;
   }
   Scope.call(this, aScope, aName, this._initialDescriptor = aDescriptor);
   this.setGrip(aDescriptor.value);
   this._symbolicName = aName;
   this._absoluteName = aScope.name + "[\"" + aName + "\"]";
 }
 Variable.prototype = Heritage.extend(Scope.prototype, {
   /**
    * Whether this Variable should be prefetched when it is remoted.
    */
   get shouldPrefetch() {
     return this.name == "window" || this.name == "this";
   },
   /**
    * Whether this Variable should paginate its contents.
    */
   get allowPaginate() {
     return this.name != "window" && this.name != "this";
   },
   /**
    * The class name applied to this variable's target element.
    */
   targetClassName: "variables-view-variable variable-or-property",
   /**
    * Create a new Property that is a child of Variable.
    *
    * @param string aName
    *        The name of the new Property.
    * @param object aDescriptor
    *        The property's descriptor.
    * @return Property
    *         The newly created child Property.
    */
   _createChild: function(aName, aDescriptor) {
     return new Property(this, aName, aDescriptor);
   },
   /**
    * Remove this Variable from its parent and remove all children recursively.
    */
   remove: function() {
     if (this._linkedToInspector) {
       this.unhighlightDomNode();
       this._valueLabel.removeEventListener("mouseover", this.highlightDomNode, false);
       this._valueLabel.removeEventListener("mouseout", this.unhighlightDomNode, false);
       this._openInspectorNode.removeEventListener("mousedown", this.openNodeInInspector, false);
     }
     this.ownerView._store.delete(this._nameString);
     this._variablesView._itemsByElement.delete(this._target);
     this._variablesView._currHierarchy.delete(this._absoluteName);
     this._target.remove();
     for (let property of this._store.values()) {
       property.remove();
     }
   },
   /**
    * Populates this variable to contain all the properties of an object.
    *
    * @param object aObject
    *        The raw object you want to display.
    * @param object aOptions [optional]
    *        Additional options for adding the properties. Supported options:
    *        - sorted: true to sort all the properties before adding them
    *        - expanded: true to expand all the properties after adding them
    */
   populate: function(aObject, aOptions = {}) {
     // Retrieve the properties only once.
     if (this._fetched) {
       return;
     }
     this._fetched = true;
     let propertyNames = Object.getOwnPropertyNames(aObject);
     let prototype = Object.getPrototypeOf(aObject);
     // Sort all of the properties before adding them, if preferred.
     if (aOptions.sorted) {
       propertyNames.sort();
     }
     // Add all the variable properties.
     for (let name of propertyNames) {
       let descriptor = Object.getOwnPropertyDescriptor(aObject, name);
       if (descriptor.get || descriptor.set) {
         let prop = this._addRawNonValueProperty(name, descriptor);
         if (aOptions.expanded) {
           prop.expanded = true;
         }
       } else {
         let prop = this._addRawValueProperty(name, descriptor, aObject[name]);
         if (aOptions.expanded) {
           prop.expanded = true;
         }
       }
     }
     // Add the variable's __proto__.
     if (prototype) {
       this._addRawValueProperty("__proto__", {}, prototype);
     }
   },
   /**
    * Populates a specific variable or property instance to contain all the
    * properties of an object
    *
    * @param Variable | Property aVar
    *        The target variable to populate.
    * @param object aObject [optional]
    *        The raw object you want to display. If unspecified, the object is
    *        assumed to be defined in a _sourceValue property on the target.
    */
   _populateTarget: function(aVar, aObject = aVar._sourceValue) {
     aVar.populate(aObject);
   },
   /**
    * Adds a property for this variable based on a raw value descriptor.
    *
    * @param string aName
    *        The property's name.
    * @param object aDescriptor
    *        Specifies the exact property descriptor as returned by a call to
    *        Object.getOwnPropertyDescriptor.
    * @param object aValue
    *        The raw property value you want to display.
    * @return Property
    *         The newly added property instance.
    */
   _addRawValueProperty: function(aName, aDescriptor, aValue) {
     let descriptor = Object.create(aDescriptor);
     descriptor.value = VariablesView.getGrip(aValue);
     let propertyItem = this.addItem(aName, descriptor);
     propertyItem._sourceValue = aValue;
     // Add an 'onexpand' callback for the property, lazily handling
     // the addition of new child properties.
     if (!VariablesView.isPrimitive(descriptor)) {
       propertyItem.onexpand = this._populateTarget;
     }
     return propertyItem;
   },
   /**
    * Adds a property for this variable based on a getter/setter descriptor.
    *
    * @param string aName
    *        The property's name.
    * @param object aDescriptor
    *        Specifies the exact property descriptor as returned by a call to
    *        Object.getOwnPropertyDescriptor.
    * @return Property
    *         The newly added property instance.
    */
   _addRawNonValueProperty: function(aName, aDescriptor) {
     let descriptor = Object.create(aDescriptor);
     descriptor.get = VariablesView.getGrip(aDescriptor.get);
     descriptor.set = VariablesView.getGrip(aDescriptor.set);
     return this.addItem(aName, descriptor);
   },
   /**
    * Gets this variable's path to the topmost scope in the form of a string
    * meant for use via eval() or a similar approach.
    * For example, a symbolic name may look like "arguments['0']['foo']['bar']".
    * @return string
    */
   get symbolicName() this._symbolicName,
   /**
    * Gets this variable's symbolic path to the topmost scope.
    * @return array
    * @see Variable._buildSymbolicPath
    */
   get symbolicPath() {
     if (this._symbolicPath) {
       return this._symbolicPath;
     }
     this._symbolicPath = this._buildSymbolicPath();
     return this._symbolicPath;
   },
   /**
    * Build this variable's path to the topmost scope in form of an array of
    * strings, one for each segment of the path.
    * For example, a symbolic path may look like ["0", "foo", "bar"].
    * @return array
    */
   _buildSymbolicPath: function(path = []) {
     if (this.name) {
       path.unshift(this.name);
       if (this.ownerView instanceof Variable) {
         return this.ownerView._buildSymbolicPath(path);
       }
     }
     return path;
   },
   /**
    * Returns this variable's value from the descriptor if available.
    * @return any
    */
   get value() this._initialDescriptor.value,
   /**
    * Returns this variable's getter from the descriptor if available.
    * @return object
    */
   get getter() this._initialDescriptor.get,
   /**
    * Returns this variable's getter from the descriptor if available.
    * @return object
    */
   get setter() this._initialDescriptor.set,
   /**
    * Sets the specific grip for this variable (applies the text content and
    * class name to the value label).
    *
    * The grip should contain the value or the type & class, as defined in the
    * remote debugger protocol. For convenience, undefined and null are
    * both considered types.
    *
    * @param any aGrip
    *        Specifies the value and/or type & class of the variable.
    *        e.g. - 42
    *             - true
    *             - "nasu"
    *             - { type: "undefined" }
    *             - { type: "null" }
    *             - { type: "object", class: "Object" }
    */
   setGrip: function(aGrip) {
     // Don't allow displaying grip information if there's no name available
     // or the grip is malformed.
     if (!this._nameString || aGrip === undefined || aGrip === null) {
       return;
     }
     // Getters and setters should display grip information in sub-properties.
     if (this.getter || this.setter) {
       return;
     }
     let prevGrip = this._valueGrip;
     if (prevGrip) {
       this._valueLabel.classList.remove(VariablesView.getClass(prevGrip));
     }
     this._valueGrip = aGrip;
     this._valueString = VariablesView.getString(aGrip, {
       concise: true,
       noEllipsis: true,
     });
     this._valueClassName = VariablesView.getClass(aGrip);
     this._valueLabel.classList.add(this._valueClassName);
     this._valueLabel.setAttribute("value", this._valueString);
     this._separatorLabel.hidden = false;
     // DOMNodes get special treatment since they can be linked to the inspector
     if (this._valueGrip.preview && this._valueGrip.preview.kind === "DOMNode") {
       this._linkToInspector();
     }
   },
   /**
    * Marks this variable as overridden.
    *
    * @param boolean aFlag
    *        Whether this variable is overridden or not.
    */
   setOverridden: function(aFlag) {
     if (aFlag) {
       this._target.setAttribute("overridden", "");
     } else {
       this._target.removeAttribute("overridden");
     }
   },
   /**
    * Briefly flashes this variable.
    *
    * @param number aDuration [optional]
    *        An optional flash animation duration.
    */
   flash: function(aDuration = ITEM_FLASH_DURATION) {
     let fadeInDelay = this._variablesView.lazyEmptyDelay + 1;
     let fadeOutDelay = fadeInDelay + aDuration;
     setNamedTimeout("vview-flash-in" + this._absoluteName,
       fadeInDelay, () => this._target.setAttribute("changed", ""));
     setNamedTimeout("vview-flash-out" + this._absoluteName,
       fadeOutDelay, () => this._target.removeAttribute("changed"));
   },
   /**
    * Initializes this variable's id, view and binds event listeners.
    *
    * @param string aName
    *        The variable's name.
    * @param object aDescriptor
    *        The variable's descriptor.
    */
   _init: function(aName, aDescriptor) {
     this._idString = generateId(this._nameString = aName);
     this._displayScope(aName, this.targetClassName);
     this._displayVariable();
     this._customizeVariable();
     this._prepareTooltips();
     this._setAttributes();
     this._addEventListeners();
     if (this._initialDescriptor.enumerable ||
         this._nameString == "this" ||
         this._nameString == "<return>" ||
         this._nameString == "<exception>") {
       this.ownerView._enum.appendChild(this._target);
       this.ownerView._enumItems.push(this);
     } else {
       this.ownerView._nonenum.appendChild(this._target);
       this.ownerView._nonEnumItems.push(this);
     }
   },
   /**
    * Creates the necessary nodes for this variable.
    */
   _displayVariable: function() {
     let document = this.document;
     let descriptor = this._initialDescriptor;
     let separatorLabel = this._separatorLabel = document.createElement("label");
     separatorLabel.className = "plain separator";
     separatorLabel.setAttribute("value", this.separatorStr + " ");
     let valueLabel = this._valueLabel = document.createElement("label");
     valueLabel.className = "plain value";
     valueLabel.setAttribute("flex", "1");
     valueLabel.setAttribute("crop", "center");
     this._title.appendChild(separatorLabel);
     this._title.appendChild(valueLabel);
     if (VariablesView.isPrimitive(descriptor)) {
       this.hideArrow();
     }
     // If no value will be displayed, we don't need the separator.
     if (!descriptor.get && !descriptor.set && !("value" in descriptor)) {
       separatorLabel.hidden = true;
     }
     // If this is a getter/setter property, create two child pseudo-properties
     // called "get" and "set" that display the corresponding functions.
     if (descriptor.get || descriptor.set) {
       separatorLabel.hidden = true;
       valueLabel.hidden = true;
       // Changing getter/setter names is never allowed.
       this.switch = null;
       // Getter/setter properties require special handling when it comes to
       // evaluation and deletion.
       if (this.ownerView.eval) {
         this.delete = VariablesView.getterOrSetterDeleteCallback;
         this.evaluationMacro = VariablesView.overrideValueEvalMacro;
       }
       // Deleting getters and setters individually is not allowed if no
       // evaluation method is provided.
       else {
         this.delete = null;
         this.evaluationMacro = null;
       }
       let getter = this.addItem("get", { value: descriptor.get });
       let setter = this.addItem("set", { value: descriptor.set });
       getter.evaluationMacro = VariablesView.getterOrSetterEvalMacro;
       setter.evaluationMacro = VariablesView.getterOrSetterEvalMacro;
       getter.hideArrow();
       setter.hideArrow();
       this.expand();
     }
   },
   /**
    * Adds specific nodes for this variable based on custom flags.
    */
   _customizeVariable: function() {
     let ownerView = this.ownerView;
     let descriptor = this._initialDescriptor;
     if (ownerView.eval && this.getter || this.setter) {
       let editNode = this._editNode = this.document.createElement("toolbarbutton");
       editNode.className = "plain variables-view-edit";
       editNode.addEventListener("mousedown", this._onEdit.bind(this), false);
       this._title.insertBefore(editNode, this._spacer);
     }
     if (ownerView.delete) {
       let deleteNode = this._deleteNode = this.document.createElement("toolbarbutton");
       deleteNode.className = "plain variables-view-delete";
       deleteNode.addEventListener("click", this._onDelete.bind(this), false);
       this._title.appendChild(deleteNode);
     }
     if (ownerView.new) {
       let addPropertyNode = this._addPropertyNode = this.document.createElement("toolbarbutton");
       addPropertyNode.className = "plain variables-view-add-property";
       addPropertyNode.addEventListener("mousedown", this._onAddProperty.bind(this), false);
       this._title.appendChild(addPropertyNode);
       // Can't add properties to primitive values, hide the node in those cases.
       if (VariablesView.isPrimitive(descriptor)) {
         addPropertyNode.setAttribute("invisible", "");
       }
     }
     if (ownerView.contextMenuId) {
       this._title.setAttribute("context", ownerView.contextMenuId);
     }
     if (ownerView.preventDescriptorModifiers) {
       return;
     }
     if (!descriptor.writable && !ownerView.getter && !ownerView.setter) {
       let nonWritableIcon = this.document.createElement("hbox");
       nonWritableIcon.className = "plain variable-or-property-non-writable-icon";
       nonWritableIcon.setAttribute("optional-visibility", "");
       this._title.appendChild(nonWritableIcon);
     }
     if (descriptor.value && typeof descriptor.value == "object") {
       if (descriptor.value.frozen) {
         let frozenLabel = this.document.createElement("label");
         frozenLabel.className = "plain variable-or-property-frozen-label";
         frozenLabel.setAttribute("optional-visibility", "");
         frozenLabel.setAttribute("value", "F");
         this._title.appendChild(frozenLabel);
       }
       if (descriptor.value.sealed) {
         let sealedLabel = this.document.createElement("label");
         sealedLabel.className = "plain variable-or-property-sealed-label";
         sealedLabel.setAttribute("optional-visibility", "");
         sealedLabel.setAttribute("value", "S");
         this._title.appendChild(sealedLabel);
       }
       if (!descriptor.value.extensible) {
         let nonExtensibleLabel = this.document.createElement("label");
         nonExtensibleLabel.className = "plain variable-or-property-non-extensible-label";
         nonExtensibleLabel.setAttribute("optional-visibility", "");
         nonExtensibleLabel.setAttribute("value", "N");
         this._title.appendChild(nonExtensibleLabel);
       }
     }
   },
   /**
    * Prepares all tooltips for this variable.
    */
   _prepareTooltips: function() {
     this._target.addEventListener("mouseover", this._setTooltips, false);
   },
   /**
    * Sets all tooltips for this variable.
    */
   _setTooltips: function() {
     this._target.removeEventListener("mouseover", this._setTooltips, false);
     let ownerView = this.ownerView;
     if (ownerView.preventDescriptorModifiers) {
       return;
     }
     let tooltip = this.document.createElement("tooltip");
     tooltip.id = "tooltip-" + this._idString;
     tooltip.setAttribute("orient", "horizontal");
     let labels = [
       "configurable", "enumerable", "writable",
       "frozen", "sealed", "extensible", "overridden", "WebIDL"];
     for (let type of labels) {
       let labelElement = this.document.createElement("label");
       labelElement.className = type;
       labelElement.setAttribute("value", STR.GetStringFromName(type + "Tooltip"));
       tooltip.appendChild(labelElement);
     }
     this._target.appendChild(tooltip);
     this._target.setAttribute("tooltip", tooltip.id);
     if (this._editNode && ownerView.eval) {
       this._editNode.setAttribute("tooltiptext", ownerView.editButtonTooltip);
     }
     if (this._openInspectorNode && this._linkedToInspector) {
       this._openInspectorNode.setAttribute("tooltiptext", this.ownerView.domNodeValueTooltip);
     }
     if (this._valueLabel && ownerView.eval) {
       this._valueLabel.setAttribute("tooltiptext", ownerView.editableValueTooltip);
     }
     if (this._name && ownerView.switch) {
       this._name.setAttribute("tooltiptext", ownerView.editableNameTooltip);
     }
     if (this._deleteNode && ownerView.delete) {
       this._deleteNode.setAttribute("tooltiptext", ownerView.deleteButtonTooltip);
     }
   },
   /**
    * Get the parent variablesview toolbox, if any.
    */
   get toolbox() {
     return this._variablesView.toolbox;
   },
   /**
    * Checks if this variable is a DOMNode and is part of a variablesview that
    * has been linked to the toolbox, so that highlighting and jumping to the
    * inspector can be done.
    */
   _isLinkableToInspector: function() {
     let isDomNode = this._valueGrip && this._valueGrip.preview.kind === "DOMNode";
     let hasBeenLinked = this._linkedToInspector;
     let hasToolbox = !!this.toolbox;
     return isDomNode && !hasBeenLinked && hasToolbox;
   },
   /**
    * If the variable is a DOMNode, and if a toolbox is set, then link it to the
    * inspector (highlight on hover, and jump to markup-view on click)
    */
   _linkToInspector: function() {
     if (!this._isLinkableToInspector()) {
       return;
     }
     // Listen to value mouseover/click events to highlight and jump
     this._valueLabel.addEventListener("mouseover", this.highlightDomNode, false);
     this._valueLabel.addEventListener("mouseout", this.unhighlightDomNode, false);
     // Add a button to open the node in the inspector
     this._openInspectorNode = this.document.createElement("toolbarbutton");
     this._openInspectorNode.className = "plain variables-view-open-inspector";
     this._openInspectorNode.addEventListener("mousedown", this.openNodeInInspector, false);
     this._title.insertBefore(this._openInspectorNode, this._title.querySelector("toolbarbutton"));
     this._linkedToInspector = true;
   },
   /**
    * In case this variable is a DOMNode and part of a variablesview that has been
    * linked to the toolbox's inspector, then select the corresponding node in
    * the inspector, and switch the inspector tool in the toolbox
    * @return a promise that resolves when the node is selected and the inspector
    * has been switched to and is ready
    */
   openNodeInInspector: function(event) {
     if (!this.toolbox) {
       return promise.reject(new Error("Toolbox not available"));
     }
     event && event.stopPropagation();
     return Task.spawn(function*() {
       yield this.toolbox.initInspector();
       let nodeFront = this._nodeFront;
       if (!nodeFront) {
         nodeFront = yield this.toolbox.walker.getNodeActorFromObjectActor(this._valueGrip.actor);
       }
       if (nodeFront) {
         yield this.toolbox.selectTool("inspector");
         let inspectorReady = promise.defer();
         this.toolbox.getPanel("inspector").once("inspector-updated", inspectorReady.resolve);
         yield this.toolbox.selection.setNodeFront(nodeFront, "variables-view");
         yield inspectorReady.promise;
       }
     }.bind(this));
   },
   /**
    * In case this variable is a DOMNode and part of a variablesview that has been
    * linked to the toolbox's inspector, then highlight the corresponding node
    */
   highlightDomNode: function() {
     if (this.toolbox) {
       if (this._nodeFront) {
         // If the nodeFront has been retrieved before, no need to ask the server
         // again for it
         this.toolbox.highlighterUtils.highlightNodeFront(this._nodeFront);
         return;
       }
       this.toolbox.highlighterUtils.highlightDomValueGrip(this._valueGrip).then(front => {
         this._nodeFront = front;
       });
     }
   },
   /**
    * Unhighlight a previously highlit node
    * @see highlightDomNode
    */
   unhighlightDomNode: function() {
     if (this.toolbox) {
       this.toolbox.highlighterUtils.unhighlight();
     }
   },
   /**
    * Sets a variable's configurable, enumerable and writable attributes,
    * and specifies if it's a 'this', '<exception>', '<return>' or '__proto__'
    * reference.
    */
   _setAttributes: function() {
     let ownerView = this.ownerView;
     if (ownerView.preventDescriptorModifiers) {
       return;
     }
     let descriptor = this._initialDescriptor;
     let target = this._target;
     let name = this._nameString;
     if (ownerView.eval) {
       target.setAttribute("editable", "");
     }
     if (!descriptor.configurable) {
       target.setAttribute("non-configurable", "");
     }
     if (!descriptor.enumerable) {
       target.setAttribute("non-enumerable", "");
     }
     if (!descriptor.writable && !ownerView.getter && !ownerView.setter) {
       target.setAttribute("non-writable", "");
     }
     if (descriptor.value && typeof descriptor.value == "object") {
       if (descriptor.value.frozen) {
         target.setAttribute("frozen", "");
       }
       if (descriptor.value.sealed) {
         target.setAttribute("sealed", "");
       }
       if (!descriptor.value.extensible) {
         target.setAttribute("non-extensible", "");
       }
     }
     if (descriptor && "getterValue" in descriptor) {
       target.setAttribute("safe-getter", "");
     }
     if (name == "this") {
       target.setAttribute("self", "");
     }
     else if (name == "<exception>") {
       target.setAttribute("exception", "");
       target.setAttribute("pseudo-item", "");
     }
     else if (name == "<return>") {
       target.setAttribute("return", "");
       target.setAttribute("pseudo-item", "");
     }
     else if (name == "__proto__") {
       target.setAttribute("proto", "");
       target.setAttribute("pseudo-item", "");
     }
     if (Object.keys(descriptor).length == 0) {
       target.setAttribute("pseudo-item", "");
     }
   },
   /**
    * Adds the necessary event listeners for this variable.
    */
   _addEventListeners: function() {
     this._name.addEventListener("dblclick", this._activateNameInput, false);
     this._valueLabel.addEventListener("mousedown", this._activateValueInput, false);
     this._title.addEventListener("mousedown", this._onClick, false);
   },
   /**
    * Makes this variable's name editable.
    */
   _activateNameInput: function(e) {
     if (!this._variablesView.alignedValues) {
       this._separatorLabel.hidden = true;
       this._valueLabel.hidden = true;
     }
     EditableName.create(this, {
       onSave: aKey => {
         if (!this._variablesView.preventDisableOnChange) {
           this._disable();
         }
         this.ownerView.switch(this, aKey);
       },
       onCleanup: () => {
         if (!this._variablesView.alignedValues) {
           this._separatorLabel.hidden = false;
           this._valueLabel.hidden = false;
         }
       }
     }, e);
   },
   /**
    * Makes this variable's value editable.
    */
   _activateValueInput: function(e) {
     EditableValue.create(this, {
       onSave: aString => {
         if (this._linkedToInspector) {
           this.unhighlightDomNode();
         }
         if (!this._variablesView.preventDisableOnChange) {
           this._disable();
         }
         this.ownerView.eval(this, aString);
       }
     }, e);
   },
   /**
    * Disables this variable prior to a new name switch or value evaluation.
    */
   _disable: function() {
     // Prevent the variable from being collapsed or expanded.
     this.hideArrow();
     // Hide any nodes that may offer information about the variable.
     for (let node of this._title.childNodes) {
       node.hidden = node != this._arrow && node != this._name;
     }
     this._enum.hidden = true;
     this._nonenum.hidden = true;
   },
   /**
    * The current macro used to generate the string evaluated when performing
    * a variable or property value change.
    */
   evaluationMacro: VariablesView.simpleValueEvalMacro,
   /**
    * The click listener for the edit button.
    */
   _onEdit: function(e) {
     if (e.button != 0) {
       return;
     }
     e.preventDefault();
     e.stopPropagation();
     this._activateValueInput();
   },
   /**
    * The click listener for the delete button.
    */
   _onDelete: function(e) {
     if ("button" in e && e.button != 0) {
       return;
     }
     e.preventDefault();
     e.stopPropagation();
     if (this.ownerView.delete) {
       if (!this.ownerView.delete(this)) {
         this.hide();
       }
     }
   },
   /**
    * The click listener for the add property button.
    */
   _onAddProperty: function(e) {
     if ("button" in e && e.button != 0) {
       return;
     }
     e.preventDefault();
     e.stopPropagation();
     this.expanded = true;
     let item = this.addItem(" ", {
       value: undefined,
       configurable: true,
       enumerable: true,
       writable: true
     }, true);
     // Force showing the separator.
     item._separatorLabel.hidden = false;
     EditableNameAndValue.create(item, {
       onSave: ([aKey, aValue]) => {
         if (!this._variablesView.preventDisableOnChange) {
           this._disable();
         }
         this.ownerView.new(this, aKey, aValue);
       }
     }, e);
   },
   _symbolicName: "",
   _symbolicPath: null,
   _absoluteName: "",
   _initialDescriptor: null,
   _separatorLabel: null,
   _valueLabel: null,
   _spacer: null,
   _editNode: null,
   _deleteNode: null,
   _addPropertyNode: null,
   _tooltip: null,
   _valueGrip: null,
   _valueString: "",
   _valueClassName: "",
   _prevExpandable: false,
   _prevExpanded: false
 });
 /**
  * A Property is a Variable holding additional child Property instances.
  * Iterable via "for (let [name, property] of instance) { }".
  *
  * @param Variable aVar
  *        The variable to contain this property.
  * @param string aName
  *        The property's name.
  * @param object aDescriptor
  *        The property's descriptor.
  */
 function Property(aVar, aName, aDescriptor) {
   Variable.call(this, aVar, aName, aDescriptor);
   this._symbolicName = aVar._symbolicName + "[\"" + aName + "\"]";
   this._absoluteName = aVar._absoluteName + "[\"" + aName + "\"]";
 }
 Property.prototype = Heritage.extend(Variable.prototype, {
   /**
    * The class name applied to this property's target element.
    */
   targetClassName: "variables-view-property variable-or-property"
 });
 /**
  * A generator-iterator over the VariablesView, Scopes, Variables and Properties.
  */
 VariablesView.prototype["@@iterator"] =
 Scope.prototype["@@iterator"] =
 Variable.prototype["@@iterator"] =
 Property.prototype["@@iterator"] = function*() {
   yield* this._store;
 };
 /**
  * Forget everything recorded about added scopes, variables or properties.
  * @see VariablesView.commitHierarchy
  */
 VariablesView.prototype.clearHierarchy = function() {
   this._prevHierarchy.clear();
   this._currHierarchy.clear();
 };
 /**
  * Perform operations on all the VariablesView Scopes, Variables and Properties
  * after you've added all the items you wanted.
  *
  * Calling this method is optional, and does the following:
  *   - styles the items overridden by other items in parent scopes
  *   - reopens the items which were previously expanded
  *   - flashes the items whose values changed
  */
 VariablesView.prototype.commitHierarchy = function() {
   for (let [, currItem] of this._currHierarchy) {
     // Avoid performing expensive operations.
     if (this.commitHierarchyIgnoredItems[currItem._nameString]) {
       continue;
     }
     let overridden = this.isOverridden(currItem);
     if (overridden) {
       currItem.setOverridden(true);
     }
     let expanded = !currItem._committed && this.wasExpanded(currItem);
     if (expanded) {
       currItem.expand();
     }
     let changed = !currItem._committed && this.hasChanged(currItem);
     if (changed) {
       currItem.flash();
     }
     currItem._committed = true;
   }
   if (this.oncommit) {
     this.oncommit(this);
   }
 };
 // Some variables are likely to contain a very large number of properties.
 // It would be a bad idea to re-expand them or perform expensive operations.
 VariablesView.prototype.commitHierarchyIgnoredItems = Heritage.extend(null, {
   "window": true,
   "this": true
 });
 /**
  * Checks if the an item was previously expanded, if it existed in a
  * previous hierarchy.
  *
  * @param Scope | Variable | Property aItem
  *        The item to verify.
  * @return boolean
  *         Whether the item was expanded.
  */
 VariablesView.prototype.wasExpanded = function(aItem) {
   if (!(aItem instanceof Scope)) {
     return false;
   }
   let prevItem = this._prevHierarchy.get(aItem._absoluteName || aItem._nameString);
   return prevItem ? prevItem._isExpanded : false;
 };
 /**
  * Checks if the an item's displayed value (a representation of the grip)
  * has changed, if it existed in a previous hierarchy.
  *
  * @param Variable | Property aItem
  *        The item to verify.
  * @return boolean
  *         Whether the item has changed.
  */
 VariablesView.prototype.hasChanged = function(aItem) {
   // Only analyze Variables and Properties for displayed value changes.
   // Scopes are just collections of Variables and Properties and
   // don't have a "value", so they can't change.
   if (!(aItem instanceof Variable)) {
     return false;
   }
   let prevItem = this._prevHierarchy.get(aItem._absoluteName);
   return prevItem ? prevItem._valueString != aItem._valueString : false;
 };
 /**
  * Checks if the an item was previously expanded, if it existed in a
  * previous hierarchy.
  *
  * @param Scope | Variable | Property aItem
  *        The item to verify.
  * @return boolean
  *         Whether the item was expanded.
  */
 VariablesView.prototype.isOverridden = function(aItem) {
   // Only analyze Variables for being overridden in different Scopes.
   if (!(aItem instanceof Variable) || aItem instanceof Property) {
     return false;
   }
   let currVariableName = aItem._nameString;
   let parentScopes = this.getParentScopesForVariableOrProperty(aItem);
   for (let otherScope of parentScopes) {
     for (let [otherVariableName] of otherScope) {
       if (otherVariableName == currVariableName) {
         return true;
       }
     }
   }
   return false;
 };
 /**
  * Returns true if the descriptor represents an undefined, null or
  * primitive value.
  *
  * @param object aDescriptor
  *        The variable's descriptor.
  */
 VariablesView.isPrimitive = function(aDescriptor) {
   // For accessor property descriptors, the getter and setter need to be
   // contained in 'get' and 'set' properties.
   let getter = aDescriptor.get;
   let setter = aDescriptor.set;
   if (getter || setter) {
     return false;
   }
   // As described in the remote debugger protocol, the value grip
   // must be contained in a 'value' property.
   let grip = aDescriptor.value;
   if (typeof grip != "object") {
     return true;
   }
   // For convenience, undefined, null, Infinity, -Infinity, NaN, -0, and long
   // strings are considered types.
   let type = grip.type;
   if (type == "undefined" ||
       type == "null" ||
       type == "Infinity" ||
       type == "-Infinity" ||
       type == "NaN" ||
       type == "-0" ||
       type == "longString") {
     return true;
   }
   return false;
 };
 /**
  * Returns true if the descriptor represents an undefined value.
  *
  * @param object aDescriptor
  *        The variable's descriptor.
  */
 VariablesView.isUndefined = function(aDescriptor) {
   // For accessor property descriptors, the getter and setter need to be
   // contained in 'get' and 'set' properties.
   let getter = aDescriptor.get;
   let setter = aDescriptor.set;
   if (typeof getter == "object" && getter.type == "undefined" &&
       typeof setter == "object" && setter.type == "undefined") {
     return true;
   }
   // As described in the remote debugger protocol, the value grip
   // must be contained in a 'value' property.
   let grip = aDescriptor.value;
   if (typeof grip == "object" && grip.type == "undefined") {
     return true;
   }
   return false;
 };
 /**
  * Returns true if the descriptor represents a falsy value.
  *
  * @param object aDescriptor
  *        The variable's descriptor.
  */
 VariablesView.isFalsy = function(aDescriptor) {
   // As described in the remote debugger protocol, the value grip
   // must be contained in a 'value' property.
   let grip = aDescriptor.value;
   if (typeof grip != "object") {
     return !grip;
   }
   // For convenience, undefined, null, NaN, and -0 are all considered types.
   let type = grip.type;
   if (type == "undefined" ||
       type == "null" ||
       type == "NaN" ||
       type == "-0") {
     return true;
   }
   return false;
 };
 /**
  * Returns true if the value is an instance of Variable or Property.
  *
  * @param any aValue
  *        The value to test.
  */
 VariablesView.isVariable = function(aValue) {
   return aValue instanceof Variable;
 };
 /**
  * Returns a standard grip for a value.
  *
  * @param any aValue
  *        The raw value to get a grip for.
  * @return any
  *         The value's grip.
  */
 VariablesView.getGrip = function(aValue) {
   switch (typeof aValue) {
     case "boolean":
     case "string":
       return aValue;
     case "number":
       if (aValue === Infinity) {
         return { type: "Infinity" };
       } else if (aValue === -Infinity) {
         return { type: "-Infinity" };
       } else if (Number.isNaN(aValue)) {
         return { type: "NaN" };
       } else if (1 / aValue === -Infinity) {
         return { type: "-0" };
       }
       return aValue;
     case "undefined":
       // document.all is also "undefined"
       if (aValue === undefined) {
         return { type: "undefined" };
       }
     case "object":
       if (aValue === null) {
         return { type: "null" };
       }
     case "function":
       return { type: "object",
                class: WebConsoleUtils.getObjectClassName(aValue) };
     default:
       Cu.reportError("Failed to provide a grip for value of " + typeof value +
                      ": " + aValue);
       return null;
   }
 };
 /**
  * Returns a custom formatted property string for a grip.
  *
  * @param any aGrip
  *        @see Variable.setGrip
  * @param object aOptions
  *        Options:
  *        - concise: boolean that tells you want a concisely formatted string.
  *        - noStringQuotes: boolean that tells to not quote strings.
  *        - noEllipsis: boolean that tells to not add an ellipsis after the
  *        initial text of a longString.
  * @return string
  *         The formatted property string.
  */
 VariablesView.getString = function(aGrip, aOptions = {}) {
   if (aGrip && typeof aGrip == "object") {
     switch (aGrip.type) {
       case "undefined":
       case "null":
       case "NaN":
       case "Infinity":
       case "-Infinity":
       case "-0":
         return aGrip.type;
       default:
         let stringifier = VariablesView.stringifiers.byType[aGrip.type];
         if (stringifier) {
           let result = stringifier(aGrip, aOptions);
           if (result != null) {
             return result;
           }
         }
         if (aGrip.displayString) {
           return VariablesView.getString(aGrip.displayString, aOptions);
         }
         if (aGrip.type == "object" && aOptions.concise) {
           return aGrip.class;
         }
         return "[" + aGrip.type + " " + aGrip.class + "]";
     }
   }
   switch (typeof aGrip) {
     case "string":
       return VariablesView.stringifiers.byType.string(aGrip, aOptions);
     case "boolean":
       return aGrip ? "true" : "false";
     case "number":
       if (!aGrip && 1 / aGrip === -Infinity) {
         return "-0";
       }
     default:
       return aGrip + "";
   }
 };
 /**
  * The VariablesView stringifiers are used by VariablesView.getString(). These
  * are organized by object type, object class and by object actor preview kind.
  * Some objects share identical ways for previews, for example Arrays, Sets and
  * NodeLists.
  *
  * Any stringifier function must return a string. If null is returned, * then
  * the default stringifier will be used. When invoked, the stringifier is
  * given the same two arguments as those given to VariablesView.getString().
  */
 VariablesView.stringifiers = {};
 VariablesView.stringifiers.byType = {
   string: function(aGrip, {noStringQuotes}) {
     if (noStringQuotes) {
       return aGrip;
     }
     return '"' + aGrip + '"';
   },
   longString: function({initial}, {noStringQuotes, noEllipsis}) {
     let ellipsis = noEllipsis ? "" : Scope.ellipsis;
     if (noStringQuotes) {
       return initial + ellipsis;
     }
     let result = '"' + initial + '"';
     if (!ellipsis) {
       return result;
     }
     return result.substr(0, result.length - 1) + ellipsis + '"';
   },
   object: function(aGrip, aOptions) {
     let {preview} = aGrip;
     let stringifier;
     if (preview && preview.kind) {
       stringifier = VariablesView.stringifiers.byObjectKind[preview.kind];
     }
     if (!stringifier && aGrip.class) {
       stringifier = VariablesView.stringifiers.byObjectClass[aGrip.class];
     }
     if (stringifier) {
       return stringifier(aGrip, aOptions);
     }
     return null;
   },
 }; // VariablesView.stringifiers.byType
 VariablesView.stringifiers.byObjectClass = {
   Function: function(aGrip, {concise}) {
     // TODO: Bug 948484 - support arrow functions and ES6 generators
     let name = aGrip.userDisplayName || aGrip.displayName || aGrip.name || "";
     name = VariablesView.getString(name, { noStringQuotes: true });
     // TODO: Bug 948489 - Support functions with destructured parameters and
     // rest parameters
     let params = aGrip.parameterNames || "";
     if (!concise) {
       return "function " + name + "(" + params + ")";
     }
     return (name || "function ") + "(" + params + ")";
   },
   RegExp: function({displayString}) {
     return VariablesView.getString(displayString, { noStringQuotes: true });
   },
   Date: function({preview}) {
     if (!preview || !("timestamp" in preview)) {
       return null;
     }
     if (typeof preview.timestamp != "number") {
       return new Date(preview.timestamp).toString(); // invalid date
     }
     return "Date " + new Date(preview.timestamp).toISOString();
   },
   String: function({displayString}) {
     if (displayString === undefined) {
       return null;
     }
     return VariablesView.getString(displayString);
   },
   Number: function({preview}) {
     if (preview === undefined) {
       return null;
     }
     return VariablesView.getString(preview.value);
   },
 }; // VariablesView.stringifiers.byObjectClass
 VariablesView.stringifiers.byObjectClass.Boolean =
   VariablesView.stringifiers.byObjectClass.Number;
 VariablesView.stringifiers.byObjectKind = {
   ArrayLike: function(aGrip, {concise}) {
     let {preview} = aGrip;
     if (concise) {
       return aGrip.class + "[" + preview.length + "]";
     }
     if (!preview.items) {
       return null;
     }
     let shown = 0, result = [], lastHole = null;
     for (let item of preview.items) {
       if (item === null) {
         if (lastHole !== null) {
           result[lastHole] += ",";
         } else {
           result.push("");
         }
         lastHole = result.length - 1;
       } else {
         lastHole = null;
         result.push(VariablesView.getString(item, { concise: true }));
       }
       shown++;
     }
     if (shown < preview.length) {
       let n = preview.length - shown;
       result.push(VariablesView.stringifiers._getNMoreString(n));
     } else if (lastHole !== null) {
       // make sure we have the right number of commas...
       result[lastHole] += ",";
     }
     let prefix = aGrip.class == "Array" ? "" : aGrip.class + " ";
     return prefix + "[" + result.join(", ") + "]";
   },
   MapLike: function(aGrip, {concise}) {
     let {preview} = aGrip;
     if (concise || !preview.entries) {
       let size = typeof preview.size == "number" ?
                    "[" + preview.size + "]" : "";
       return aGrip.class + size;
     }
     let entries = [];
     for (let [key, value] of preview.entries) {
       let keyString = VariablesView.getString(key, {
         concise: true,
         noStringQuotes: true,
       });
       let valueString = VariablesView.getString(value, { concise: true });
       entries.push(keyString + ": " + valueString);
     }
     if (typeof preview.size == "number" && preview.size > entries.length) {
       let n = preview.size - entries.length;
       entries.push(VariablesView.stringifiers._getNMoreString(n));
     }
     return aGrip.class + " {" + entries.join(", ") + "}";
   },
   ObjectWithText: function(aGrip, {concise}) {
     if (concise) {
       return aGrip.class;
     }
     return aGrip.class + " " + VariablesView.getString(aGrip.preview.text);
   },
   ObjectWithURL: function(aGrip, {concise}) {
     let result = aGrip.class;
     let url = aGrip.preview.url;
     if (!VariablesView.isFalsy({ value: url })) {
       result += " \u2192 " + WebConsoleUtils.abbreviateSourceURL(url,
                              { onlyCropQuery: !concise });
     }
     return result;
   },
   // Stringifier for any kind of object.
   Object: function(aGrip, {concise}) {
     if (concise) {
       return aGrip.class;
     }
     let {preview} = aGrip;
     let props = [];
     for (let key of Object.keys(preview.ownProperties || {})) {
       let value = preview.ownProperties[key];
       let valueString = "";
       if (value.get) {
         valueString = "Getter";
       } else if (value.set) {
         valueString = "Setter";
       } else {
         valueString = VariablesView.getString(value.value, { concise: true });
       }
       props.push(key + ": " + valueString);
     }
     for (let key of Object.keys(preview.safeGetterValues || {})) {
       let value = preview.safeGetterValues[key];
       let valueString = VariablesView.getString(value.getterValue,
                                                 { concise: true });
       props.push(key + ": " + valueString);
     }
     if (!props.length) {
       return null;
     }
     if (preview.ownPropertiesLength) {
       let previewLength = Object.keys(preview.ownProperties).length;
       let diff = preview.ownPropertiesLength - previewLength;
       if (diff > 0) {
         props.push(VariablesView.stringifiers._getNMoreString(diff));
       }
     }
     let prefix = aGrip.class != "Object" ? aGrip.class + " " : "";
     return prefix + "{" + props.join(", ") + "}";
   }, // Object
   Error: function(aGrip, {concise}) {
     let {preview} = aGrip;
     let name = VariablesView.getString(preview.name, { noStringQuotes: true });
     if (concise) {
       return name || aGrip.class;
     }
     let msg = name + ": " +
               VariablesView.getString(preview.message, { noStringQuotes: true });
     if (!VariablesView.isFalsy({ value: preview.stack })) {
       msg += "\n" + STR.GetStringFromName("variablesViewErrorStacktrace") +
              "\n" + preview.stack;
     }
     return msg;
   },
   DOMException: function(aGrip, {concise}) {
     let {preview} = aGrip;
     if (concise) {
       return preview.name || aGrip.class;
     }
     let msg = aGrip.class + " [" + preview.name + ": " +
               VariablesView.getString(preview.message) + "\n" +
               "code: " + preview.code + "\n" +
               "nsresult: 0x" + (+preview.result).toString(16);
     if (preview.filename) {
       msg += "\nlocation: " + preview.filename;
       if (preview.lineNumber) {
         msg += ":" + preview.lineNumber;
       }
     }
     return msg + "]";
   },
   DOMEvent: function(aGrip, {concise}) {
     let {preview} = aGrip;
     if (!preview.type) {
       return null;
     }
     if (concise) {
       return aGrip.class + " " + preview.type;
     }
     let result = preview.type;
     if (preview.eventKind == "key" && preview.modifiers &&
         preview.modifiers.length) {
       result += " " + preview.modifiers.join("-");
     }
     let props = [];
     if (preview.target) {
       let target = VariablesView.getString(preview.target, { concise: true });
       props.push("target: " + target);
     }
     for (let prop in preview.properties) {
       let value = preview.properties[prop];
       props.push(prop + ": " + VariablesView.getString(value, { concise: true }));
     }
     return result + " {" + props.join(", ") + "}";
   }, // DOMEvent
   DOMNode: function(aGrip, {concise}) {
     let {preview} = aGrip;
     switch (preview.nodeType) {
       case Ci.nsIDOMNode.DOCUMENT_NODE: {
         let location = WebConsoleUtils.abbreviateSourceURL(preview.location,
                                                            { onlyCropQuery: !concise });
         return aGrip.class + " \u2192 " + location;
       }
       case Ci.nsIDOMNode.ATTRIBUTE_NODE: {
         let value = VariablesView.getString(preview.value, { noStringQuotes: true });
         return preview.nodeName + '="' + escapeHTML(value) + '"';
       }
       case Ci.nsIDOMNode.TEXT_NODE:
         return preview.nodeName + " " +
                VariablesView.getString(preview.textContent);
       case Ci.nsIDOMNode.COMMENT_NODE: {
         let comment = VariablesView.getString(preview.textContent,
                                               { noStringQuotes: true });
         return "<!--" + comment + "-->";
       }
       case Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE: {
         if (concise || !preview.childNodes) {
           return aGrip.class + "[" + preview.childNodesLength + "]";
         }
         let nodes = [];
         for (let node of preview.childNodes) {
           nodes.push(VariablesView.getString(node));
         }
         if (nodes.length < preview.childNodesLength) {
           let n = preview.childNodesLength - nodes.length;
           nodes.push(VariablesView.stringifiers._getNMoreString(n));
         }
         return aGrip.class + " [" + nodes.join(", ") + "]";
       }
       case Ci.nsIDOMNode.ELEMENT_NODE: {
         let attrs = preview.attributes;
         if (!concise) {
           let n = 0, result = "<" + preview.nodeName;
           for (let name in attrs) {
             let value = VariablesView.getString(attrs[name],
                                                 { noStringQuotes: true });
             result += " " + name + '="' + escapeHTML(value) + '"';
             n++;
           }
           if (preview.attributesLength > n) {
             result += " " + Scope.ellipsis;
           }
           return result + ">";
         }
         let result = "<" + preview.nodeName;
         if (attrs.id) {
           result += "#" + attrs.id;
         }
         return result + ">";
       }
       default:
         return null;
     }
   }, // DOMNode
 }; // VariablesView.stringifiers.byObjectKind
 /**
  * Get the "N more…" formatted string, given an N. This is used for displaying
  * how many elements are not displayed in an object preview (eg. an array).
  *
  * @private
  * @param number aNumber
  * @return string
  */
 VariablesView.stringifiers._getNMoreString = function(aNumber) {
   let str = STR.GetStringFromName("variablesViewMoreObjects");
   return PluralForm.get(aNumber, str).replace("#1", aNumber);
 };
 /**
  * Returns a custom class style for a grip.
  *
  * @param any aGrip
  *        @see Variable.setGrip
  * @return string
  *         The custom class style.
  */
 VariablesView.getClass = function(aGrip) {
   if (aGrip && typeof aGrip == "object") {
     if (aGrip.preview) {
       switch (aGrip.preview.kind) {
         case "DOMNode":
           return "token-domnode";
       }
     }
     switch (aGrip.type) {
       case "undefined":
         return "token-undefined";
       case "null":
         return "token-null";
       case "Infinity":
       case "-Infinity":
       case "NaN":
       case "-0":
         return "token-number";
       case "longString":
         return "token-string";
     }
   }
   switch (typeof aGrip) {
     case "string":
       return "token-string";
     case "boolean":
       return "token-boolean";
     case "number":
       return "token-number";
     default:
       return "token-other";
   }
 };
 /**
  * A monotonically-increasing counter, that guarantees the uniqueness of scope,
  * variables and properties ids.
  *
  * @param string aName
  *        An optional string to prefix the id with.
  * @return number
  *         A unique id.
  */
 let generateId = (function() {
   let count = 0;
   return function(aName = "") {
     return aName.toLowerCase().trim().replace(/\s+/g, "-") + (++count);
   };
 })();
 /**
  * Escape some HTML special characters. We do not need full HTML serialization
  * here, we just want to make strings safe to display in HTML attributes, for
  * the stringifiers.
  *
  * @param string aString
  * @return string
  */
 function escapeHTML(aString) {
   return aString.replace(/&/g, "&amp;")
                 .replace(/"/g, "&quot;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;");
 }
 /**
  * An Editable encapsulates the UI of an edit box that overlays a label,
  * allowing the user to edit the value.
  *
  * @param Variable aVariable
  *        The Variable or Property to make editable.
  * @param object aOptions
  *        - onSave
  *          The callback to call with the value when editing is complete.
  *        - onCleanup
  *          The callback to call when the editable is removed for any reason.
  */
 function Editable(aVariable, aOptions) {
   this._variable = aVariable;
   this._onSave = aOptions.onSave;
   this._onCleanup = aOptions.onCleanup;
 }
 Editable.create = function(aVariable, aOptions, aEvent) {
   let editable = new this(aVariable, aOptions);
   editable.activate(aEvent);
   return editable;
 };
 Editable.prototype = {
   /**
    * The class name for targeting this Editable type's label element. Overridden
    * by inheriting classes.
    */
   className: null,
   /**
    * Boolean indicating whether this Editable should activate. Overridden by
    * inheriting classes.
    */
   shouldActivate: null,
   /**
    * The label element for this Editable. Overridden by inheriting classes.
    */
   label: null,
   /**
    * Activate this editable by replacing the input box it overlays and
    * initialize the handlers.
    *
    * @param Event e [optional]
    *        Optionally, the Event object that was used to activate the Editable.
    */
   activate: function(e) {
     if (!this.shouldActivate) {
       this._onCleanup && this._onCleanup();
       return;
     }
     let { label } = this;
     let initialString = label.getAttribute("value");
     if (e) {
       e.preventDefault();
       e.stopPropagation();
     }
     // Create a texbox input element which will be shown in the current
     // element's specified label location.
     let input = this._input = this._variable.document.createElement("textbox");
     input.className = "plain " + this.className;
     input.setAttribute("value", initialString);
     input.setAttribute("flex", "1");
     // Replace the specified label with a textbox input element.
     label.parentNode.replaceChild(input, label);
     this._variable._variablesView.boxObject.ensureElementIsVisible(input);
     input.select();
     // When the value is a string (displayed as "value"), then we probably want
     // to change it to another string in the textbox, so to avoid typing the ""
     // again, tackle with the selection bounds just a bit.
     if (initialString.match(/^".+"$/)) {
       input.selectionEnd--;
       input.selectionStart++;
     }
     this._onKeypress = this._onKeypress.bind(this);
     this._onBlur = this._onBlur.bind(this);
     input.addEventListener("keypress", this._onKeypress);
     input.addEventListener("blur", this._onBlur);
     this._prevExpandable = this._variable.twisty;
     this._prevExpanded = this._variable.expanded;
     this._variable.collapse();
     this._variable.hideArrow();
     this._variable.locked = true;
     this._variable.editing = true;
   },
   /**
    * Remove the input box and restore the Variable or Property to its previous
    * state.
    */
   deactivate: function() {
     this._input.removeEventListener("keypress", this._onKeypress);
     this._input.removeEventListener("blur", this.deactivate);
     this._input.parentNode.replaceChild(this.label, this._input);
     this._input = null;
     let { boxObject } = this._variable._variablesView;
     boxObject.scrollBy(-this._variable._target, 0);
     this._variable.locked = false;
     this._variable.twisty = this._prevExpandable;
     this._variable.expanded = this._prevExpanded;
     this._variable.editing = false;
     this._onCleanup && this._onCleanup();
   },
   /**
    * Save the current value and deactivate the Editable.
    */
   _save: function() {
     let initial = this.label.getAttribute("value");
     let current = this._input.value.trim();
     this.deactivate();
     if (initial != current) {
       this._onSave(current);
     }
   },
   /**
    * Called when tab is pressed, allowing subclasses to link different
    * behavior to tabbing if desired.
    */
   _next: function() {
     this._save();
   },
   /**
    * Called when escape is pressed, indicating a cancelling of editing without
    * saving.
    */
   _reset: function() {
     this.deactivate();
     this._variable.focus();
   },
   /**
    * Event handler for when the input loses focus.
    */
   _onBlur: function() {
     this.deactivate();
   },
   /**
    * Event handler for when the input receives a key press.
    */
   _onKeypress: function(e) {
     e.stopPropagation();
     switch (e.keyCode) {
       case e.DOM_VK_TAB:
         this._next();
         break;
       case e.DOM_VK_RETURN:
         this._save();
         break;
       case e.DOM_VK_ESCAPE:
         this._reset();
         break;
     }
   },
 };
 /**
  * An Editable specific to editing the name of a Variable or Property.
  */
 function EditableName(aVariable, aOptions) {
   Editable.call(this, aVariable, aOptions);
 }
 EditableName.create = Editable.create;
 EditableName.prototype = Heritage.extend(Editable.prototype, {
   className: "element-name-input",
   get label() {
     return this._variable._name;
   },
   get shouldActivate() {
     return !!this._variable.ownerView.switch;
   },
 });
 /**
  * An Editable specific to editing the value of a Variable or Property.
  */
 function EditableValue(aVariable, aOptions) {
   Editable.call(this, aVariable, aOptions);
 }
 EditableValue.create = Editable.create;
 EditableValue.prototype = Heritage.extend(Editable.prototype, {
   className: "element-value-input",
   get label() {
     return this._variable._valueLabel;
   },
   get shouldActivate() {
     return !!this._variable.ownerView.eval;
   },
 });
 /**
  * An Editable specific to editing the key and value of a new property.
  */
 function EditableNameAndValue(aVariable, aOptions) {
   EditableName.call(this, aVariable, aOptions);
 }
 EditableNameAndValue.create = Editable.create;
 EditableNameAndValue.prototype = Heritage.extend(EditableName.prototype, {
   _reset: function(e) {
     // Hide the Variable or Property if the user presses escape.
     this._variable.remove();
     this.deactivate();
   },
   _next: function(e) {
     // Override _next so as to set both key and value at the same time.
     let key = this._input.value;
     this.label.setAttribute("value", key);
     let valueEditable = EditableValue.create(this._variable, {
       onSave: aValue => {
         this._onSave([key, aValue]);
       }
     });
     valueEditable._reset = () => {
       this._variable.remove();
       valueEditable.deactivate();
     };
   },
   _save: function(e) {
     // Both _save and _next activate the value edit box.
     this._next(e);
   }
 });

The Tor Browser / annotate

browser/devtools/shared/widgets/VariablesView.jsm@925c144e1f1f (annotated)

browser/devtools/shared/widgets/VariablesView.jsm