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