tor-browser

VariablesView.sys.mjs (87658B)

---

/* 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/. */

/* eslint-disable mozilla/no-aArgs */

const DBG_STRINGS_URI = "devtools/client/locales/debugger.properties";
const LAZY_EMPTY_DELAY = 150; // ms
const SCROLL_PAGE_SIZE_DEFAULT = 0;
const PAGE_SIZE_SCROLL_HEIGHT_RATIO = 100;
const PAGE_SIZE_MAX_JUMPS = 30;
const SEARCH_ACTION_MAX_DELAY = 300; // ms

import { require } from "resource://devtools/shared/loader/Loader.sys.mjs";

import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";

const EventEmitter = require("resource://devtools/shared/event-emitter.js");
const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
const {
 getSourceNames,
} = require("resource://devtools/client/shared/source-utils.js");
const {
 ViewHelpers,
 setNamedTimeout,
} = require("resource://devtools/client/shared/widgets/view-helpers.js");
const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
const { PluralForm } = require("resource://devtools/shared/plural-form.js");
const {
 LocalizationHelper,
 ELLIPSIS,
} = require("resource://devtools/shared/l10n.js");

const L10N = new LocalizationHelper(DBG_STRINGS_URI);
const HTML_NS = "http://www.w3.org/1999/xhtml";

const lazy = {};

XPCOMUtils.defineLazyServiceGetter(
 lazy,
 "clipboardHelper",
 "@mozilla.org/widget/clipboardhelper;1",
 Ci.nsIClipboardHelper
);

/**
* 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.
*/
export class VariablesView extends EventEmitter {
 /**
  * @param {Node} aParentNode
  *        The parent node to hold this view.
  * @param {object} [aFlags={}]
  *        An object contaning initialization options for this view.
  *        e.g. { lazyEmpty: true, searchEnabled: true ... }
  */
 constructor(aParentNode, aFlags = {}) {
   super();

   this._store = []; // Can't use a Map because Scope names needn't be unique.
   this._itemsByElement = new WeakMap();

   // Note: The hierarchy is only used for an assertion in a test at the moment,
   // to easily check the tree structure.
   this._testOnlyHierarchy = 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._onSearchboxKeyDown = this._onSearchboxKeyDown.bind(this);
   this._onViewKeyDown = this._onViewKeyDown.bind(this);

   // Create an internal scrollbox container.
   this._list = this.document.createXULElement("scrollbox");
   this._list.setAttribute("orient", "vertical");
   this._list.addEventListener("keydown", this._onViewKeyDown);
   this._parent.appendChild(this._list);

   for (const name in aFlags) {
     this[name] = aFlags[name];
   }
 }

 /**
  * 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(undefined, { 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} l10nId
  *        The scope localized string id.
  * @param {string} aCustomClass
  *        An additional class name for the containing element.
  * @return {Scope}
  *         The newly created Scope instance.
  */
 addScope(l10nId = "", aCustomClass = "") {
   this._removeEmptyNotice();
   this._toggleSearchVisibility(true);

   const scope = new Scope(this, l10nId, { customClass: aCustomClass });
   this._store.push(scope);
   this._itemsByElement.set(scope._target, scope);
   this._testOnlyHierarchy.set(l10nId, scope);
   scope.header = !!l10nId;

   return scope;
 }

 /**
  * Removes all items from this container.
  *
  * @param {number} [aTimeout]
  *        The number of milliseconds to delay the operation if
  *        lazy emptying of this container is enabled.
  */
 empty(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 = new WeakMap();
   this._testOnlyHierarchy = new Map();

   // Check if this empty operation may be executed lazily.
   if (this.lazyEmpty && aTimeout > 0) {
     this._emptySoon(aTimeout);
     return;
   }

   this._list.replaceChildren();
   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
  */
 _emptySoon(aTimeout) {
   const prevList = this._list;
   const currList = (this._list = this.document.createXULElement("scrollbox"));

   this.window.setTimeout(() => {
     prevList.removeEventListener("keydown", this._onViewKeyDown);
     currList.addEventListener("keydown", this._onViewKeyDown);
     currList.setAttribute("orient", "vertical");

     this._parent.removeChild(prevList);
     this._parent.appendChild(currList);

     if (!this._store.length) {
       this._appendEmptyNotice();
       this._toggleSearchVisibility(false);
     }
   }, aTimeout);
 }

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

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

 /**
  * 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 = L10N.getStr("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 (const 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 (const 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() {
   return !!this._searchboxContainer;
 }

 /**
  * Enables variable and property searching in this view.
  * Use the "searchEnabled" setter to enable searching.
  */
 _enableSearch() {
   // If searching was already enabled, no need to re-enable it again.
   if (this._searchboxContainer) {
     return;
   }
   const document = this.document;
   const ownerNode = this._parent.parentNode;

   const container = (this._searchboxContainer =
     document.createXULElement("hbox"));
   container.className = "devtools-toolbar devtools-input-toolbar";

   // Hide the variables searchbox container if there are no variables or
   // properties to display.
   container.hidden = !this._store.length;

   const searchbox = (this._searchboxNode = document.createElementNS(
     HTML_NS,
     "input"
   ));
   searchbox.className = "variables-view-searchinput devtools-filterinput";
   document.l10n.setAttributes(searchbox, "storage-variable-view-search-box");
   searchbox.addEventListener("input", this._onSearchboxInput);
   searchbox.addEventListener("keydown", this._onSearchboxKeyDown);

   container.appendChild(searchbox);
   ownerNode.insertBefore(container, this._parent);
 }

 /**
  * Disables variable and property searching in this view.
  * Use the "searchEnabled" setter to disable searching.
  */
 _disableSearch() {
   // 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);
   this._searchboxNode.removeEventListener(
     "keydown",
     this._onSearchboxKeyDown
   );

   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(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() {
   this.scheduleSearch(this._searchboxNode.value);
 }

 /**
  * Listener handling the searchbox keydown event.
  */
 _onSearchboxKeyDown(e) {
   switch (e.keyCode) {
     case KeyCodes.DOM_VK_RETURN:
       this._onSearchboxInput();
       return;
     case KeyCodes.DOM_VK_ESCAPE:
       this._searchboxNode.value = "";
       this._onSearchboxInput();
   }
 }

 /**
  * 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(aToken, aWait) {
   // The amount of time to wait for the requests to settle.
   const maxDelay = SEARCH_ACTION_MAX_DELAY;
   const 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(aToken) {
   for (const 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(aPredicate) {
   for (const scope of this._store) {
     const 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(aPredicate) {
   for (let i = this._store.length - 1; i >= 0; i--) {
     const scope = this._store[i];
     const 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(aIndex) {
   return this._store[aIndex];
 }

 /**
  * Recursively searches this container for the scope, variable or property
  * displayed by the specified node.
  *
  * @param {Node} aNode
  *        The node to search for.
  * @return Scope | Variable | Property
  *         The matched scope, variable or property, or null if nothing is found.
  */
 getItemForNode(aNode) {
   return this._itemsByElement.get(aNode);
 }

 /**
  * Gets the scope owning a Variable or Property.
  *
  * @param {Variable | Property} aItem
  *        The variable or property to retrieve the owner scope for.
  * @return Scope
  *         The owner scope.
  */
 getOwnerScopeForVariableOrProperty(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} aItem
  *        The variable or property for which to find the parent scopes.
  * @return array
  *         A list of parent Scopes.
  */
 getParentScopesForVariableOrProperty(aItem) {
   const 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() {
   const focused = this.document.commandDispatcher.focusedElement;
   return this.getItemForNode(focused);
 }

 /**
  * Focuses the first visible scope, variable, or property in this container.
  */
 focusFirstVisibleItem() {
   const 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() {
   const 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() {
   this.focusItemAtDelta(+1);
 }

 /**
  * Focuses the previous scope, variable or property in this view.
  */
 focusPrevItem() {
   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(aDelta) {
   const 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(aDirection) {
   const commandDispatcher = this.document.commandDispatcher;
   const prevFocusedElement = commandDispatcher.focusedElement;
   let currFocusedItem = null;

   do {
     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 {Scope | Variable | Property} aItem
  *        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(aItem, aCollapseFlag) {
   if (!aItem.focusable) {
     return false;
   }
   if (aCollapseFlag) {
     aItem.collapse();
   }
   aItem._target.focus();
   aItem._arrow.scrollIntoView({ block: "nearest" });
   return true;
 }

 /**
  * Copy current selection to clipboard.
  */
 _copyItem() {
   const item = this.getFocusedItem();
   lazy.clipboardHelper.copyString(
     item._nameString + item.separatorStr + item._valueString
   );
 }

 /**
  * Listener handling a key down event on the view.
  */
 // eslint-disable-next-line complexity
 _onViewKeyDown(e) {
   const item = this.getFocusedItem();

   // Prevent scrolling when pressing navigation keys.
   ViewHelpers.preventScrolling(e);

   switch (e.keyCode) {
     case KeyCodes.DOM_VK_C:
       if (e.ctrlKey || e.metaKey) {
         this._copyItem();
       }
       return;

     case KeyCodes.DOM_VK_UP:
       // Always rewind focus.
       this.focusPrevItem(true);
       return;

     case KeyCodes.DOM_VK_DOWN:
       // Always advance focus.
       this.focusNextItem(true);
       return;

     case KeyCodes.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 KeyCodes.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 KeyCodes.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 KeyCodes.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 KeyCodes.DOM_VK_HOME:
       this.focusFirstVisibleItem();
       return;

     case KeyCodes.DOM_VK_END:
       this.focusLastVisibleItem();
   }
 }

 /**
  * 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() {
   if (this._emptyTextNode || !this._emptyTextValue) {
     return;
   }

   const label = this.document.createXULElement("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() {
   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 {Node}
  */
 get parentNode() {
   return this._parent;
 }

 /**
  * Gets the owner document holding this view.
  *
  * @return {HTMLDocument}
  */
 get document() {
   return this._document || (this._document = this._parent.ownerDocument);
 }

 /**
  * Gets the default window holding this view.
  *
  * @return {Window}
  */
 get window() {
   return this._window || (this._window = this.document.defaultView);
 }

 _document = null;
 _window = null;

 _store = null;
 _itemsByElement = null;
 _testOnlyHierarchy = null;

 _enumVisible = true;
 _nonEnumVisible = true;
 _alignedValues = false;
 _actionsFirst = false;

 _parent = null;
 _list = null;
 _searchboxNode = null;
 _searchboxContainer = null;
 _emptyTextNode = null;
 _emptyTextValue = "";

 *[Symbol.iterator]() {
   yield* this._store;
 }

 static NON_SORTABLE_CLASSES = [
   "Array",
   "Int8Array",
   "Uint8Array",
   "Uint8ClampedArray",
   "Int16Array",
   "Uint16Array",
   "Int32Array",
   "Uint32Array",
   "Float32Array",
   "Float64Array",
   "NodeList",
 ];

 /**
  * Determine whether an object's properties should be sorted based on its class.
  *
  * @param {string} aClassName
  *        The class of the object.
  */
 static isSortable(aClassName) {
   return !this.NON_SORTABLE_CLASSES.includes(aClassName);
 }

 /**
  * Returns true if the descriptor represents an undefined, null or
  * primitive value.
  *
  * @param {object} aDescriptor
  *        The variable's descriptor.
  */
 static isPrimitive(aDescriptor) {
   // For accessor property descriptors, the getter and setter need to be
   // contained in 'get' and 'set' properties.
   const getter = aDescriptor.get;
   const 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.
   const grip = aDescriptor.value;
   if (typeof grip != "object") {
     return true;
   }

   // For convenience, undefined, null, Infinity, -Infinity, NaN, -0, and long
   // strings are considered types.
   const type = grip.type;
   if (
     type == "undefined" ||
     type == "null" ||
     type == "Infinity" ||
     type == "-Infinity" ||
     type == "NaN" ||
     type == "-0" ||
     type == "symbol" ||
     type == "longString"
   ) {
     return true;
   }

   return false;
 }

 /**
  * Returns true if the descriptor represents an undefined value.
  *
  * @param {object} aDescriptor
  *        The variable's descriptor.
  */
 static isUndefined(aDescriptor) {
   // For accessor property descriptors, the getter and setter need to be
   // contained in 'get' and 'set' properties.
   const getter = aDescriptor.get;
   const 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.
   const 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.
  */
 static isFalsy(aDescriptor) {
   // As described in the remote debugger protocol, the value grip
   // must be contained in a 'value' property.
   const grip = aDescriptor.value;
   if (typeof grip != "object") {
     return !grip;
   }

   // For convenience, undefined, null, NaN, and -0 are all considered types.
   const 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.
  */
 static isVariable(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.
  */
 static getGrip(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" };
       }
     // fall through
     case "object":
       if (aValue === null) {
         return { type: "null" };
       }
     // fall through
     case "function":
       return { type: "object", class: getObjectClassName(aValue) };
     default:
       console.error(
         "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.
  */
 static getString(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: {
         const stringifier = VariablesView.stringifiers.byType[aGrip.type];
         if (stringifier) {
           const 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";
       }
     // fall through
     default:
       return aGrip + "";
   }
 }

 /**
  * Returns a custom class style for a grip.
  *
  * @param {any} aGrip
  *        @see Variable.setGrip
  * @return {string}
  *         The custom class style.
  */
 static getClass(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";
   }
 }

 /**
  * 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().
  */
 static stringifiers = {
   byType: {
     string(aGrip, { noStringQuotes }) {
       if (noStringQuotes) {
         return aGrip;
       }
       return '"' + aGrip + '"';
     },

     longString({ initial }, { noStringQuotes, noEllipsis }) {
       const ellipsis = noEllipsis ? "" : ELLIPSIS;
       if (noStringQuotes) {
         return initial + ellipsis;
       }
       const result = '"' + initial + '"';
       if (!ellipsis) {
         return result;
       }
       return result.substr(0, result.length - 1) + ellipsis + '"';
     },

     object(aGrip, aOptions) {
       const { preview } = aGrip;
       let stringifier;
       if (aGrip.class) {
         stringifier = VariablesView.stringifiers.byObjectClass[aGrip.class];
       }
       if (!stringifier && preview && preview.kind) {
         stringifier = VariablesView.stringifiers.byObjectKind[preview.kind];
       }
       if (stringifier) {
         return stringifier(aGrip, aOptions);
       }
       return null;
     },

     symbol(aGrip) {
       const name = aGrip.name || "";
       return "Symbol(" + name + ")";
     },

     mapEntry(aGrip) {
       const {
         preview: { key, value },
       } = aGrip;

       const keyString = VariablesView.getString(key, {
         concise: true,
         noStringQuotes: true,
       });
       const valueString = VariablesView.getString(value, { concise: true });

       return keyString + " \u2192 " + valueString;
     },
   }, // VariablesView.stringifiers.byType
   byObjectClass: {
     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
       const params = aGrip.parameterNames || "";
       if (!concise) {
         return "function " + name + "(" + params + ")";
       }
       return (name || "function ") + "(" + params + ")";
     },

     RegExp({ displayString }) {
       return VariablesView.getString(displayString, { noStringQuotes: true });
     },

     Date({ 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();
     },

     Number(aGrip) {
       const { preview } = aGrip;
       if (preview === undefined) {
         return null;
       }
       return (
         aGrip.class +
         " { " +
         VariablesView.getString(preview.wrappedValue) +
         " }"
       );
     },
     Boolean: Number,
   }, // VariablesView.stringifiers.byObjectClass
   byObjectKind: {
     ArrayLike(aGrip, { concise }) {
       const { preview } = aGrip;
       if (concise) {
         return aGrip.class + "[" + preview.length + "]";
       }

       if (!preview.items) {
         return null;
       }

       let shown = 0,
         lastHole = null;
       const result = [];
       for (const 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) {
         const 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] += ",";
       }

       const prefix = aGrip.class == "Array" ? "" : aGrip.class + " ";
       return prefix + "[" + result.join(", ") + "]";
     },

     MapLike(aGrip, { concise }) {
       const { preview } = aGrip;
       if (concise || !preview.entries) {
         const size =
           typeof preview.size == "number" ? "[" + preview.size + "]" : "";
         return aGrip.class + size;
       }

       const entries = [];
       for (const [key, value] of preview.entries) {
         const keyString = VariablesView.getString(key, {
           concise: true,
           noStringQuotes: true,
         });
         const valueString = VariablesView.getString(value, { concise: true });
         entries.push(keyString + ": " + valueString);
       }

       if (typeof preview.size == "number" && preview.size > entries.length) {
         const n = preview.size - entries.length;
         entries.push(VariablesView.stringifiers._getNMoreString(n));
       }

       return aGrip.class + " {" + entries.join(", ") + "}";
     },

     ObjectWithText(aGrip, { concise }) {
       if (concise) {
         return aGrip.class;
       }

       return aGrip.class + " " + VariablesView.getString(aGrip.preview.text);
     },

     ObjectWithURL(aGrip, { concise }) {
       let result = aGrip.class;
       const url = aGrip.preview.url;
       if (!VariablesView.isFalsy({ value: url })) {
         result += ` \u2192 ${getSourceNames(url)[concise ? "short" : "long"]}`;
       }
       return result;
     },

     // Stringifier for any kind of object.
     Object(aGrip, { concise }) {
       if (concise) {
         return aGrip.class;
       }

       const { preview } = aGrip;
       const props = [];

       if (aGrip.class == "Promise" && aGrip.promiseState) {
         const { state, value, reason } = aGrip.promiseState;
         props.push("<state>: " + VariablesView.getString(state));
         if (state == "fulfilled") {
           props.push(
             "<value>: " + VariablesView.getString(value, { concise: true })
           );
         } else if (state == "rejected") {
           props.push(
             "<reason>: " + VariablesView.getString(reason, { concise: true })
           );
         }
       }

       for (const key of Object.keys(preview.ownProperties || {})) {
         const 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 (const key of Object.keys(preview.safeGetterValues || {})) {
         const value = preview.safeGetterValues[key];
         const valueString = VariablesView.getString(value.getterValue, {
           concise: true,
         });
         props.push(key + ": " + valueString);
       }

       if (!props.length) {
         return null;
       }

       if (preview.ownPropertiesLength) {
         const previewLength = Object.keys(preview.ownProperties).length;
         const diff = preview.ownPropertiesLength - previewLength;
         if (diff > 0) {
           props.push(VariablesView.stringifiers._getNMoreString(diff));
         }
       }

       const prefix = aGrip.class != "Object" ? aGrip.class + " " : "";
       return prefix + "{" + props.join(", ") + "}";
     }, // Object

     Error(aGrip, { concise }) {
       const { preview } = aGrip;
       const 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" +
           L10N.getStr("variablesViewErrorStacktrace") +
           "\n" +
           preview.stack;
       }

       return msg;
     },

     DOMException(aGrip, { concise }) {
       const { 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(aGrip, { concise }) {
       const { 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("-");
       }

       const props = [];
       if (preview.target) {
         const target = VariablesView.getString(preview.target, {
           concise: true,
         });
         props.push("target: " + target);
       }

       for (const prop in preview.properties) {
         const value = preview.properties[prop];
         props.push(
           prop + ": " + VariablesView.getString(value, { concise: true })
         );
       }

       return result + " {" + props.join(", ") + "}";
     }, // DOMEvent

     DOMNode(aGrip, { concise }) {
       const { preview } = aGrip;

       switch (preview.nodeType) {
         case nodeConstants.DOCUMENT_NODE: {
           let result = aGrip.class;
           if (preview.location) {
             result += ` \u2192 ${
               getSourceNames(preview.location)[concise ? "short" : "long"]
             }`;
           }

           return result;
         }

         case nodeConstants.ATTRIBUTE_NODE: {
           const value = VariablesView.getString(preview.value, {
             noStringQuotes: true,
           });
           return preview.nodeName + '="' + escapeHTML(value) + '"';
         }

         case nodeConstants.TEXT_NODE:
           return (
             preview.nodeName +
             " " +
             VariablesView.getString(preview.textContent)
           );

         case nodeConstants.COMMENT_NODE: {
           const comment = VariablesView.getString(preview.textContent, {
             noStringQuotes: true,
           });
           return "<!--" + comment + "-->";
         }

         case nodeConstants.DOCUMENT_FRAGMENT_NODE: {
           if (concise || !preview.childNodes) {
             return aGrip.class + "[" + preview.childNodesLength + "]";
           }
           const nodes = [];
           for (const node of preview.childNodes) {
             nodes.push(VariablesView.getString(node));
           }
           if (nodes.length < preview.childNodesLength) {
             const n = preview.childNodesLength - nodes.length;
             nodes.push(VariablesView.stringifiers._getNMoreString(n));
           }
           return aGrip.class + " [" + nodes.join(", ") + "]";
         }

         case nodeConstants.ELEMENT_NODE: {
           const attrs = preview.attributes;
           if (!concise) {
             let n = 0,
               result = "<" + preview.nodeName;
             for (const name in attrs) {
               const value = VariablesView.getString(attrs[name], {
                 noStringQuotes: true,
               });
               result += " " + name + '="' + escapeHTML(value) + '"';
               n++;
             }
             if (preview.attributesLength > n) {
               result += " " + ELLIPSIS;
             }
             return result + ">";
           }

           let result = "<" + preview.nodeName;
           if (attrs.id) {
             result += "#" + attrs.id;
           }

           if (attrs.class) {
             result += "." + attrs.class.trim().replace(/\s+/, ".");
           }
           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}
    */
   _getNMoreString(aNumber) {
     const str = L10N.getStr("variablesViewMoreObjects");
     return PluralForm.get(aNumber, str).replace("#1", aNumber);
   },
 };
}

/**
* A Scope is an object holding Variable instances.
* Iterable via "for (let [name, variable] of instance) { }".
*/
class Scope {
 /**
  * @param {VariablesView} aView
  *        The view to contain this scope.
  * @param {string} l10nId
  *        The scope localized string id.
  * @param {object} [aFlags={}]
  *        Additional options or flags for this scope.
  */
 constructor(aView, l10nId, 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.contextMenuId = aView.contextMenuId;
   this.separatorStr = aView.separatorStr;

   this._init(l10nId, aFlags);
 }

 /**
  * 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.
  */
 get targetClassName() {
   return "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.
  * @param {object} aOptions
  *        Options of the form accepted by addItem.
  * @return {Variable}
  *         The newly created child Variable.
  */
 _createChild(aName, aDescriptor, aOptions) {
   return new Variable(this, aName, aDescriptor, aOptions);
 }

 /**
  * 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 {object} aOptions
  *        Specifies some options affecting the new variable.
  *        Recognized properties are
  *        * boolean relaxed  true if name duplicates should be allowed.
  *                           You probably shouldn't do it. Use this
  *                           with caution.
  *        * boolean internalItem  true if the item is internally generated.
  *                           This is used for special variables
  *                           like <return> or <exception> and distinguishes
  *                           them from ordinary properties that happen
  *                           to have the same name
  * @return {Variable}
  *         The newly created Variable instance, null if it already exists.
  */
 addItem(aName, aDescriptor = {}, aOptions = {}) {
   const { relaxed } = aOptions;
   if (this._store.has(aName) && !relaxed) {
     return this._store.get(aName);
   }

   const child = this._createChild(aName, aDescriptor, aOptions);
   this._store.set(aName, child);
   this._variablesView._itemsByElement.set(child._target, child);
   this._variablesView._testOnlyHierarchy.set(child.absoluteName, child);
   child.header = aName !== undefined;

   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={}]
  *        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
  */
 addItems(aItems, aOptions = {}) {
   const names = Object.keys(aItems);

   // Sort all of the properties before adding them, if preferred.
   if (aOptions.sorted) {
     names.sort(this._naturalSort);
   }

   // Add the properties to the current scope.
   for (const name of names) {
     const descriptor = aItems[name];
     const item = this.addItem(name, descriptor);

     if (aOptions.callback) {
       aOptions.callback(item, descriptor && descriptor.value);
     }
   }
 }

 /**
  * Remove this Scope from its parent and remove all children recursively.
  */
 remove() {
   const view = this._variablesView;
   view._store.splice(view._store.indexOf(this), 1);
   view._itemsByElement.delete(this._target);
   view._testOnlyHierarchy.delete(this._nameString);

   this._target.remove();

   for (const 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 | null}
  *         The matched variable, or null if nothing is found.
  */
 get(aName) {
   return this._store.get(aName);
 }

 /**
  * Recursively searches for the variable or property in this container
  * displayed by the specified node.
  *
  * @param {Node} aNode
  *        The node to search for.
  * @return {Variable | Property | null}
  *         The matched variable or property, or null if nothing is found.
  */
 find(aNode) {
   for (const [, 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} aParent
  *        The parent to check.
  * @return {boolean}
  *         True if the specified item is a direct child, false otherwise.
  */
 isChildOf(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} aParent
  *        The parent to check.
  * @return {boolean}
  *         True if the specified item is a descendant, false otherwise.
  */
 isDescendantOf(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() {
   this._target.hidden = false;
   this._isContentVisible = true;

   if (this.onshow) {
     this.onshow(this);
   }
 }

 /**
  * Hides the scope.
  */
 hide() {
   this._target.hidden = true;
   this._isContentVisible = false;

   if (this.onhide) {
     this.onhide(this);
   }
 }

 /**
  * Expands the scope, showing all the added details.
  */
 async expand() {
   if (this._isExpanded) {
     return;
   }
   if (this._variablesView._enumVisible) {
     this._openEnum();
   }
   if (this._variablesView._nonEnumVisible) {
     Services.tm.dispatchToMainThread({ run: this._openNonEnum });
   }
   this._isExpanded = true;

   if (this.onexpand) {
     // We return onexpand as it sometimes returns a promise
     // (up to the user of VariableView to do it)
     // that can indicate when the view is done expanding
     // and attributes are available. (Mostly used for tests)
     await this.onexpand(this);
   }
 }

 /**
  * Collapses the scope, hiding all the added details.
  */
 collapse() {
   if (!this._isExpanded) {
     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(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 (const [, variable] of this._store) {
     variable.header = true;
     variable._matched = true;
   }
   if (this.ontoggle) {
     this.ontoggle(this);
   }
 }

 /**
  * Shows the scope's title header.
  */
 showHeader() {
   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() {
   if (!this._isHeaderVisible) {
     return;
   }
   this.expand();
   this._target.setAttribute("untitled", "");
   this._isHeaderVisible = false;
 }

 /**
  * Sort in ascending order
  * This only needs to compare non-numbers since it is dealing with an array
  * which numeric-based indices are placed in order.
  *
  * @param {string} a
  * @param {string} b
  * @return {number}
  *         -1 if a is less than b, 0 if no change in order, +1 if a is greater than 0
  */
 _naturalSort(a, b) {
   if (isNaN(parseFloat(a)) && isNaN(parseFloat(b))) {
     return a < b ? -1 : 1;
   }
   return 0;
 }

 /**
  * Shows the scope's expand/collapse arrow.
  */
 showArrow() {
   if (this._isArrowVisible) {
     return;
   }
   this._arrow.removeAttribute("invisible");
   this._isArrowVisible = true;
 }

 /**
  * Hides the scope's expand/collapse arrow.
  */
 hideArrow() {
   if (!this._isArrowVisible) {
     return;
   }
   this._arrow.setAttribute("invisible", "");
   this._isArrowVisible = false;
 }

 /**
  * Gets the visibility state.
  *
  * @return {boolean}
  */
 get visible() {
   return this._isContentVisible;
 }

 /**
  * Gets the expanded state.
  *
  * @return {boolean}
  */
 get expanded() {
   return this._isExpanded;
 }

 /**
  * Gets the header visibility state.
  *
  * @return {boolean}
  */
 get header() {
   return this._isHeaderVisible;
 }

 /**
  * Gets the twisty visibility state.
  *
  * @return {boolean}
  */
 get twisty() {
   return this._isArrowVisible;
 }
 /**
  * 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();
 }

 /**
  * 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() {
   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(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(aName, aCallback, aCapture) {
   this._title.removeEventListener(aName, aCallback, aCapture);
 }

 /**
  * Gets the id associated with this item.
  *
  * @return {string}
  */
 get id() {
   return this._idString;
 }

 /**
  * Gets the name associated with this item.
  *
  * @return {string}
  */
 get name() {
   return this._nameString;
 }

 /**
  * Gets the displayed value for this item.
  *
  * @return {string}
  */
 get displayValue() {
   return this._valueString;
 }

 /**
  * Gets the class names used for the displayed value.
  *
  * @return {string}
  */
 get displayValueClassName() {
   return this._valueClassName;
 }

 /**
  * Gets the element associated with this item.
  *
  * @return {Node}
  */
 get target() {
   return this._target;
 }

 /**
  * Initializes this scope's id, view and binds event listeners.
  *
  * @param {string} l10nId
  *        The scope localized string id.
  * @param {object} [aFlags]
  *        Additional options or flags for this scope.
  */
 _init(l10nId, aFlags) {
   this._idString = generateId((this._nameString = l10nId));
   this._displayScope({
     l10nId,
     targetClassName: `${this.targetClassName} ${aFlags.customClass}`,
     titleClassName: "devtools-toolbar",
   });
   this._addEventListeners();
   this.parentNode.appendChild(this._target);
 }

 /**
  * Creates the necessary nodes for this scope.
  *
  * @param {object} options
  * @param {string} [options.l10nId]
  *        The scope localized string id.
  * @param {string} [options.value]
  *        The scope's name. Either this or l10nId need to be passed
  * @param {string} options.targetClassName
  *        A custom class name for this scope's target element.
  * @param {string} [options.titleClassName]
  *        A custom class name for this scope's title element.
  */
 _displayScope({ l10nId, value, targetClassName, titleClassName = "" }) {
   const document = this.document;

   const element = (this._target = document.createXULElement("vbox"));
   element.id = this._idString;
   element.className = targetClassName;

   const arrow = (this._arrow = document.createXULElement("hbox"));
   arrow.className = "arrow theme-twisty";

   const name = (this._name = document.createXULElement("label"));
   name.className = "name";
   if (l10nId) {
     document.l10n.setAttributes(name, l10nId);
   } else {
     name.setAttribute("value", value);
   }
   name.setAttribute("crop", "end");

   const title = (this._title = document.createXULElement("hbox"));
   title.className = "title " + titleClassName;
   title.setAttribute("align", "center");

   const enumerable = (this._enum = document.createXULElement("vbox"));
   const nonenum = (this._nonenum = document.createXULElement("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() {
   this._title.addEventListener("mousedown", this._onClick);
 }

 /**
  * The click listener for this scope's title.
  */
 _onClick(e) {
   if (e.button != 0) {
     return;
   }
   this.toggle();
   this.focus();
 }

 /**
  * Opens the enumerable items container.
  */
 _openEnum() {
   this._arrow.setAttribute("open", "");
   this._enum.setAttribute("open", "");
 }

 /**
  * Opens the non-enumerable items container.
  */
 _openNonEnum() {
   this._nonenum.setAttribute("open", "");
 }

 /**
  * Specifies if enumerable properties and variables should be displayed.
  *
  * @param {boolean} aFlag
  */
 set _enumVisible(aFlag) {
   for (const [, 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 (const [, 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(aLowerCaseQuery) {
   for (let [, variable] of this._store) {
     const currentObject = variable;
     const lowerCaseName = variable._nameString.toLowerCase();
     const lowerCaseValue = variable._valueString.toLowerCase();

     // Non-matched variables or properties require a corresponding attribute.
     if (
       !lowerCaseName.includes(aLowerCaseQuery) &&
       !lowerCaseValue.includes(aLowerCaseQuery)
     ) {
       variable._matched = false;
     } else {
       // Variable or property is matched.
       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(aPredicate) {
   if (aPredicate(this)) {
     return this;
   }

   if (this._isExpanded) {
     if (this._variablesView._enumVisible) {
       for (const item of this._enumItems) {
         const result = item._findInVisibleItems(aPredicate);
         if (result) {
           return result;
         }
       }
     }

     if (this._variablesView._nonEnumVisible) {
       for (const item of this._nonEnumItems) {
         const 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(aPredicate) {
   if (this._isExpanded) {
     if (this._variablesView._nonEnumVisible) {
       for (let i = this._nonEnumItems.length - 1; i >= 0; i--) {
         const item = this._nonEnumItems[i];
         const result = item._findInVisibleItemsReverse(aPredicate);
         if (result) {
           return result;
         }
       }
     }

     if (this._variablesView._enumVisible) {
       for (let i = this._enumItems.length - 1; i >= 0; i--) {
         const item = this._enumItems[i];
         const 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() {
   return (
     this._topView ||
     (this._topView = (() => {
       let parentView = this.ownerView;
       let topView;

       while ((topView = parentView.ownerView)) {
         parentView = topView;
       }
       return parentView;
     })())
   );
 }

 /**
  * Gets the parent node holding this scope.
  *
  * @return {Node}
  */
 get parentNode() {
   return this.ownerView._list;
 }

 /**
  * Gets the owner document holding this scope.
  *
  * @return {HTMLDocument}
  */
 get document() {
   return this._document || (this._document = this.ownerView.document);
 }

 /**
  * Gets the default window holding this scope.
  *
  * @return {Window}
  */
 get window() {
   return this._window || (this._window = this.ownerView.window);
 }

 _topView = null;
 _document = null;
 _window = null;

 ownerView = null;
 contextMenuId = "";
 separatorStr = "";

 _fetched = 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;

 *[Symbol.iterator]() {
   yield* this._store;
 }
}

// 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",
 () => new Map()
);
DevToolsUtils.defineLazyPrototypeGetter(Scope.prototype, "_enumItems", Array);
DevToolsUtils.defineLazyPrototypeGetter(
 Scope.prototype,
 "_nonEnumItems",
 Array
);

/**
* A Variable is a Scope holding Property instances.
* Iterable via "for (let [name, property] of instance) { }".
*/
class Variable extends Scope {
 /**
  * @param {Scope} aScope
  *        The scope to contain this variable.
  * @param {string} aName
  *        The variable's name.
  * @param {object} aDescriptor
  *        The variable's descriptor.
  * @param {object} aOptions
  *        Options of the form accepted by Scope.addItem
  */
 constructor(aScope, aName, aDescriptor, aOptions) {
   // Treat safe getter descriptors as descriptors with a value.
   if ("getterValue" in aDescriptor) {
     aDescriptor.value = aDescriptor.getterValue;
     delete aDescriptor.get;
     delete aDescriptor.set;
   }

   super(aScope, aName, {
     _internalItem: aOptions.internalItem,
     _initialDescriptor: aDescriptor,
   });

   this.setGrip(aDescriptor.value);
 }

 /**
  * 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.
  */
 get targetClassName() {
   return "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.
  * @param {object} aOptions
  *        Options of the form accepted by Scope.addItem
  * @return {Property}
  *         The newly created child Property.
  */
 _createChild(aName, aDescriptor, aOptions) {
   return new Property(this, aName, aDescriptor, aOptions);
 }

 /**
  * Remove this Variable from its parent and remove all children recursively.
  */
 remove() {
   this.ownerView._store.delete(this._nameString);
   this._variablesView._itemsByElement.delete(this._target);
   this._variablesView._testOnlyHierarchy.delete(this.absoluteName);

   this._target.remove();

   for (const 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={}]
  *        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(aObject, aOptions = {}) {
   // Retrieve the properties only once.
   if (this._fetched) {
     return;
   }
   this._fetched = true;

   const propertyNames = Object.getOwnPropertyNames(aObject);
   const prototype = Object.getPrototypeOf(aObject);

   // Sort all of the properties before adding them, if preferred.
   if (aOptions.sorted) {
     propertyNames.sort(this._naturalSort);
   }

   // Add all the variable properties.
   for (const name of propertyNames) {
     const descriptor = Object.getOwnPropertyDescriptor(aObject, name);
     if (descriptor.get || descriptor.set) {
       const prop = this._addRawNonValueProperty(name, descriptor);
       if (aOptions.expanded) {
         prop.expanded = true;
       }
     } else {
       const 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=aVar._sourceValue]
  *        The raw object you want to display. If unspecified, the object is
  *        assumed to be defined in a _sourceValue property on the target.
  */
 _populateTarget(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(aName, aDescriptor, aValue) {
   const descriptor = Object.create(aDescriptor);
   descriptor.value = VariablesView.getGrip(aValue);

   const 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(aName, aDescriptor) {
   const 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() {
   return this._nameString || "";
 }

 /**
  * Gets full path to this variable, including name of the scope.
  *
  * @return {string}
  */
 get absoluteName() {
   if (this._absoluteName) {
     return this._absoluteName;
   }

   this._absoluteName =
     this.ownerView._nameString + "[" + escapeString(this._nameString) + "]";
   return this._absoluteName;
 }

 /**
  * 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(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() {
   return this._initialDescriptor.value;
 }

 /**
  * Returns this variable's getter from the descriptor if available.
  *
  * @return {object}
  */
 get getter() {
   return this._initialDescriptor.get;
 }

 /**
  * Returns this variable's getter from the descriptor if available.
  *
  * @return {object}
  */
 get setter() {
   return 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(aGrip) {
   // Don't allow displaying grip information if there's no name available
   // or the grip is malformed.
   if (
     this._nameString === undefined ||
     aGrip === undefined ||
     aGrip === null
   ) {
     return;
   }
   // Getters and setters should display grip information in sub-properties.
   if (this.getter || this.setter) {
     return;
   }

   const prevGrip = this._valueGrip;
   if (prevGrip) {
     this._valueLabel.classList.remove(VariablesView.getClass(prevGrip));
   }
   this._valueGrip = aGrip;

   if (
     aGrip &&
     (aGrip.optimizedOut || aGrip.uninitialized || aGrip.missingArguments)
   ) {
     if (aGrip.optimizedOut) {
       this._valueString = L10N.getStr("variablesViewOptimizedOut");
     } else if (aGrip.uninitialized) {
       this._valueString = L10N.getStr("variablesViewUninitialized");
     } else if (aGrip.missingArguments) {
       this._valueString = L10N.getStr("variablesViewMissingArgs");
     }
     this.eval = null;
   } else {
     this._valueString = VariablesView.getString(aGrip, {
       concise: true,
       noEllipsis: true,
     });
     this.eval = this.ownerView.eval;
   }

   this._valueClassName = VariablesView.getClass(aGrip);

   this._valueLabel.classList.add(this._valueClassName);
   this._valueLabel.setAttribute("value", this._valueString);
   this._separatorLabel.hidden = false;
 }

 /**
  * Initializes this variable's id, view and binds event listeners.
  *
  * @override
  * @param {string} aName
  *        The variable's name.
  * @param {object} options
  * @param {object} options._internalItem
  * @param {object} options._initialDescriptor
  */
 _init(aName, { _internalItem, _initialDescriptor }) {
   this._internalItem = _internalItem;
   this._initialDescriptor = _initialDescriptor;

   this._idString = generateId((this._nameString = aName));
   this._displayScope({ value: aName, targetClassName: this.targetClassName });
   this._displayVariable();

   if (this.ownerView.contextMenuId) {
     this._title.setAttribute("context", this.ownerView.contextMenuId);
   }

   this._addEventListeners();

   if (
     this._initialDescriptor.enumerable ||
     this._nameString == "this" ||
     this._internalItem
   ) {
     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() {
   const document = this.document;
   const descriptor = this._initialDescriptor;

   const separatorLabel = (this._separatorLabel =
     document.createXULElement("label"));
   separatorLabel.className = "separator";
   separatorLabel.setAttribute("value", this.separatorStr + " ");

   const valueLabel = (this._valueLabel = document.createXULElement("label"));
   valueLabel.className = "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;

     const getter = this.addItem("get", { value: descriptor.get });
     const setter = this.addItem("set", { value: descriptor.set });

     getter.hideArrow();
     setter.hideArrow();
     this.expand();
   }
 }

 /**
  * Adds the necessary event listeners for this variable.
  */
 _addEventListeners() {
   this._title.addEventListener("mousedown", this._onClick);
 }

 _symbolicName = null;
 _symbolicPath = null;
 _absoluteName = null;

 _spacer = 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) { }".
*/
class Property extends Variable {
 /**
  * @param {Variable} aVar
  *        The variable to contain this property.
  * @param {string} aName
  *        The property's name.
  * @param {object} aDescriptor
  *        The property's descriptor.
  * @param {object} aOptions
  *        Options of the form accepted by Scope.addItem
  */
 constructor(aVar, aName, aDescriptor, aOptions) {
   super(aVar, aName, aDescriptor, aOptions);
 }

 /**
  * The class name applied to this property's target element.
  */
 get targetClassName() {
   return "variables-view-property variable-or-property";
 }

 /**
  * @see Variable.symbolicName
  * @return {string}
  */
 get symbolicName() {
   if (this._symbolicName) {
     return this._symbolicName;
   }

   this._symbolicName =
     this.ownerView.symbolicName + "[" + escapeString(this._nameString) + "]";
   return this._symbolicName;
 }

 /**
  * @see Variable.absoluteName
  * @return {string}
  */
 get absoluteName() {
   if (this._absoluteName) {
     return this._absoluteName;
   }

   this._absoluteName =
     this.ownerView.absoluteName + "[" + escapeString(this._nameString) + "]";
   return this._absoluteName;
 }
}

// Match the function name from the result of toString() or toSource().
//
// Examples:
// (function foobar(a, b) { ...
// function foobar2(a) { ...
// function() { ...
const REGEX_MATCH_FUNCTION_NAME = /^\(?function\s+([^(\s]+)\s*\(/;

/**
* Helper function to deduce the name of the provided function.
*
* @param {Function} function
*        The function whose name will be returned.
* @return {string}
*         Function name.
*/
function getFunctionName(func) {
 let name = null;
 if (func.name) {
   name = func.name;
 } else {
   let desc;
   try {
     desc = func.getOwnPropertyDescriptor("displayName");
   } catch (ex) {
     // Ignore.
   }
   if (desc && typeof desc.value == "string") {
     name = desc.value;
   }
 }
 if (!name) {
   try {
     const str = (func.toString() || func.toSource()) + "";
     name = (str.match(REGEX_MATCH_FUNCTION_NAME) || [])[1];
   } catch (ex) {
     // Ignore.
   }
 }
 return name;
}

/**
* Get the object class name. For example, the |window| object has the Window
* class name (based on [object Window]).
*
* @param {object} object
*        The object you want to get the class name for.
* @return {string}
*         The object class name.
*/
function getObjectClassName(object) {
 if (object === null) {
   return "null";
 }
 if (object === undefined) {
   return "undefined";
 }

 const type = typeof object;
 if (type != "object") {
   // Grip class names should start with an uppercase letter.
   return type.charAt(0).toUpperCase() + type.substr(1);
 }

 let className;

 try {
   className = ((object + "").match(/^\[object (\S+)\]$/) || [])[1];
   if (!className) {
     className = ((object.constructor + "").match(/^\[object (\S+)\]$/) ||
       [])[1];
   }
   if (!className && typeof object.constructor == "function") {
     className = getFunctionName(object.constructor);
   }
 } catch (ex) {
   // Ignore.
 }

 return className;
}

/**
* 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.
*/
var generateId = (function () {
 let count = 0;
 return function (aName = "") {
   return aName.toLowerCase().trim().replace(/\s+/g, "-") + ++count;
 };
})();

/**
* Quote and escape a string. The result will be another string containing an
* ECMAScript StringLiteral which will produce the original one when evaluated
* by `eval` or similar.
*
* @param string aString
*       An optional string to be escaped. If no string is passed, the function
*       returns an empty string.
* @return string
*/
function escapeString(aString) {
 if (typeof aString !== "string") {
   return "";
 }
 // U+2028 and U+2029 are allowed in JSON but not in ECMAScript string literals.
 return JSON.stringify(aString)
   .replace(/\u2028/g, "\\u2028")
   .replace(/\u2029/g, "\\u2029");
}

/**
* 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
*/
export function escapeHTML(aString) {
 return aString
   .replace(/&/g, "&amp;")
   .replace(/"/g, "&quot;")
   .replace(/</g, "&lt;")
   .replace(/>/g, "&gt;");
}