diff -r 000000000000 -r 6474c204b198 browser/devtools/markupview/markup-view.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/devtools/markupview/markup-view.js	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,2105 @@
+/* -*- 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/. */
+
+const {Cc, Cu, Ci} = require("chrome");
+
+// Page size for pageup/pagedown
+const PAGE_SIZE = 10;
+const PREVIEW_AREA = 700;
+const DEFAULT_MAX_CHILDREN = 100;
+const COLLAPSE_ATTRIBUTE_LENGTH = 120;
+const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
+const COLLAPSE_DATA_URL_LENGTH = 60;
+const CONTAINER_FLASHING_DURATION = 500;
+const NEW_SELECTION_HIGHLIGHTER_TIMER = 1000;
+
+const {UndoStack} = require("devtools/shared/undo");
+const {editableField, InplaceEditor} = require("devtools/shared/inplace-editor");
+const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+const {HTMLEditor} = require("devtools/markupview/html-editor");
+const promise = require("devtools/toolkit/deprecated-sync-thenables");
+const {Tooltip} = require("devtools/shared/widgets/Tooltip");
+const EventEmitter = require("devtools/toolkit/event-emitter");
+
+Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm");
+Cu.import("resource://gre/modules/devtools/Templater.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+loader.lazyGetter(this, "DOMParser", function() {
+ return Cc["@mozilla.org/xmlextras/domparser;1"].createInstance(Ci.nsIDOMParser);
+});
+loader.lazyGetter(this, "AutocompletePopup", () => {
+  return require("devtools/shared/autocomplete-popup").AutocompletePopup
+});
+
+/**
+ * Vocabulary for the purposes of this file:
+ *
+ * MarkupContainer - the structure that holds an editor and its
+ *  immediate children in the markup panel.
+ * Node - A content node.
+ * object.elt - A UI element in the markup panel.
+ */
+
+/**
+ * The markup tree.  Manages the mapping of nodes to MarkupContainers,
+ * updating based on mutations, and the undo/redo bindings.
+ *
+ * @param Inspector aInspector
+ *        The inspector we're watching.
+ * @param iframe aFrame
+ *        An iframe in which the caller has kindly loaded markup-view.xhtml.
+ */
+function MarkupView(aInspector, aFrame, aControllerWindow) {
+  this._inspector = aInspector;
+  this.walker = this._inspector.walker;
+  this._frame = aFrame;
+  this.doc = this._frame.contentDocument;
+  this._elt = this.doc.querySelector("#root");
+  this.htmlEditor = new HTMLEditor(this.doc);
+
+  this.layoutHelpers = new LayoutHelpers(this.doc.defaultView);
+
+  try {
+    this.maxChildren = Services.prefs.getIntPref("devtools.markup.pagesize");
+  } catch(ex) {
+    this.maxChildren = DEFAULT_MAX_CHILDREN;
+  }
+
+  // Creating the popup to be used to show CSS suggestions.
+  let options = {
+    autoSelect: true,
+    theme: "auto"
+  };
+  this.popup = new AutocompletePopup(this.doc.defaultView.parent.document, options);
+
+  this.undo = new UndoStack();
+  this.undo.installController(aControllerWindow);
+
+  this._containers = new Map();
+
+  this._boundMutationObserver = this._mutationObserver.bind(this);
+  this.walker.on("mutations", this._boundMutationObserver);
+
+  this._boundOnNewSelection = this._onNewSelection.bind(this);
+  this._inspector.selection.on("new-node-front", this._boundOnNewSelection);
+  this._onNewSelection();
+
+  this._boundKeyDown = this._onKeyDown.bind(this);
+  this._frame.contentWindow.addEventListener("keydown", this._boundKeyDown, false);
+
+  this._boundFocus = this._onFocus.bind(this);
+  this._frame.addEventListener("focus", this._boundFocus, false);
+
+  this._initPreview();
+  this._initTooltips();
+  this._initHighlighter();
+
+  EventEmitter.decorate(this);
+}
+
+exports.MarkupView = MarkupView;
+
+MarkupView.prototype = {
+  _selectedContainer: null,
+
+  _initTooltips: function() {
+    this.tooltip = new Tooltip(this._inspector.panelDoc);
+    this.tooltip.startTogglingOnHover(this._elt,
+      this._isImagePreviewTarget.bind(this));
+  },
+
+  _initHighlighter: function() {
+    // Show the box model on markup-view mousemove
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._elt.addEventListener("mousemove", this._onMouseMove, false);
+    this._onMouseLeave = this._onMouseLeave.bind(this);
+    this._elt.addEventListener("mouseleave", this._onMouseLeave, false);
+
+    // Show markup-containers as hovered on toolbox "picker-node-hovered" event
+    // which happens when the "pick" button is pressed
+    this._onToolboxPickerHover = (event, nodeFront) => {
+      this.showNode(nodeFront, true).then(() => {
+        this._showContainerAsHovered(nodeFront);
+      });
+    }
+    this._inspector.toolbox.on("picker-node-hovered", this._onToolboxPickerHover);
+  },
+
+  _onMouseMove: function(event) {
+    let target = event.target;
+
+    // Search target for a markupContainer reference, if not found, walk up
+    while (!target.container) {
+      if (target.tagName.toLowerCase() === "body") {
+        return;
+      }
+      target = target.parentNode;
+    }
+
+    let container = target.container;
+    if (this._hoveredNode !== container.node) {
+      if (container.node.nodeType !== Ci.nsIDOMNode.TEXT_NODE) {
+        this._showBoxModel(container.node);
+      } else {
+        this._hideBoxModel();
+      }
+    }
+    this._showContainerAsHovered(container.node);
+  },
+
+  _hoveredNode: null,
+  _showContainerAsHovered: function(nodeFront) {
+    if (this._hoveredNode !== nodeFront) {
+      if (this._hoveredNode) {
+        this._containers.get(this._hoveredNode).hovered = false;
+      }
+      this._containers.get(nodeFront).hovered = true;
+
+      this._hoveredNode = nodeFront;
+    }
+  },
+
+  _onMouseLeave: function() {
+    this._hideBoxModel(true);
+    if (this._hoveredNode) {
+      this._containers.get(this._hoveredNode).hovered = false;
+    }
+    this._hoveredNode = null;
+  },
+
+  _showBoxModel: function(nodeFront, options={}) {
+    this._inspector.toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+  },
+
+  _hideBoxModel: function(forceHide) {
+    return this._inspector.toolbox.highlighterUtils.unhighlight(forceHide);
+  },
+
+  _briefBoxModelTimer: null,
+  _brieflyShowBoxModel: function(nodeFront, options) {
+    let win = this._frame.contentWindow;
+
+    if (this._briefBoxModelTimer) {
+      win.clearTimeout(this._briefBoxModelTimer);
+      this._briefBoxModelTimer = null;
+    }
+
+    this._showBoxModel(nodeFront, options);
+
+    this._briefBoxModelTimer = this._frame.contentWindow.setTimeout(() => {
+      this._hideBoxModel();
+    }, NEW_SELECTION_HIGHLIGHTER_TIMER);
+  },
+
+  template: function(aName, aDest, aOptions={stack: "markup-view.xhtml"}) {
+    let node = this.doc.getElementById("template-" + aName).cloneNode(true);
+    node.removeAttribute("id");
+    template(node, aDest, aOptions);
+    return node;
+  },
+
+  /**
+   * Get the MarkupContainer object for a given node, or undefined if
+   * none exists.
+   */
+  getContainer: function(aNode) {
+    return this._containers.get(aNode);
+  },
+
+  update: function() {
+    let updateChildren = function(node) {
+      this.getContainer(node).update();
+      for (let child of node.treeChildren()) {
+        updateChildren(child);
+      }
+    }.bind(this);
+
+    // Start with the documentElement
+    let documentElement;
+    for (let node of this._rootNode.treeChildren()) {
+      if (node.isDocumentElement === true) {
+        documentElement = node;
+        break;
+      }
+    }
+
+    // Recursively update each node starting with documentElement.
+    updateChildren(documentElement);
+  },
+
+  /**
+   * Executed when the mouse hovers over a target in the markup-view and is used
+   * to decide whether this target should be used to display an image preview
+   * tooltip.
+   * Delegates the actual decision to the corresponding MarkupContainer instance
+   * if one is found.
+   * @return the promise returned by MarkupContainer._isImagePreviewTarget
+   */
+  _isImagePreviewTarget: function(target) {
+    // From the target passed here, let's find the parent MarkupContainer
+    // and ask it if the tooltip should be shown
+    let parent = target, container;
+    while (parent !== this.doc.body) {
+      if (parent.container) {
+        container = parent.container;
+        break;
+      }
+      parent = parent.parentNode;
+    }
+
+    if (container) {
+      // With the newly found container, delegate the tooltip content creation
+      // and decision to show or not the tooltip
+      return container._isImagePreviewTarget(target, this.tooltip);
+    }
+  },
+
+  /**
+   * Given the known reason, should the current selection be briefly highlighted
+   * In a few cases, we don't want to highlight the node:
+   * - If the reason is null (used to reset the selection),
+   * - if it's "inspector-open" (when the inspector opens up, let's not highlight
+   * the default node)
+   * - if it's "navigateaway" (since the page is being navigated away from)
+   * - if it's "test" (this is a special case for mochitest. In tests, we often
+   * need to select elements but don't necessarily want the highlighter to come
+   * and go after a delay as this might break test scenarios)
+   * We also do not want to start a brief highlight timeout if the node is already
+   * being hovered over, since in that case it will already be highlighted.
+   */
+  _shouldNewSelectionBeHighlighted: function() {
+    let reason = this._inspector.selection.reason;
+    let unwantedReasons = ["inspector-open", "navigateaway", "test"];
+    let isHighlitNode = this._hoveredNode === this._inspector.selection.nodeFront;
+    return !isHighlitNode && reason && unwantedReasons.indexOf(reason) === -1;
+  },
+
+  /**
+   * Highlight the inspector selected node.
+   */
+  _onNewSelection: function() {
+    let selection = this._inspector.selection;
+
+    this.htmlEditor.hide();
+    let done = this._inspector.updating("markup-view");
+    if (selection.isNode()) {
+      if (this._shouldNewSelectionBeHighlighted()) {
+        this._brieflyShowBoxModel(selection.nodeFront, {});
+      }
+
+      this.showNode(selection.nodeFront, true).then(() => {
+        if (selection.reason !== "treepanel") {
+          this.markNodeAsSelected(selection.nodeFront);
+        }
+        done();
+      }, (e) => {
+        console.error(e);
+        done();
+      });
+    } else {
+      this.unmarkSelectedNode();
+      done();
+    }
+  },
+
+  /**
+   * Create a TreeWalker to find the next/previous
+   * node for selection.
+   */
+  _selectionWalker: function(aStart) {
+    let walker = this.doc.createTreeWalker(
+      aStart || this._elt,
+      Ci.nsIDOMNodeFilter.SHOW_ELEMENT,
+      function(aElement) {
+        if (aElement.container &&
+            aElement.container.elt === aElement &&
+            aElement.container.visible) {
+          return Ci.nsIDOMNodeFilter.FILTER_ACCEPT;
+        }
+        return Ci.nsIDOMNodeFilter.FILTER_SKIP;
+      }
+    );
+    walker.currentNode = this._selectedContainer.elt;
+    return walker;
+  },
+
+  /**
+   * Key handling.
+   */
+  _onKeyDown: function(aEvent) {
+    let handled = true;
+
+    // Ignore keystrokes that originated in editors.
+    if (aEvent.target.tagName.toLowerCase() === "input" ||
+        aEvent.target.tagName.toLowerCase() === "textarea") {
+      return;
+    }
+
+    switch(aEvent.keyCode) {
+      case Ci.nsIDOMKeyEvent.DOM_VK_H:
+        let node = this._selectedContainer.node;
+        if (node.hidden) {
+          this.walker.unhideNode(node).then(() => this.nodeChanged(node));
+        } else {
+          this.walker.hideNode(node).then(() => this.nodeChanged(node));
+        }
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_DELETE:
+      case Ci.nsIDOMKeyEvent.DOM_VK_BACK_SPACE:
+        this.deleteNode(this._selectedContainer.node);
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_HOME:
+        let rootContainer = this._containers.get(this._rootNode);
+        this.navigate(rootContainer.children.firstChild.container);
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_LEFT:
+        if (this._selectedContainer.expanded) {
+          this.collapseNode(this._selectedContainer.node);
+        } else {
+          let parent = this._selectionWalker().parentNode();
+          if (parent) {
+            this.navigate(parent.container);
+          }
+        }
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_RIGHT:
+        if (!this._selectedContainer.expanded &&
+            this._selectedContainer.hasChildren) {
+          this._expandContainer(this._selectedContainer);
+        } else {
+          let next = this._selectionWalker().nextNode();
+          if (next) {
+            this.navigate(next.container);
+          }
+        }
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_UP:
+        let prev = this._selectionWalker().previousNode();
+        if (prev) {
+          this.navigate(prev.container);
+        }
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_DOWN:
+        let next = this._selectionWalker().nextNode();
+        if (next) {
+          this.navigate(next.container);
+        }
+        break;
+      case Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP: {
+        let walker = this._selectionWalker();
+        let selection = this._selectedContainer;
+        for (let i = 0; i < PAGE_SIZE; i++) {
+          let prev = walker.previousNode();
+          if (!prev) {
+            break;
+          }
+          selection = prev.container;
+        }
+        this.navigate(selection);
+        break;
+      }
+      case Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN: {
+        let walker = this._selectionWalker();
+        let selection = this._selectedContainer;
+        for (let i = 0; i < PAGE_SIZE; i++) {
+          let next = walker.nextNode();
+          if (!next) {
+            break;
+          }
+          selection = next.container;
+        }
+        this.navigate(selection);
+        break;
+      }
+      case Ci.nsIDOMKeyEvent.DOM_VK_F2: {
+        this.beginEditingOuterHTML(this._selectedContainer.node);
+        break;
+      }
+      default:
+        handled = false;
+    }
+    if (handled) {
+      aEvent.stopPropagation();
+      aEvent.preventDefault();
+    }
+  },
+
+  /**
+   * Delete a node from the DOM.
+   * This is an undoable action.
+   */
+  deleteNode: function(aNode) {
+    if (aNode.isDocumentElement ||
+        aNode.nodeType == Ci.nsIDOMNode.DOCUMENT_TYPE_NODE) {
+      return;
+    }
+
+    let container = this._containers.get(aNode);
+
+    // Retain the node so we can undo this...
+    this.walker.retainNode(aNode).then(() => {
+      let parent = aNode.parentNode();
+      let sibling = null;
+      this.undo.do(() => {
+        if (container.selected) {
+          this.navigate(this._containers.get(parent));
+        }
+        this.walker.removeNode(aNode).then(nextSibling => {
+          sibling = nextSibling;
+        });
+      }, () => {
+        this.walker.insertBefore(aNode, parent, sibling);
+      });
+    }).then(null, console.error);
+  },
+
+  /**
+   * If an editable item is focused, select its container.
+   */
+  _onFocus: function(aEvent) {
+    let parent = aEvent.target;
+    while (!parent.container) {
+      parent = parent.parentNode;
+    }
+    if (parent) {
+      this.navigate(parent.container, true);
+    }
+  },
+
+  /**
+   * Handle a user-requested navigation to a given MarkupContainer,
+   * updating the inspector's currently-selected node.
+   *
+   * @param MarkupContainer aContainer
+   *        The container we're navigating to.
+   * @param aIgnoreFocus aIgnoreFocus
+   *        If falsy, keyboard focus will be moved to the container too.
+   */
+  navigate: function(aContainer, aIgnoreFocus) {
+    if (!aContainer) {
+      return;
+    }
+
+    let node = aContainer.node;
+    this.markNodeAsSelected(node, "treepanel");
+
+    if (!aIgnoreFocus) {
+      aContainer.focus();
+    }
+  },
+
+  /**
+   * Make sure a node is included in the markup tool.
+   *
+   * @param DOMNode aNode
+   *        The node in the content document.
+   * @param boolean aFlashNode
+   *        Whether the newly imported node should be flashed
+   * @returns MarkupContainer The MarkupContainer object for this element.
+   */
+  importNode: function(aNode, aFlashNode) {
+    if (!aNode) {
+      return null;
+    }
+
+    if (this._containers.has(aNode)) {
+      return this._containers.get(aNode);
+    }
+
+    if (aNode === this.walker.rootNode) {
+      var container = new RootContainer(this, aNode);
+      this._elt.appendChild(container.elt);
+      this._rootNode = aNode;
+    } else {
+      var container = new MarkupContainer(this, aNode, this._inspector);
+      if (aFlashNode) {
+        container.flashMutation();
+      }
+    }
+
+    this._containers.set(aNode, container);
+    container.childrenDirty = true;
+
+    this._updateChildren(container);
+
+    return container;
+  },
+
+  /**
+   * Mutation observer used for included nodes.
+   */
+  _mutationObserver: function(aMutations) {
+    let requiresLayoutChange = false;
+    let reselectParent;
+    let reselectChildIndex;
+
+    for (let mutation of aMutations) {
+      let type = mutation.type;
+      let target = mutation.target;
+
+      if (mutation.type === "documentUnload") {
+        // Treat this as a childList change of the child (maybe the protocol
+        // should do this).
+        type = "childList";
+        target = mutation.targetParent;
+        if (!target) {
+          continue;
+        }
+      }
+
+      let container = this._containers.get(target);
+      if (!container) {
+        // Container might not exist if this came from a load event for a node
+        // we're not viewing.
+        continue;
+      }
+      if (type === "attributes" || type === "characterData") {
+        container.update();
+
+        // Auto refresh style properties on selected node when they change.
+        if (type === "attributes" && container.selected) {
+          requiresLayoutChange = true;
+        }
+      } else if (type === "childList") {
+        let isFromOuterHTML = mutation.removed.some((n) => {
+          return n === this._outerHTMLNode;
+        });
+
+        // Keep track of which node should be reselected after mutations.
+        if (isFromOuterHTML) {
+          reselectParent = target;
+          reselectChildIndex = this._outerHTMLChildIndex;
+
+          delete this._outerHTMLNode;
+          delete this._outerHTMLChildIndex;
+        }
+
+        container.childrenDirty = true;
+        // Update the children to take care of changes in the markup view DOM.
+        this._updateChildren(container, {flash: !isFromOuterHTML});
+      }
+    }
+
+    if (requiresLayoutChange) {
+      this._inspector.immediateLayoutChange();
+    }
+    this._waitForChildren().then((nodes) => {
+      this._flashMutatedNodes(aMutations);
+      this._inspector.emit("markupmutation", aMutations);
+
+      // Since the htmlEditor is absolutely positioned, a mutation may change
+      // the location in which it should be shown.
+      this.htmlEditor.refresh();
+
+      // If a node has had its outerHTML set, the parent node will be selected.
+      // Reselect the original node immediately.
+      if (this._inspector.selection.nodeFront === reselectParent) {
+        this.walker.children(reselectParent).then((o) => {
+          let node = o.nodes[reselectChildIndex];
+          let container = this._containers.get(node);
+          if (node && container) {
+            this.markNodeAsSelected(node, "outerhtml");
+            if (container.hasChildren) {
+              this.expandNode(node);
+            }
+          }
+        });
+
+      }
+    });
+  },
+
+  /**
+   * Given a list of mutations returned by the mutation observer, flash the
+   * corresponding containers to attract attention.
+   */
+  _flashMutatedNodes: function(aMutations) {
+    let addedOrEditedContainers = new Set();
+    let removedContainers = new Set();
+
+    for (let {type, target, added, removed} of aMutations) {
+      let container = this._containers.get(target);
+
+      if (container) {
+        if (type === "attributes" || type === "characterData") {
+          addedOrEditedContainers.add(container);
+        } else if (type === "childList") {
+          // If there has been removals, flash the parent
+          if (removed.length) {
+            removedContainers.add(container);
+          }
+
+          // If there has been additions, flash the nodes
+          added.forEach(added => {
+            let addedContainer = this._containers.get(added);
+            addedOrEditedContainers.add(addedContainer);
+
+            // The node may be added as a result of an append, in which case it
+            // it will have been removed from another container first, but in
+            // these cases we don't want to flash both the removal and the
+            // addition
+            removedContainers.delete(container);
+          });
+        }
+      }
+    }
+
+    for (let container of removedContainers) {
+      container.flashMutation();
+    }
+    for (let container of addedOrEditedContainers) {
+      container.flashMutation();
+    }
+  },
+
+  /**
+   * Make sure the given node's parents are expanded and the
+   * node is scrolled on to screen.
+   */
+  showNode: function(aNode, centered) {
+    let parent = aNode;
+
+    this.importNode(aNode);
+
+    while ((parent = parent.parentNode())) {
+      this.importNode(parent);
+      this.expandNode(parent);
+    }
+
+    return this._waitForChildren().then(() => {
+      return this._ensureVisible(aNode);
+    }).then(() => {
+      // Why is this not working?
+      this.layoutHelpers.scrollIntoViewIfNeeded(this._containers.get(aNode).editor.elt, centered);
+    });
+  },
+
+  /**
+   * Expand the container's children.
+   */
+  _expandContainer: function(aContainer) {
+    return this._updateChildren(aContainer, {expand: true}).then(() => {
+      aContainer.expanded = true;
+    });
+  },
+
+  /**
+   * Expand the node's children.
+   */
+  expandNode: function(aNode) {
+    let container = this._containers.get(aNode);
+    this._expandContainer(container);
+  },
+
+  /**
+   * Expand the entire tree beneath a container.
+   *
+   * @param aContainer The container to expand.
+   */
+  _expandAll: function(aContainer) {
+    return this._expandContainer(aContainer).then(() => {
+      let child = aContainer.children.firstChild;
+      let promises = [];
+      while (child) {
+        promises.push(this._expandAll(child.container));
+        child = child.nextSibling;
+      }
+      return promise.all(promises);
+    }).then(null, console.error);
+  },
+
+  /**
+   * Expand the entire tree beneath a node.
+   *
+   * @param aContainer The node to expand, or null
+   *        to start from the top.
+   */
+  expandAll: function(aNode) {
+    aNode = aNode || this._rootNode;
+    return this._expandAll(this._containers.get(aNode));
+  },
+
+  /**
+   * Collapse the node's children.
+   */
+  collapseNode: function(aNode) {
+    let container = this._containers.get(aNode);
+    container.expanded = false;
+  },
+
+  /**
+   * Retrieve the outerHTML for a remote node.
+   * @param aNode The NodeFront to get the outerHTML for.
+   * @returns A promise that will be resolved with the outerHTML.
+   */
+  getNodeOuterHTML: function(aNode) {
+    let def = promise.defer();
+    this.walker.outerHTML(aNode).then(longstr => {
+      longstr.string().then(outerHTML => {
+        longstr.release().then(null, console.error);
+        def.resolve(outerHTML);
+      });
+    });
+    return def.promise;
+  },
+
+  /**
+   * Retrieve the index of a child within its parent's children list.
+   * @param aNode The NodeFront to find the index of.
+   * @returns A promise that will be resolved with the integer index.
+   *          If the child cannot be found, returns -1
+   */
+  getNodeChildIndex: function(aNode) {
+    let def = promise.defer();
+    let parentNode = aNode.parentNode();
+
+    // Node may have been removed from the DOM, instead of throwing an error,
+    // return -1 indicating that it isn't inside of its parent children list.
+    if (!parentNode) {
+      def.resolve(-1);
+    } else {
+      this.walker.children(parentNode).then(children => {
+        def.resolve(children.nodes.indexOf(aNode));
+      });
+    }
+
+    return def.promise;
+  },
+
+  /**
+   * Retrieve the index of a child within its parent's children collection.
+   * @param aNode The NodeFront to find the index of.
+   * @param newValue The new outerHTML to set on the node.
+   * @param oldValue The old outerHTML that will be reverted to find the index of.
+   * @returns A promise that will be resolved with the integer index.
+   *          If the child cannot be found, returns -1
+   */
+  updateNodeOuterHTML: function(aNode, newValue, oldValue) {
+    let container = this._containers.get(aNode);
+    if (!container) {
+      return;
+    }
+
+    this.getNodeChildIndex(aNode).then((i) => {
+      this._outerHTMLChildIndex = i;
+      this._outerHTMLNode = aNode;
+
+      container.undo.do(() => {
+        this.walker.setOuterHTML(aNode, newValue);
+      }, () => {
+        this.walker.setOuterHTML(aNode, oldValue);
+      });
+    });
+  },
+
+  /**
+   * Open an editor in the UI to allow editing of a node's outerHTML.
+   * @param aNode The NodeFront to edit.
+   */
+  beginEditingOuterHTML: function(aNode) {
+    this.getNodeOuterHTML(aNode).then((oldValue)=> {
+      let container = this._containers.get(aNode);
+      if (!container) {
+        return;
+      }
+      this.htmlEditor.show(container.tagLine, oldValue);
+      this.htmlEditor.once("popuphidden", (e, aCommit, aValue) => {
+        // Need to focus the <html> element instead of the frame / window
+        // in order to give keyboard focus back to doc (from editor).
+        this._frame.contentDocument.documentElement.focus();
+
+        if (aCommit) {
+          this.updateNodeOuterHTML(aNode, aValue, oldValue);
+        }
+      });
+    });
+  },
+
+  /**
+   * Mark the given node expanded.
+   * @param {NodeFront} aNode The NodeFront to mark as expanded.
+   * @param {Boolean} aExpanded Whether the expand or collapse.
+   * @param {Boolean} aExpandDescendants Whether to expand all descendants too
+   */
+  setNodeExpanded: function(aNode, aExpanded, aExpandDescendants) {
+    if (aExpanded) {
+      if (aExpandDescendants) {
+        this.expandAll(aNode);
+      } else {
+        this.expandNode(aNode);
+      }
+    } else {
+      this.collapseNode(aNode);
+    }
+  },
+
+  /**
+   * Mark the given node selected, and update the inspector.selection
+   * object's NodeFront to keep consistent state between UI and selection.
+   * @param aNode The NodeFront to mark as selected.
+   */
+  markNodeAsSelected: function(aNode, reason) {
+    let container = this._containers.get(aNode);
+    if (this._selectedContainer === container) {
+      return false;
+    }
+    if (this._selectedContainer) {
+      this._selectedContainer.selected = false;
+    }
+    this._selectedContainer = container;
+    if (aNode) {
+      this._selectedContainer.selected = true;
+    }
+
+    this._inspector.selection.setNodeFront(aNode, reason || "nodeselected");
+    return true;
+  },
+
+  /**
+   * Make sure that every ancestor of the selection are updated
+   * and included in the list of visible children.
+   */
+  _ensureVisible: function(node) {
+    while (node) {
+      let container = this._containers.get(node);
+      let parent = node.parentNode();
+      if (!container.elt.parentNode) {
+        let parentContainer = this._containers.get(parent);
+        if (parentContainer) {
+          parentContainer.childrenDirty = true;
+          this._updateChildren(parentContainer, {expand: node});
+        }
+      }
+
+      node = parent;
+    }
+    return this._waitForChildren();
+  },
+
+  /**
+   * Unmark selected node (no node selected).
+   */
+  unmarkSelectedNode: function() {
+    if (this._selectedContainer) {
+      this._selectedContainer.selected = false;
+      this._selectedContainer = null;
+    }
+  },
+
+  /**
+   * Called when the markup panel initiates a change on a node.
+   */
+  nodeChanged: function(aNode) {
+    if (aNode === this._inspector.selection.nodeFront) {
+      this._inspector.change("markupview");
+    }
+  },
+
+  /**
+   * Check if the current selection is a descendent of the container.
+   * if so, make sure it's among the visible set for the container,
+   * and set the dirty flag if needed.
+   * @returns The node that should be made visible, if any.
+   */
+  _checkSelectionVisible: function(aContainer) {
+    let centered = null;
+    let node = this._inspector.selection.nodeFront;
+    while (node) {
+      if (node.parentNode() === aContainer.node) {
+        centered = node;
+        break;
+      }
+      node = node.parentNode();
+    }
+
+    return centered;
+  },
+
+  /**
+   * Make sure all children of the given container's node are
+   * imported and attached to the container in the right order.
+   *
+   * Children need to be updated only in the following circumstances:
+   * a) We just imported this node and have never seen its children.
+   *    container.childrenDirty will be set by importNode in this case.
+   * b) We received a childList mutation on the node.
+   *    container.childrenDirty will be set in that case too.
+   * c) We have changed the selection, and the path to that selection
+   *    wasn't loaded in a previous children request (because we only
+   *    grab a subset).
+   *    container.childrenDirty should be set in that case too!
+   *
+   * @param MarkupContainer aContainer
+   *        The markup container whose children need updating
+   * @param Object options
+   *        Options are {expand:boolean,flash:boolean}
+   * @return a promise that will be resolved when the children are ready
+   * (which may be immediately).
+   */
+  _updateChildren: function(aContainer, options) {
+    let expand = options && options.expand;
+    let flash = options && options.flash;
+
+    aContainer.hasChildren = aContainer.node.hasChildren;
+
+    if (!this._queuedChildUpdates) {
+      this._queuedChildUpdates = new Map();
+    }
+
+    if (this._queuedChildUpdates.has(aContainer)) {
+      return this._queuedChildUpdates.get(aContainer);
+    }
+
+    if (!aContainer.childrenDirty) {
+      return promise.resolve(aContainer);
+    }
+
+    if (!aContainer.hasChildren) {
+      while (aContainer.children.firstChild) {
+        aContainer.children.removeChild(aContainer.children.firstChild);
+      }
+      aContainer.childrenDirty = false;
+      return promise.resolve(aContainer);
+    }
+
+    // If we're not expanded (or asked to update anyway), we're done for
+    // now.  Note that this will leave the childrenDirty flag set, so when
+    // expanded we'll refresh the child list.
+    if (!(aContainer.expanded || expand)) {
+      return promise.resolve(aContainer);
+    }
+
+    // We're going to issue a children request, make sure it includes the
+    // centered node.
+    let centered = this._checkSelectionVisible(aContainer);
+
+    // Children aren't updated yet, but clear the childrenDirty flag anyway.
+    // If the dirty flag is re-set while we're fetching we'll need to fetch
+    // again.
+    aContainer.childrenDirty = false;
+    let updatePromise = this._getVisibleChildren(aContainer, centered).then(children => {
+      if (!this._containers) {
+        return promise.reject("markup view destroyed");
+      }
+      this._queuedChildUpdates.delete(aContainer);
+
+      // If children are dirty, we got a change notification for this node
+      // while the request was in progress, we need to do it again.
+      if (aContainer.childrenDirty) {
+        return this._updateChildren(aContainer, {expand: centered});
+      }
+
+      let fragment = this.doc.createDocumentFragment();
+
+      for (let child of children.nodes) {
+        let container = this.importNode(child, flash);
+        fragment.appendChild(container.elt);
+      }
+
+      while (aContainer.children.firstChild) {
+        aContainer.children.removeChild(aContainer.children.firstChild);
+      }
+
+      if (!(children.hasFirst && children.hasLast)) {
+        let data = {
+          showing: this.strings.GetStringFromName("markupView.more.showing"),
+          showAll: this.strings.formatStringFromName(
+                    "markupView.more.showAll",
+                    [aContainer.node.numChildren.toString()], 1),
+          allButtonClick: () => {
+            aContainer.maxChildren = -1;
+            aContainer.childrenDirty = true;
+            this._updateChildren(aContainer);
+          }
+        };
+
+        if (!children.hasFirst) {
+          let span = this.template("more-nodes", data);
+          fragment.insertBefore(span, fragment.firstChild);
+        }
+        if (!children.hasLast) {
+          let span = this.template("more-nodes", data);
+          fragment.appendChild(span);
+        }
+      }
+
+      aContainer.children.appendChild(fragment);
+      return aContainer;
+    }).then(null, console.error);
+    this._queuedChildUpdates.set(aContainer, updatePromise);
+    return updatePromise;
+  },
+
+  _waitForChildren: function() {
+    if (!this._queuedChildUpdates) {
+      return promise.resolve(undefined);
+    }
+    return promise.all([updatePromise for (updatePromise of this._queuedChildUpdates.values())]);
+  },
+
+  /**
+   * Return a list of the children to display for this container.
+   */
+  _getVisibleChildren: function(aContainer, aCentered) {
+    let maxChildren = aContainer.maxChildren || this.maxChildren;
+    if (maxChildren == -1) {
+      maxChildren = undefined;
+    }
+
+    return this.walker.children(aContainer.node, {
+      maxNodes: maxChildren,
+      center: aCentered
+    });
+  },
+
+  /**
+   * Tear down the markup panel.
+   */
+  destroy: function() {
+    if (this._destroyer) {
+      return this._destroyer;
+    }
+
+    // Note that if the toolbox is closed, this will work fine, but will fail
+    // in case the browser is closed and will trigger a noSuchActor message.
+    this._destroyer = this._hideBoxModel();
+
+    this._hoveredNode = null;
+    this._inspector.toolbox.off("picker-node-hovered", this._onToolboxPickerHover);
+
+    this.htmlEditor.destroy();
+    this.htmlEditor = null;
+
+    this.undo.destroy();
+    this.undo = null;
+
+    this.popup.destroy();
+    this.popup = null;
+
+    this._frame.removeEventListener("focus", this._boundFocus, false);
+    this._boundFocus = null;
+
+    if (this._boundUpdatePreview) {
+      this._frame.contentWindow.removeEventListener("scroll",
+        this._boundUpdatePreview, true);
+      this._boundUpdatePreview = null;
+    }
+
+    if (this._boundResizePreview) {
+      this._frame.contentWindow.removeEventListener("resize",
+        this._boundResizePreview, true);
+      this._frame.contentWindow.removeEventListener("overflow",
+        this._boundResizePreview, true);
+      this._frame.contentWindow.removeEventListener("underflow",
+        this._boundResizePreview, true);
+      this._boundResizePreview = null;
+    }
+
+    this._frame.contentWindow.removeEventListener("keydown",
+      this._boundKeyDown, false);
+    this._boundKeyDown = null;
+
+    this._inspector.selection.off("new-node-front", this._boundOnNewSelection);
+    this._boundOnNewSelection = null;
+
+    this.walker.off("mutations", this._boundMutationObserver)
+    this._boundMutationObserver = null;
+
+    this._elt.removeEventListener("mousemove", this._onMouseMove, false);
+    this._elt.removeEventListener("mouseleave", this._onMouseLeave, false);
+    this._elt = null;
+
+    for (let [key, container] of this._containers) {
+      container.destroy();
+    }
+    this._containers = null;
+
+    this.tooltip.destroy();
+    this.tooltip = null;
+
+    return this._destroyer;
+  },
+
+  /**
+   * Initialize the preview panel.
+   */
+  _initPreview: function() {
+    this._previewEnabled = Services.prefs.getBoolPref("devtools.inspector.markupPreview");
+    if (!this._previewEnabled) {
+      return;
+    }
+
+    this._previewBar = this.doc.querySelector("#previewbar");
+    this._preview = this.doc.querySelector("#preview");
+    this._viewbox = this.doc.querySelector("#viewbox");
+
+    this._previewBar.classList.remove("disabled");
+
+    this._previewWidth = this._preview.getBoundingClientRect().width;
+
+    this._boundResizePreview = this._resizePreview.bind(this);
+    this._frame.contentWindow.addEventListener("resize",
+      this._boundResizePreview, true);
+    this._frame.contentWindow.addEventListener("overflow",
+      this._boundResizePreview, true);
+    this._frame.contentWindow.addEventListener("underflow",
+      this._boundResizePreview, true);
+
+    this._boundUpdatePreview = this._updatePreview.bind(this);
+    this._frame.contentWindow.addEventListener("scroll",
+      this._boundUpdatePreview, true);
+    this._updatePreview();
+  },
+
+  /**
+   * Move the preview viewbox.
+   */
+  _updatePreview: function() {
+    if (!this._previewEnabled) {
+      return;
+    }
+    let win = this._frame.contentWindow;
+
+    if (win.scrollMaxY == 0) {
+      this._previewBar.classList.add("disabled");
+      return;
+    }
+
+    this._previewBar.classList.remove("disabled");
+
+    let ratio = this._previewWidth / PREVIEW_AREA;
+    let width = ratio * win.innerWidth;
+
+    let height = ratio * (win.scrollMaxY + win.innerHeight);
+    let scrollTo
+    if (height >= win.innerHeight) {
+      scrollTo = -(height - win.innerHeight) * (win.scrollY / win.scrollMaxY);
+      this._previewBar.setAttribute("style", "height:" + height +
+        "px;transform:translateY(" + scrollTo + "px)");
+    } else {
+      this._previewBar.setAttribute("style", "height:100%");
+    }
+
+    let bgSize = ~~width + "px " + ~~height + "px";
+    this._preview.setAttribute("style", "background-size:" + bgSize);
+
+    let height = ~~(win.innerHeight * ratio) + "px";
+    let top = ~~(win.scrollY * ratio) + "px";
+    this._viewbox.setAttribute("style", "height:" + height +
+      ";transform: translateY(" + top + ")");
+  },
+
+  /**
+   * Hide the preview while resizing, to avoid slowness.
+   */
+  _resizePreview: function() {
+    if (!this._previewEnabled) {
+      return;
+    }
+    let win = this._frame.contentWindow;
+    this._previewBar.classList.add("hide");
+    win.clearTimeout(this._resizePreviewTimeout);
+
+    win.setTimeout(function() {
+      this._updatePreview();
+      this._previewBar.classList.remove("hide");
+    }.bind(this), 1000);
+  }
+};
+
+
+/**
+ * The main structure for storing a document node in the markup
+ * tree.  Manages creation of the editor for the node and
+ * a <ul> for placing child elements, and expansion/collapsing
+ * of the element.
+ *
+ * @param MarkupView aMarkupView
+ *        The markup view that owns this container.
+ * @param DOMNode aNode
+ *        The node to display.
+ * @param Inspector aInspector
+ *        The inspector tool container the markup-view
+ */
+function MarkupContainer(aMarkupView, aNode, aInspector) {
+  this.markup = aMarkupView;
+  this.doc = this.markup.doc;
+  this.undo = this.markup.undo;
+  this.node = aNode;
+  this._inspector = aInspector;
+
+  if (aNode.nodeType == Ci.nsIDOMNode.TEXT_NODE) {
+    this.editor = new TextEditor(this, aNode, "text");
+  } else if (aNode.nodeType == Ci.nsIDOMNode.COMMENT_NODE) {
+    this.editor = new TextEditor(this, aNode, "comment");
+  } else if (aNode.nodeType == Ci.nsIDOMNode.ELEMENT_NODE) {
+    this.editor = new ElementEditor(this, aNode);
+  } else if (aNode.nodeType == Ci.nsIDOMNode.DOCUMENT_TYPE_NODE) {
+    this.editor = new DoctypeEditor(this, aNode);
+  } else {
+    this.editor = new GenericEditor(this, aNode);
+  }
+
+  // The template will fill the following properties
+  this.elt = null;
+  this.expander = null;
+  this.tagState = null;
+  this.tagLine = null;
+  this.children = null;
+  this.markup.template("container", this);
+  this.elt.container = this;
+  this.children.container = this;
+
+  // Expanding/collapsing the node on dblclick of the whole tag-line element
+  this._onToggle = this._onToggle.bind(this);
+  this.elt.addEventListener("dblclick", this._onToggle, false);
+  this.expander.addEventListener("click", this._onToggle, false);
+
+  // Appending the editor element and attaching event listeners
+  this.tagLine.appendChild(this.editor.elt);
+
+  this._onMouseDown = this._onMouseDown.bind(this);
+  this.elt.addEventListener("mousedown", this._onMouseDown, false);
+
+  // Prepare the image preview tooltip data if any
+  this._prepareImagePreview();
+}
+
+MarkupContainer.prototype = {
+  toString: function() {
+    return "[MarkupContainer for " + this.node + "]";
+  },
+
+  isPreviewable: function() {
+    if (this.node.tagName) {
+      let tagName = this.node.tagName.toLowerCase();
+      let srcAttr = this.editor.getAttributeElement("src");
+      let isImage = tagName === "img" && srcAttr;
+      let isCanvas = tagName === "canvas";
+
+      return isImage || isCanvas;
+    } else {
+      return false;
+    }
+  },
+
+  /**
+   * If the node is an image or canvas (@see isPreviewable), then get the
+   * image data uri from the server so that it can then later be previewed in
+   * a tooltip if needed.
+   * Stores a promise in this.tooltipData.data that resolves when the data has
+   * been retrieved
+   */
+  _prepareImagePreview: function() {
+    if (this.isPreviewable()) {
+      // Get the image data for later so that when the user actually hovers over
+      // the element, the tooltip does contain the image
+      let def = promise.defer();
+
+      this.tooltipData = {
+        target: this.editor.getAttributeElement("src") || this.editor.tag,
+        data: def.promise
+      };
+
+      let maxDim = Services.prefs.getIntPref("devtools.inspector.imagePreviewTooltipSize");
+      this.node.getImageData(maxDim).then(data => {
+        data.data.string().then(str => {
+          let res = {data: str, size: data.size};
+          // Resolving the data promise and, to always keep tooltipData.data
+          // as a promise, create a new one that resolves immediately
+          def.resolve(res);
+          this.tooltipData.data = promise.resolve(res);
+        });
+      }, () => {
+        this.tooltipData.data = promise.reject();
+      });
+    }
+  },
+
+  /**
+   * Executed by MarkupView._isImagePreviewTarget which is itself called when the
+   * mouse hovers over a target in the markup-view.
+   * Checks if the target is indeed something we want to have an image tooltip
+   * preview over and, if so, inserts content into the tooltip.
+   * @return a promise that resolves when the content has been inserted or
+   * rejects if no preview is required. This promise is then used by Tooltip.js
+   * to decide if/when to show the tooltip
+   */
+  _isImagePreviewTarget: function(target, tooltip) {
+    if (!this.tooltipData || this.tooltipData.target !== target) {
+      return promise.reject();
+    }
+
+    return this.tooltipData.data.then(({data, size}) => {
+      tooltip.setImageContent(data, size);
+    }, () => {
+      tooltip.setBrokenImageContent();
+    });
+  },
+
+  copyImageDataUri: function() {
+    // We need to send again a request to gettooltipData even if one was sent for
+    // the tooltip, because we want the full-size image
+    this.node.getImageData().then(data => {
+      data.data.string().then(str => {
+        clipboardHelper.copyString(str, this.markup.doc);
+      });
+    });
+  },
+
+  /**
+   * True if the current node has children.  The MarkupView
+   * will set this attribute for the MarkupContainer.
+   */
+  _hasChildren: false,
+
+  get hasChildren() {
+    return this._hasChildren;
+  },
+
+  set hasChildren(aValue) {
+    this._hasChildren = aValue;
+    if (aValue) {
+      this.expander.style.visibility = "visible";
+    } else {
+      this.expander.style.visibility = "hidden";
+    }
+  },
+
+  parentContainer: function() {
+    return this.elt.parentNode ? this.elt.parentNode.container : null;
+  },
+
+  /**
+   * True if the node has been visually expanded in the tree.
+   */
+  get expanded() {
+    return !this.elt.classList.contains("collapsed");
+  },
+
+  set expanded(aValue) {
+    if (aValue && this.elt.classList.contains("collapsed")) {
+      // Expanding a node means cloning its "inline" closing tag into a new
+      // tag-line that the user can interact with and showing the children.
+      if (this.editor instanceof ElementEditor) {
+        let closingTag = this.elt.querySelector(".close");
+        if (closingTag) {
+          if (!this.closeTagLine) {
+            let line = this.markup.doc.createElement("div");
+            line.classList.add("tag-line");
+
+            let tagState = this.markup.doc.createElement("div");
+            tagState.classList.add("tag-state");
+            line.appendChild(tagState);
+
+            line.appendChild(closingTag.cloneNode(true));
+
+            this.closeTagLine = line;
+          }
+          this.elt.appendChild(this.closeTagLine);
+        }
+      }
+      this.elt.classList.remove("collapsed");
+      this.expander.setAttribute("open", "");
+      this.hovered = false;
+    } else if (!aValue) {
+      if (this.editor instanceof ElementEditor && this.closeTagLine) {
+        this.elt.removeChild(this.closeTagLine);
+      }
+      this.elt.classList.add("collapsed");
+      this.expander.removeAttribute("open");
+    }
+  },
+
+  _onToggle: function(event) {
+    this.markup.navigate(this);
+    if(this.hasChildren) {
+      this.markup.setNodeExpanded(this.node, !this.expanded, event.altKey);
+    }
+    event.stopPropagation();
+  },
+
+  _onMouseDown: function(event) {
+    let target = event.target;
+
+    // Target may be a resource link (generated by the output-parser)
+    if (target.nodeName === "a") {
+      event.stopPropagation();
+      event.preventDefault();
+      let browserWin = this.markup._inspector.target
+                           .tab.ownerDocument.defaultView;
+      browserWin.openUILinkIn(target.href, "tab");
+    }
+    // Or it may be the "show more nodes" button (which already has its onclick)
+    // Else, it's the container itself
+    else if (target.nodeName !== "button") {
+      this.hovered = false;
+      this.markup.navigate(this);
+      event.stopPropagation();
+    }
+  },
+
+  /**
+   * Temporarily flash the container to attract attention.
+   * Used for markup mutations.
+   */
+  flashMutation: function() {
+    if (!this.selected) {
+      let contentWin = this.markup._frame.contentWindow;
+      this.flashed = true;
+      if (this._flashMutationTimer) {
+        contentWin.clearTimeout(this._flashMutationTimer);
+        this._flashMutationTimer = null;
+      }
+      this._flashMutationTimer = contentWin.setTimeout(() => {
+        this.flashed = false;
+      }, CONTAINER_FLASHING_DURATION);
+    }
+  },
+
+  set flashed(aValue) {
+    if (aValue) {
+      // Make sure the animation class is not here
+      this.tagState.classList.remove("flash-out");
+
+      // Change the background
+      this.tagState.classList.add("theme-bg-contrast");
+
+      // Change the text color
+      this.editor.elt.classList.add("theme-fg-contrast");
+      [].forEach.call(
+        this.editor.elt.querySelectorAll("[class*=theme-fg-color]"),
+        span => span.classList.add("theme-fg-contrast")
+      );
+    } else {
+      // Add the animation class to smoothly remove the background
+      this.tagState.classList.add("flash-out");
+
+      // Remove the background
+      this.tagState.classList.remove("theme-bg-contrast");
+
+      // Remove the text color
+      this.editor.elt.classList.remove("theme-fg-contrast");
+      [].forEach.call(
+        this.editor.elt.querySelectorAll("[class*=theme-fg-color]"),
+        span => span.classList.remove("theme-fg-contrast")
+      );
+    }
+  },
+
+  _hovered: false,
+
+  /**
+   * Highlight the currently hovered tag + its closing tag if necessary
+   * (that is if the tag is expanded)
+   */
+  set hovered(aValue) {
+    this.tagState.classList.remove("flash-out");
+    this._hovered = aValue;
+    if (aValue) {
+      if (!this.selected) {
+        this.tagState.classList.add("theme-bg-darker");
+      }
+      if (this.closeTagLine) {
+        this.closeTagLine.querySelector(".tag-state").classList.add(
+          "theme-bg-darker");
+      }
+    } else {
+      this.tagState.classList.remove("theme-bg-darker");
+      if (this.closeTagLine) {
+        this.closeTagLine.querySelector(".tag-state").classList.remove(
+          "theme-bg-darker");
+      }
+    }
+  },
+
+  /**
+   * True if the container is visible in the markup tree.
+   */
+  get visible() {
+    return this.elt.getBoundingClientRect().height > 0;
+  },
+
+  /**
+   * True if the container is currently selected.
+   */
+  _selected: false,
+
+  get selected() {
+    return this._selected;
+  },
+
+  set selected(aValue) {
+    this.tagState.classList.remove("flash-out");
+    this._selected = aValue;
+    this.editor.selected = aValue;
+    if (this._selected) {
+      this.tagLine.setAttribute("selected", "");
+      this.tagState.classList.add("theme-selected");
+    } else {
+      this.tagLine.removeAttribute("selected");
+      this.tagState.classList.remove("theme-selected");
+    }
+  },
+
+  /**
+   * Update the container's editor to the current state of the
+   * viewed node.
+   */
+  update: function() {
+    if (this.editor.update) {
+      this.editor.update();
+    }
+  },
+
+  /**
+   * Try to put keyboard focus on the current editor.
+   */
+  focus: function() {
+    let focusable = this.editor.elt.querySelector("[tabindex]");
+    if (focusable) {
+      focusable.focus();
+    }
+  },
+
+  /**
+   * Get rid of event listeners and references, when the container is no longer
+   * needed
+   */
+  destroy: function() {
+    // Recursively destroy children containers
+    let firstChild;
+    while (firstChild = this.children.firstChild) {
+      // Not all children of a container are containers themselves
+      // ("show more nodes" button is one example)
+      if (firstChild.container) {
+        firstChild.container.destroy();
+      }
+      this.children.removeChild(firstChild);
+    }
+
+    // Remove event listeners
+    this.elt.removeEventListener("dblclick", this._onToggle, false);
+    this.elt.removeEventListener("mousedown", this._onMouseDown, false);
+    this.expander.removeEventListener("click", this._onToggle, false);
+
+    // Destroy my editor
+    this.editor.destroy();
+  }
+};
+
+
+/**
+ * Dummy container node used for the root document element.
+ */
+function RootContainer(aMarkupView, aNode) {
+  this.doc = aMarkupView.doc;
+  this.elt = this.doc.createElement("ul");
+  this.elt.container = this;
+  this.children = this.elt;
+  this.node = aNode;
+  this.toString = () => "[root container]";
+}
+
+RootContainer.prototype = {
+  hasChildren: true,
+  expanded: true,
+  update: function() {},
+  destroy: function() {}
+};
+
+/**
+ * Creates an editor for simple nodes.
+ */
+function GenericEditor(aContainer, aNode) {
+  this.elt = aContainer.doc.createElement("span");
+  this.elt.className = "editor";
+  this.elt.textContent = aNode.nodeName;
+}
+
+GenericEditor.prototype = {
+  destroy: function() {}
+};
+
+/**
+ * Creates an editor for a DOCTYPE node.
+ *
+ * @param MarkupContainer aContainer The container owning this editor.
+ * @param DOMNode aNode The node being edited.
+ */
+function DoctypeEditor(aContainer, aNode) {
+  this.elt = aContainer.doc.createElement("span");
+  this.elt.className = "editor comment";
+  this.elt.textContent = '<!DOCTYPE ' + aNode.name +
+     (aNode.publicId ? ' PUBLIC "' +  aNode.publicId + '"': '') +
+     (aNode.systemId ? ' "' + aNode.systemId + '"' : '') +
+     '>';
+}
+
+DoctypeEditor.prototype = {
+  destroy: function() {}
+};
+
+/**
+ * Creates a simple text editor node, used for TEXT and COMMENT
+ * nodes.
+ *
+ * @param MarkupContainer aContainer The container owning this editor.
+ * @param DOMNode aNode The node being edited.
+ * @param string aTemplate The template id to use to build the editor.
+ */
+function TextEditor(aContainer, aNode, aTemplate) {
+  this.node = aNode;
+  this._selected = false;
+
+  aContainer.markup.template(aTemplate, this);
+
+  editableField({
+    element: this.value,
+    stopOnReturn: true,
+    trigger: "dblclick",
+    multiline: true,
+    done: (aVal, aCommit) => {
+      if (!aCommit) {
+        return;
+      }
+      this.node.getNodeValue().then(longstr => {
+        longstr.string().then(oldValue => {
+          longstr.release().then(null, console.error);
+
+          aContainer.undo.do(() => {
+            this.node.setNodeValue(aVal).then(() => {
+              aContainer.markup.nodeChanged(this.node);
+            });
+          }, () => {
+            this.node.setNodeValue(oldValue).then(() => {
+              aContainer.markup.nodeChanged(this.node);
+            })
+          });
+        });
+      });
+    }
+  });
+
+  this.update();
+}
+
+TextEditor.prototype = {
+  get selected() this._selected,
+  set selected(aValue) {
+    if (aValue === this._selected) {
+      return;
+    }
+    this._selected = aValue;
+    this.update();
+  },
+
+  update: function() {
+    if (!this.selected || !this.node.incompleteValue) {
+      let text = this.node.shortValue;
+      // XXX: internationalize the elliding
+      if (this.node.incompleteValue) {
+        text += "…";
+      }
+      this.value.textContent = text;
+    } else {
+      let longstr = null;
+      this.node.getNodeValue().then(ret => {
+        longstr = ret;
+        return longstr.string();
+      }).then(str => {
+        longstr.release().then(null, console.error);
+        if (this.selected) {
+          this.value.textContent = str;
+        }
+      }).then(null, console.error);
+    }
+  },
+
+  destroy: function() {}
+};
+
+/**
+ * Creates an editor for an Element node.
+ *
+ * @param MarkupContainer aContainer The container owning this editor.
+ * @param Element aNode The node being edited.
+ */
+function ElementEditor(aContainer, aNode) {
+  this.doc = aContainer.doc;
+  this.undo = aContainer.undo;
+  this.template = aContainer.markup.template.bind(aContainer.markup);
+  this.container = aContainer;
+  this.markup = this.container.markup;
+  this.node = aNode;
+
+  this.attrs = {};
+
+  // The templates will fill the following properties
+  this.elt = null;
+  this.tag = null;
+  this.closeTag = null;
+  this.attrList = null;
+  this.newAttr = null;
+  this.closeElt = null;
+
+  // Create the main editor
+  this.template("element", this);
+
+  if (aNode.isLocal_toBeDeprecated()) {
+    this.rawNode = aNode.rawNode();
+  }
+
+  // Make the tag name editable (unless this is a remote node or
+  // a document element)
+  if (this.rawNode && !aNode.isDocumentElement) {
+    this.tag.setAttribute("tabindex", "0");
+    editableField({
+      element: this.tag,
+      trigger: "dblclick",
+      stopOnReturn: true,
+      done: this.onTagEdit.bind(this),
+    });
+  }
+
+  // Make the new attribute space editable.
+  editableField({
+    element: this.newAttr,
+    trigger: "dblclick",
+    stopOnReturn: true,
+    contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
+    popup: this.markup.popup,
+    done: (aVal, aCommit) => {
+      if (!aCommit) {
+        return;
+      }
+
+      try {
+        let doMods = this._startModifyingAttributes();
+        let undoMods = this._startModifyingAttributes();
+        this._applyAttributes(aVal, null, doMods, undoMods);
+        this.undo.do(() => {
+          doMods.apply();
+        }, function() {
+          undoMods.apply();
+        });
+      } catch(x) {
+        console.error(x);
+      }
+    }
+  });
+
+  let tagName = this.node.nodeName.toLowerCase();
+  this.tag.textContent = tagName;
+  this.closeTag.textContent = tagName;
+
+  this.update();
+}
+
+ElementEditor.prototype = {
+  /**
+   * Update the state of the editor from the node.
+   */
+  update: function() {
+    let attrs = this.node.attributes;
+    if (!attrs) {
+      return;
+    }
+
+    // Hide all the attribute editors, they'll be re-shown if they're
+    // still applicable.  Don't update attributes that are being
+    // actively edited.
+    let attrEditors = this.attrList.querySelectorAll(".attreditor");
+    for (let i = 0; i < attrEditors.length; i++) {
+      if (!attrEditors[i].inplaceEditor) {
+        attrEditors[i].style.display = "none";
+      }
+    }
+
+    // Get the attribute editor for each attribute that exists on
+    // the node and show it.
+    for (let attr of attrs) {
+      let attribute = this._createAttribute(attr);
+      if (!attribute.inplaceEditor) {
+        attribute.style.removeProperty("display");
+      }
+    }
+  },
+
+  _startModifyingAttributes: function() {
+    return this.node.startModifyingAttributes();
+  },
+
+  /**
+   * Get the element used for one of the attributes of this element
+   * @param string attrName The name of the attribute to get the element for
+   * @return DOMElement
+   */
+  getAttributeElement: function(attrName) {
+    return this.attrList.querySelector(
+      ".attreditor[data-attr=" + attrName + "] .attr-value");
+  },
+
+  _createAttribute: function(aAttr, aBefore = null) {
+    // Create the template editor, which will save some variables here.
+    let data = {
+      attrName: aAttr.name,
+    };
+    this.template("attribute", data);
+    var {attr, inner, name, val} = data;
+
+    // Double quotes need to be handled specially to prevent DOMParser failing.
+    // name="v"a"l"u"e" when editing -> name='v"a"l"u"e"'
+    // name="v'a"l'u"e" when editing -> name="v'a&quot;l'u&quot;e"
+    let editValueDisplayed = aAttr.value || "";
+    let hasDoubleQuote = editValueDisplayed.contains('"');
+    let hasSingleQuote = editValueDisplayed.contains("'");
+    let initial = aAttr.name + '="' + editValueDisplayed + '"';
+
+    // Can't just wrap value with ' since the value contains both " and '.
+    if (hasDoubleQuote && hasSingleQuote) {
+        editValueDisplayed = editValueDisplayed.replace(/\"/g, "&quot;");
+        initial = aAttr.name + '="' + editValueDisplayed + '"';
+    }
+
+    // Wrap with ' since there are no single quotes in the attribute value.
+    if (hasDoubleQuote && !hasSingleQuote) {
+        initial = aAttr.name + "='" + editValueDisplayed + "'";
+    }
+
+    // Make the attribute editable.
+    editableField({
+      element: inner,
+      trigger: "dblclick",
+      stopOnReturn: true,
+      selectAll: false,
+      initial: initial,
+      contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
+      popup: this.markup.popup,
+      start: (aEditor, aEvent) => {
+        // If the editing was started inside the name or value areas,
+        // select accordingly.
+        if (aEvent && aEvent.target === name) {
+          aEditor.input.setSelectionRange(0, name.textContent.length);
+        } else if (aEvent && aEvent.target === val) {
+          let length = editValueDisplayed.length;
+          let editorLength = aEditor.input.value.length;
+          let start = editorLength - (length + 1);
+          aEditor.input.setSelectionRange(start, start + length);
+        } else {
+          aEditor.input.select();
+        }
+      },
+      done: (aVal, aCommit) => {
+        if (!aCommit || aVal === initial) {
+          return;
+        }
+
+        let doMods = this._startModifyingAttributes();
+        let undoMods = this._startModifyingAttributes();
+
+        // Remove the attribute stored in this editor and re-add any attributes
+        // parsed out of the input element. Restore original attribute if
+        // parsing fails.
+        try {
+          this._saveAttribute(aAttr.name, undoMods);
+          doMods.removeAttribute(aAttr.name);
+          this._applyAttributes(aVal, attr, doMods, undoMods);
+          this.undo.do(() => {
+            doMods.apply();
+          }, () => {
+            undoMods.apply();
+          })
+        } catch(ex) {
+          console.error(ex);
+        }
+      }
+    });
+
+    // Figure out where we should place the attribute.
+    let before = aBefore;
+    if (aAttr.name == "id") {
+      before = this.attrList.firstChild;
+    } else if (aAttr.name == "class") {
+      let idNode = this.attrs["id"];
+      before = idNode ? idNode.nextSibling : this.attrList.firstChild;
+    }
+    this.attrList.insertBefore(attr, before);
+
+    // Remove the old version of this attribute from the DOM.
+    let oldAttr = this.attrs[aAttr.name];
+    if (oldAttr && oldAttr.parentNode) {
+      oldAttr.parentNode.removeChild(oldAttr);
+    }
+
+    this.attrs[aAttr.name] = attr;
+
+    let collapsedValue;
+    if (aAttr.value.match(COLLAPSE_DATA_URL_REGEX)) {
+      collapsedValue = truncateString(aAttr.value, COLLAPSE_DATA_URL_LENGTH);
+    } else {
+      collapsedValue = truncateString(aAttr.value, COLLAPSE_ATTRIBUTE_LENGTH);
+    }
+
+    name.textContent = aAttr.name;
+    val.textContent = collapsedValue;
+
+    return attr;
+  },
+
+  /**
+   * Parse a user-entered attribute string and apply the resulting
+   * attributes to the node.  This operation is undoable.
+   *
+   * @param string aValue the user-entered value.
+   * @param Element aAttrNode the attribute editor that created this
+   *        set of attributes, used to place new attributes where the
+   *        user put them.
+   */
+  _applyAttributes: function(aValue, aAttrNode, aDoMods, aUndoMods) {
+    let attrs = parseAttributeValues(aValue, this.doc);
+    for (let attr of attrs) {
+      // Create an attribute editor next to the current attribute if needed.
+      this._createAttribute(attr, aAttrNode ? aAttrNode.nextSibling : null);
+      this._saveAttribute(attr.name, aUndoMods);
+      aDoMods.setAttribute(attr.name, attr.value);
+    }
+  },
+
+  /**
+   * Saves the current state of the given attribute into an attribute
+   * modification list.
+   */
+  _saveAttribute: function(aName, aUndoMods) {
+    let node = this.node;
+    if (node.hasAttribute(aName)) {
+      let oldValue = node.getAttribute(aName);
+      aUndoMods.setAttribute(aName, oldValue);
+    } else {
+      aUndoMods.removeAttribute(aName);
+    }
+  },
+
+  /**
+   * Called when the tag name editor has is done editing.
+   */
+  onTagEdit: function(aVal, aCommit) {
+    if (!aCommit || aVal == this.rawNode.tagName) {
+      return;
+    }
+
+    // Create a new element with the same attributes as the
+    // current element and prepare to replace the current node
+    // with it.
+    try {
+      var newElt = nodeDocument(this.rawNode).createElement(aVal);
+    } catch(x) {
+      // Failed to create a new element with that tag name, ignore
+      // the change.
+      return;
+    }
+
+    let attrs = this.rawNode.attributes;
+
+    for (let i = 0 ; i < attrs.length; i++) {
+      newElt.setAttribute(attrs[i].name, attrs[i].value);
+    }
+    let newFront = this.markup.walker.frontForRawNode(newElt);
+    let newContainer = this.markup.importNode(newFront);
+
+    // Retain the two nodes we care about here so we can undo.
+    let walker = this.markup.walker;
+    promise.all([
+      walker.retainNode(newFront), walker.retainNode(this.node)
+    ]).then(() => {
+      function swapNodes(aOld, aNew) {
+        aOld.parentNode.insertBefore(aNew, aOld);
+        while (aOld.firstChild) {
+          aNew.appendChild(aOld.firstChild);
+        }
+        aOld.parentNode.removeChild(aOld);
+      }
+
+      this.undo.do(() => {
+        swapNodes(this.rawNode, newElt);
+        this.markup.setNodeExpanded(newFront, this.container.expanded);
+        if (this.container.selected) {
+          this.markup.navigate(newContainer);
+        }
+      }, () => {
+        swapNodes(newElt, this.rawNode);
+        this.markup.setNodeExpanded(this.node, newContainer.expanded);
+        if (newContainer.selected) {
+          this.markup.navigate(this.container);
+        }
+      });
+    }).then(null, console.error);
+  },
+
+  destroy: function() {}
+};
+
+function nodeDocument(node) {
+  return node.ownerDocument ||
+    (node.nodeType == Ci.nsIDOMNode.DOCUMENT_NODE ? node : null);
+}
+
+function truncateString(str, maxLength) {
+  if (str.length <= maxLength) {
+    return str;
+  }
+
+  return str.substring(0, Math.ceil(maxLength / 2)) +
+         "…" +
+         str.substring(str.length - Math.floor(maxLength / 2));
+}
+/**
+ * Parse attribute names and values from a string.
+ *
+ * @param  {String} attr
+ *         The input string for which names/values are to be parsed.
+ * @param  {HTMLDocument} doc
+ *         A document that can be used to test valid attributes.
+ * @return {Array}
+ *         An array of attribute names and their values.
+ */
+function parseAttributeValues(attr, doc) {
+  attr = attr.trim();
+
+  // Handle bad user inputs by appending a " or ' if it fails to parse without them.
+  let el = DOMParser.parseFromString("<div " + attr + "></div>", "text/html").body.childNodes[0] ||
+           DOMParser.parseFromString("<div " + attr + "\"></div>", "text/html").body.childNodes[0] ||
+           DOMParser.parseFromString("<div " + attr + "'></div>", "text/html").body.childNodes[0];
+  let div = doc.createElement("div");
+
+  let attributes = [];
+  for (let attribute of el.attributes) {
+    // Try to set on an element in the document, throws exception on bad input.
+    // Prevents InvalidCharacterError - "String contains an invalid character".
+    try {
+      div.setAttribute(attribute.name, attribute.value);
+      attributes.push({
+        name: attribute.name,
+        value: attribute.value
+      });
+    }
+    catch(e) { }
+  }
+
+  // Attributes return from DOMParser in reverse order from how they are entered.
+  return attributes.reverse();
+}
+
+loader.lazyGetter(MarkupView.prototype, "strings", () => Services.strings.createBundle(
+  "chrome://browser/locale/devtools/inspector.properties"
+));
+
+XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
+  return Cc["@mozilla.org/widget/clipboardhelper;1"].
+    getService(Ci.nsIClipboardHelper);
+});