diff options
Diffstat (limited to 'devtools/client/inspector/markup/markup.js')
| -rw-r--r-- | devtools/client/inspector/markup/markup.js | 1878 |
1 files changed, 1878 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js new file mode 100644 index 000000000..d6e9f8c11 --- /dev/null +++ b/devtools/client/inspector/markup/markup.js @@ -0,0 +1,1878 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const promise = require("promise"); +const Services = require("Services"); +const defer = require("devtools/shared/defer"); +const {Task} = require("devtools/shared/task"); +const nodeConstants = require("devtools/shared/dom-node-constants"); +const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants"); +const EventEmitter = require("devtools/shared/event-emitter"); +const {LocalizationHelper} = require("devtools/shared/l10n"); +const {PluralForm} = require("devtools/shared/plural-form"); +const {template} = require("devtools/shared/gcli/templater"); +const {AutocompletePopup} = require("devtools/client/shared/autocomplete-popup"); +const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts"); +const {scrollIntoViewIfNeeded} = require("devtools/client/shared/scroll"); +const {UndoStack} = require("devtools/client/shared/undo"); +const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip"); +const {PrefObserver} = require("devtools/client/styleeditor/utils"); +const HTMLEditor = require("devtools/client/inspector/markup/views/html-editor"); +const MarkupElementContainer = require("devtools/client/inspector/markup/views/element-container"); +const MarkupReadOnlyContainer = require("devtools/client/inspector/markup/views/read-only-container"); +const MarkupTextContainer = require("devtools/client/inspector/markup/views/text-container"); +const RootContainer = require("devtools/client/inspector/markup/views/root-container"); + +const INSPECTOR_L10N = + new LocalizationHelper("devtools/client/locales/inspector.properties"); + +// Page size for pageup/pagedown +const PAGE_SIZE = 10; +const DEFAULT_MAX_CHILDREN = 100; +const NEW_SELECTION_HIGHLIGHTER_TIMER = 1000; +const DRAG_DROP_AUTOSCROLL_EDGE_MAX_DISTANCE = 50; +const DRAG_DROP_AUTOSCROLL_EDGE_RATIO = 0.1; +const DRAG_DROP_MIN_AUTOSCROLL_SPEED = 2; +const DRAG_DROP_MAX_AUTOSCROLL_SPEED = 8; +const DRAG_DROP_HEIGHT_TO_SPEED = 500; +const DRAG_DROP_HEIGHT_TO_SPEED_MIN = 0.5; +const DRAG_DROP_HEIGHT_TO_SPEED_MAX = 1; +const ATTR_COLLAPSE_ENABLED_PREF = "devtools.markup.collapseAttributes"; +const ATTR_COLLAPSE_LENGTH_PREF = "devtools.markup.collapseAttributeLength"; + +/** + * Vocabulary for the purposes of this file: + * + * MarkupContainer - the structure that holds an editor and its + * immediate children in the markup panel. + * - MarkupElementContainer: markup container for element nodes + * - MarkupTextContainer: markup container for text / comment nodes + * - MarkupReadonlyContainer: markup container for other nodes + * 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} inspector + * The inspector we're watching. + * @param {iframe} frame + * An iframe in which the caller has kindly loaded markup.xhtml. + */ +function MarkupView(inspector, frame, controllerWindow) { + this.inspector = inspector; + this.walker = this.inspector.walker; + this._frame = frame; + this.win = this._frame.contentWindow; + this.doc = this._frame.contentDocument; + this._elt = this.doc.querySelector("#root"); + this.htmlEditor = new HTMLEditor(this.doc); + + try { + this.maxChildren = Services.prefs.getIntPref("devtools.markup.pagesize"); + } catch (ex) { + this.maxChildren = DEFAULT_MAX_CHILDREN; + } + + this.collapseAttributes = + Services.prefs.getBoolPref(ATTR_COLLAPSE_ENABLED_PREF); + this.collapseAttributeLength = + Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF); + + // Creating the popup to be used to show CSS suggestions. + // The popup will be attached to the toolbox document. + this.popup = new AutocompletePopup(inspector.toolbox.doc, { + autoSelect: true, + theme: "auto", + }); + + this.undo = new UndoStack(); + this.undo.installController(controllerWindow); + + this._containers = new Map(); + + // Binding functions that need to be called in scope. + this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this); + this._mutationObserver = this._mutationObserver.bind(this); + this._onDisplayChange = this._onDisplayChange.bind(this); + this._onMouseClick = this._onMouseClick.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); + this._onNewSelection = this._onNewSelection.bind(this); + this._onCopy = this._onCopy.bind(this); + this._onFocus = this._onFocus.bind(this); + this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseOut = this._onMouseOut.bind(this); + this._onToolboxPickerCanceled = this._onToolboxPickerCanceled.bind(this); + this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this); + this._onCollapseAttributesPrefChange = + this._onCollapseAttributesPrefChange.bind(this); + this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this); + this._onBlur = this._onBlur.bind(this); + + EventEmitter.decorate(this); + + // Listening to various events. + this._elt.addEventListener("click", this._onMouseClick, false); + this._elt.addEventListener("mousemove", this._onMouseMove, false); + this._elt.addEventListener("mouseout", this._onMouseOut, false); + this._elt.addEventListener("blur", this._onBlur, true); + this.win.addEventListener("mouseup", this._onMouseUp); + this.win.addEventListener("copy", this._onCopy); + this._frame.addEventListener("focus", this._onFocus, false); + this.walker.on("mutations", this._mutationObserver); + this.walker.on("display-change", this._onDisplayChange); + this.inspector.selection.on("new-node-front", this._onNewSelection); + this.toolbox.on("picker-canceled", this._onToolboxPickerCanceled); + this.toolbox.on("picker-node-hovered", this._onToolboxPickerHover); + + this._onNewSelection(); + this._initTooltips(); + + this._prefObserver = new PrefObserver("devtools.markup"); + this._prefObserver.on(ATTR_COLLAPSE_ENABLED_PREF, + this._onCollapseAttributesPrefChange); + this._prefObserver.on(ATTR_COLLAPSE_LENGTH_PREF, + this._onCollapseAttributesPrefChange); + + this._initShortcuts(); +} + +MarkupView.prototype = { + /** + * How long does a node flash when it mutates (in ms). + */ + CONTAINER_FLASHING_DURATION: 500, + + _selectedContainer: null, + + get toolbox() { + return this.inspector.toolbox; + }, + + /** + * Handle promise rejections for various asynchronous actions, and only log errors if + * the markup view still exists. + * This is useful to silence useless errors that happen when the markup view is + * destroyed while still initializing (and making protocol requests). + */ + _handleRejectionIfNotDestroyed: function (e) { + if (!this._destroyer) { + console.error(e); + } + }, + + _initTooltips: function () { + // The tooltips will be attached to the toolbox document. + this.eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc, + {type: "arrow"}); + this.imagePreviewTooltip = new HTMLTooltip(this.toolbox.doc, + {type: "arrow", useXulWrapper: "true"}); + this._enableImagePreviewTooltip(); + }, + + _enableImagePreviewTooltip: function () { + this.imagePreviewTooltip.startTogglingOnHover(this._elt, + this._isImagePreviewTarget); + }, + + _disableImagePreviewTooltip: function () { + this.imagePreviewTooltip.stopTogglingOnHover(); + }, + + _onToolboxPickerHover: function (event, nodeFront) { + this.showNode(nodeFront).then(() => { + this._showContainerAsHovered(nodeFront); + }, e => console.error(e)); + }, + + /** + * If the element picker gets canceled, make sure and re-center the view on the + * current selected element. + */ + _onToolboxPickerCanceled: function () { + if (this._selectedContainer) { + scrollIntoViewIfNeeded(this._selectedContainer.editor.elt); + } + }, + + isDragging: false, + + _onMouseMove: function (event) { + let target = event.target; + + // Auto-scroll if we're dragging. + if (this.isDragging) { + event.preventDefault(); + this._autoScroll(event); + return; + } + + // Show the current container as hovered and highlight it. + // This requires finding the current MarkupContainer (walking up the DOM). + while (!target.container) { + if (target.tagName.toLowerCase() === "body") { + return; + } + target = target.parentNode; + } + + let container = target.container; + if (this._hoveredNode !== container.node) { + this._showBoxModel(container.node); + } + this._showContainerAsHovered(container.node); + + this.emit("node-hover"); + }, + + /** + * If focus is moved outside of the markup view document and there is a + * selected container, make its contents not focusable by a keyboard. + */ + _onBlur: function (event) { + if (!this._selectedContainer) { + return; + } + + let {relatedTarget} = event; + if (relatedTarget && relatedTarget.ownerDocument === this.doc) { + return; + } + + if (this._selectedContainer) { + this._selectedContainer.clearFocus(); + } + }, + + /** + * Executed on each mouse-move while a node is being dragged in the view. + * Auto-scrolls the view to reveal nodes below the fold to drop the dragged + * node in. + */ + _autoScroll: function (event) { + let docEl = this.doc.documentElement; + + if (this._autoScrollAnimationFrame) { + this.win.cancelAnimationFrame(this._autoScrollAnimationFrame); + } + + // Auto-scroll when the mouse approaches top/bottom edge. + let fromBottom = docEl.clientHeight - event.pageY + this.win.scrollY; + let fromTop = event.pageY - this.win.scrollY; + let edgeDistance = Math.min(DRAG_DROP_AUTOSCROLL_EDGE_MAX_DISTANCE, + docEl.clientHeight * DRAG_DROP_AUTOSCROLL_EDGE_RATIO); + + // The smaller the screen, the slower the movement. + let heightToSpeedRatio = + Math.max(DRAG_DROP_HEIGHT_TO_SPEED_MIN, + Math.min(DRAG_DROP_HEIGHT_TO_SPEED_MAX, + docEl.clientHeight / DRAG_DROP_HEIGHT_TO_SPEED)); + + if (fromBottom <= edgeDistance) { + // Map our distance range to a speed range so that the speed is not too + // fast or too slow. + let speed = map( + fromBottom, + 0, edgeDistance, + DRAG_DROP_MIN_AUTOSCROLL_SPEED, DRAG_DROP_MAX_AUTOSCROLL_SPEED); + + this._runUpdateLoop(() => { + docEl.scrollTop -= heightToSpeedRatio * + (speed - DRAG_DROP_MAX_AUTOSCROLL_SPEED); + }); + } + + if (fromTop <= edgeDistance) { + let speed = map( + fromTop, + 0, edgeDistance, + DRAG_DROP_MIN_AUTOSCROLL_SPEED, DRAG_DROP_MAX_AUTOSCROLL_SPEED); + + this._runUpdateLoop(() => { + docEl.scrollTop += heightToSpeedRatio * + (speed - DRAG_DROP_MAX_AUTOSCROLL_SPEED); + }); + } + }, + + /** + * Run a loop on the requestAnimationFrame. + */ + _runUpdateLoop: function (update) { + let loop = () => { + update(); + this._autoScrollAnimationFrame = this.win.requestAnimationFrame(loop); + }; + loop(); + }, + + _onMouseClick: function (event) { + // From the target passed here, let's find the parent MarkupContainer + // and ask it if the tooltip should be shown + let parentNode = event.target; + let container; + while (parentNode !== this.doc.body) { + if (parentNode.container) { + container = parentNode.container; + break; + } + parentNode = parentNode.parentNode; + } + + if (container instanceof MarkupElementContainer) { + // With the newly found container, delegate the tooltip content creation + // and decision to show or not the tooltip + container._buildEventTooltipContent(event.target, + this.eventDetailsTooltip); + } + }, + + _onMouseUp: function () { + this.indicateDropTarget(null); + this.indicateDragTarget(null); + if (this._autoScrollAnimationFrame) { + this.win.cancelAnimationFrame(this._autoScrollAnimationFrame); + } + }, + + _onCollapseAttributesPrefChange: function () { + this.collapseAttributes = + Services.prefs.getBoolPref(ATTR_COLLAPSE_ENABLED_PREF); + this.collapseAttributeLength = + Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF); + this.update(); + }, + + cancelDragging: function () { + if (!this.isDragging) { + return; + } + + for (let [, container] of this._containers) { + if (container.isDragging) { + container.cancelDragging(); + break; + } + } + + this.indicateDropTarget(null); + this.indicateDragTarget(null); + if (this._autoScrollAnimationFrame) { + this.win.cancelAnimationFrame(this._autoScrollAnimationFrame); + } + }, + + _hoveredNode: null, + + /** + * Show a NodeFront's container as being hovered + * + * @param {NodeFront} nodeFront + * The node to show as hovered + */ + _showContainerAsHovered: function (nodeFront) { + if (this._hoveredNode === nodeFront) { + return; + } + + if (this._hoveredNode) { + this.getContainer(this._hoveredNode).hovered = false; + } + + this.getContainer(nodeFront).hovered = true; + this._hoveredNode = nodeFront; + // Emit an event that the container view is actually hovered now, as this function + // can be called by an asynchronous caller. + this.emit("showcontainerhovered"); + }, + + _onMouseOut: function (event) { + // Emulate mouseleave by skipping any relatedTarget inside the markup-view. + if (this._elt.contains(event.relatedTarget)) { + return; + } + + if (this._autoScrollAnimationFrame) { + this.win.cancelAnimationFrame(this._autoScrollAnimationFrame); + } + if (this.isDragging) { + return; + } + + this._hideBoxModel(true); + if (this._hoveredNode) { + this.getContainer(this._hoveredNode).hovered = false; + } + this._hoveredNode = null; + + this.emit("leave"); + }, + + /** + * Show the box model highlighter on a given node front + * + * @param {NodeFront} nodeFront + * The node to show the highlighter for + * @return {Promise} Resolves when the highlighter for this nodeFront is + * shown, taking into account that there could already be highlighter + * requests queued up + */ + _showBoxModel: function (nodeFront) { + return this.toolbox.highlighterUtils.highlightNodeFront(nodeFront); + }, + + /** + * Hide the box model highlighter on a given node front + * + * @param {Boolean} forceHide + * See toolbox-highlighter-utils/unhighlight + * @return {Promise} Resolves when the highlighter for this nodeFront is + * hidden, taking into account that there could already be highlighter + * requests queued up + */ + _hideBoxModel: function (forceHide) { + return this.toolbox.highlighterUtils.unhighlight(forceHide); + }, + + _briefBoxModelTimer: null, + + _clearBriefBoxModelTimer: function () { + if (this._briefBoxModelTimer) { + clearTimeout(this._briefBoxModelTimer); + this._briefBoxModelPromise.resolve(); + this._briefBoxModelPromise = null; + this._briefBoxModelTimer = null; + } + }, + + _brieflyShowBoxModel: function (nodeFront) { + this._clearBriefBoxModelTimer(); + let onShown = this._showBoxModel(nodeFront); + this._briefBoxModelPromise = defer(); + + this._briefBoxModelTimer = setTimeout(() => { + this._hideBoxModel() + .then(this._briefBoxModelPromise.resolve, + this._briefBoxModelPromise.resolve); + }, NEW_SELECTION_HIGHLIGHTER_TIMER); + + return promise.all([onShown, this._briefBoxModelPromise.promise]); + }, + + template: function (name, dest, options = {stack: "markup.xhtml"}) { + let node = this.doc.getElementById("template-" + name).cloneNode(true); + node.removeAttribute("id"); + template(node, dest, options); + return node; + }, + + /** + * Get the MarkupContainer object for a given node, or undefined if + * none exists. + */ + getContainer: function (node) { + return this._containers.get(node); + }, + + update: function () { + let updateChildren = (node) => { + this.getContainer(node).update(); + for (let child of node.treeChildren()) { + updateChildren(child); + } + }; + + // 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 {Promise} the promise returned by + * MarkupElementContainer._isImagePreviewTarget + */ + _isImagePreviewTarget: Task.async(function* (target) { + // From the target passed here, let's find the parent MarkupContainer + // and ask it if the tooltip should be shown + if (this.isDragging) { + return false; + } + + let parent = target, container; + while (parent !== this.doc.body) { + if (parent.container) { + container = parent.container; + break; + } + parent = parent.parentNode; + } + + if (container instanceof MarkupElementContainer) { + // With the newly found container, delegate the tooltip content creation + // and decision to show or not the tooltip + return container.isImagePreviewTarget(target, this.imagePreviewTooltip); + } + + return false; + }), + + /** + * 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", + "nodeselected", + "test" + ]; + let isHighlight = this._hoveredNode === this.inspector.selection.nodeFront; + return !isHighlight && reason && unwantedReasons.indexOf(reason) === -1; + }, + + /** + * React to new-node-front selection events. + * Highlights the node if needed, and make sure it is shown and selected in + * the view. + */ + _onNewSelection: function () { + let selection = this.inspector.selection; + + this.htmlEditor.hide(); + if (this._hoveredNode && this._hoveredNode !== selection.nodeFront) { + this.getContainer(this._hoveredNode).hovered = false; + this._hoveredNode = null; + } + + if (!selection.isNode()) { + this.unmarkSelectedNode(); + return; + } + + let done = this.inspector.updating("markup-view"); + let onShowBoxModel, onShow; + + // Highlight the element briefly if needed. + if (this._shouldNewSelectionBeHighlighted()) { + onShowBoxModel = this._brieflyShowBoxModel(selection.nodeFront); + } + + onShow = this.showNode(selection.nodeFront).then(() => { + // We could be destroyed by now. + if (this._destroyer) { + return promise.reject("markupview destroyed"); + } + + // Mark the node as selected. + this.markNodeAsSelected(selection.nodeFront); + + // Make sure the new selection is navigated to. + this.maybeNavigateToNewSelection(); + return undefined; + }).catch(this._handleRejectionIfNotDestroyed); + + promise.all([onShowBoxModel, onShow]).then(done); + }, + + /** + * Maybe make selected the current node selection's MarkupContainer depending + * on why the current node got selected. + */ + maybeNavigateToNewSelection: function () { + let {reason, nodeFront} = this.inspector.selection; + + // The list of reasons that should lead to navigating to the node. + let reasonsToNavigate = [ + // If the user picked an element with the element picker. + "picker-node-picked", + // If the user shift-clicked (previewed) an element. + "picker-node-previewed", + // If the user selected an element with the browser context menu. + "browser-context-menu", + // If the user added a new node by clicking in the inspector toolbar. + "node-inserted" + ]; + + if (reasonsToNavigate.includes(reason)) { + this.getContainer(this._rootNode).elt.focus(); + this.navigate(this.getContainer(nodeFront)); + } + }, + + /** + * Create a TreeWalker to find the next/previous + * node for selection. + */ + _selectionWalker: function (start) { + let walker = this.doc.createTreeWalker( + start || this._elt, + nodeFilterConstants.SHOW_ELEMENT, + function (element) { + if (element.container && + element.container.elt === element && + element.container.visible) { + return nodeFilterConstants.FILTER_ACCEPT; + } + return nodeFilterConstants.FILTER_SKIP; + } + ); + walker.currentNode = this._selectedContainer.elt; + return walker; + }, + + _onCopy: function (evt) { + // Ignore copy events from editors + if (this._isInputOrTextarea(evt.target)) { + return; + } + + let selection = this.inspector.selection; + if (selection.isNode()) { + this.inspector.copyOuterHTML(); + } + evt.stopPropagation(); + evt.preventDefault(); + }, + + /** + * Register all key shortcuts. + */ + _initShortcuts: function () { + let shortcuts = new KeyShortcuts({ + window: this.win, + }); + + this._onShortcut = this._onShortcut.bind(this); + + // Process localizable keys + ["markupView.hide.key", + "markupView.edit.key", + "markupView.scrollInto.key"].forEach(name => { + let key = INSPECTOR_L10N.getStr(name); + shortcuts.on(key, (_, event) => this._onShortcut(name, event)); + }); + + // Process generic keys: + ["Delete", "Backspace", "Home", "Left", "Right", "Up", "Down", "PageUp", + "PageDown", "Esc", "Enter", "Space"].forEach(key => { + shortcuts.on(key, this._onShortcut); + }); + }, + + /** + * Key shortcut listener. + */ + _onShortcut(name, event) { + if (this._isInputOrTextarea(event.target)) { + return; + } + switch (name) { + // Localizable keys + case "markupView.hide.key": { + let node = this._selectedContainer.node; + if (node.hidden) { + this.walker.unhideNode(node); + } else { + this.walker.hideNode(node); + } + break; + } + case "markupView.edit.key": { + this.beginEditingOuterHTML(this._selectedContainer.node); + break; + } + case "markupView.scrollInto.key": { + let selection = this._selectedContainer.node; + this.inspector.scrollNodeIntoView(selection); + break; + } + // Generic keys + case "Delete": { + this.deleteNodeOrAttribute(); + break; + } + case "Backspace": { + this.deleteNodeOrAttribute(true); + break; + } + case "Home": { + let rootContainer = this.getContainer(this._rootNode); + this.navigate(rootContainer.children.firstChild.container); + break; + } + case "Left": { + if (this._selectedContainer.expanded) { + this.collapseNode(this._selectedContainer.node); + } else { + let parent = this._selectionWalker().parentNode(); + if (parent) { + this.navigate(parent.container); + } + } + break; + } + case "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 "Up": { + let previousNode = this._selectionWalker().previousNode(); + if (previousNode) { + this.navigate(previousNode.container); + } + break; + } + case "Down": { + let nextNode = this._selectionWalker().nextNode(); + if (nextNode) { + this.navigate(nextNode.container); + } + break; + } + case "PageUp": { + let walker = this._selectionWalker(); + let selection = this._selectedContainer; + for (let i = 0; i < PAGE_SIZE; i++) { + let previousNode = walker.previousNode(); + if (!previousNode) { + break; + } + selection = previousNode.container; + } + this.navigate(selection); + break; + } + case "PageDown": { + let walker = this._selectionWalker(); + let selection = this._selectedContainer; + for (let i = 0; i < PAGE_SIZE; i++) { + let nextNode = walker.nextNode(); + if (!nextNode) { + break; + } + selection = nextNode.container; + } + this.navigate(selection); + break; + } + case "Enter": + case "Space": { + if (!this._selectedContainer.canFocus) { + this._selectedContainer.canFocus = true; + this._selectedContainer.focus(); + } else { + // Return early to prevent cancelling the event. + return; + } + break; + } + case "Esc": { + if (this.isDragging) { + this.cancelDragging(); + } else { + // Return early to prevent cancelling the event when not + // dragging, to allow the split console to be toggled. + return; + } + break; + } + default: + console.error("Unexpected markup-view key shortcut", name); + return; + } + // Prevent default for this action + event.stopPropagation(); + event.preventDefault(); + }, + + /** + * Check if a node is an input or textarea + */ + _isInputOrTextarea: function (element) { + let name = element.tagName.toLowerCase(); + return name === "input" || name === "textarea"; + }, + + /** + * If there's an attribute on the current node that's currently focused, then + * delete this attribute, otherwise delete the node itself. + * + * @param {Boolean} moveBackward + * If set to true and if we're deleting the node, focus the previous + * sibling after deletion, otherwise the next one. + */ + deleteNodeOrAttribute: function (moveBackward) { + let focusedAttribute = this.doc.activeElement + ? this.doc.activeElement.closest(".attreditor") + : null; + if (focusedAttribute) { + // The focused attribute might not be in the current selected container. + let container = focusedAttribute.closest("li.child").container; + container.removeAttribute(focusedAttribute.dataset.attr); + } else { + this.deleteNode(this._selectedContainer.node, moveBackward); + } + }, + + /** + * Delete a node from the DOM. + * This is an undoable action. + * + * @param {NodeFront} node + * The node to remove. + * @param {Boolean} moveBackward + * If set to true, focus the previous sibling, otherwise the next one. + */ + deleteNode: function (node, moveBackward) { + if (node.isDocumentElement || + node.nodeType == nodeConstants.DOCUMENT_TYPE_NODE || + node.isAnonymous) { + return; + } + + let container = this.getContainer(node); + + // Retain the node so we can undo this... + this.walker.retainNode(node).then(() => { + let parent = node.parentNode(); + let nextSibling = null; + this.undo.do(() => { + this.walker.removeNode(node).then(siblings => { + nextSibling = siblings.nextSibling; + let prevSibling = siblings.previousSibling; + let focusNode = moveBackward ? prevSibling : nextSibling; + + // If we can't move as the user wants, we move to the other direction. + // If there is no sibling elements anymore, move to the parent node. + if (!focusNode) { + focusNode = nextSibling || prevSibling || parent; + } + + let isNextSiblingText = nextSibling ? + nextSibling.nodeType === nodeConstants.TEXT_NODE : false; + let isPrevSiblingText = prevSibling ? + prevSibling.nodeType === nodeConstants.TEXT_NODE : false; + + // If the parent had two children and the next or previous sibling + // is a text node, then it now has only a single text node, is about + // to be in-lined; and focus should move to the parent. + if (parent.numChildren === 2 + && (isNextSiblingText || isPrevSiblingText)) { + focusNode = parent; + } + + if (container.selected) { + this.navigate(this.getContainer(focusNode)); + } + }); + }, () => { + let isValidSibling = nextSibling && !nextSibling.isPseudoElement; + nextSibling = isValidSibling ? nextSibling : null; + this.walker.insertBefore(node, parent, nextSibling); + }); + }).then(null, console.error); + }, + + /** + * If an editable item is focused, select its container. + */ + _onFocus: function (event) { + let parent = event.target; + while (!parent.container) { + parent = parent.parentNode; + } + if (parent) { + this.navigate(parent.container); + } + }, + + /** + * Handle a user-requested navigation to a given MarkupContainer, + * updating the inspector's currently-selected node. + * + * @param {MarkupContainer} container + * The container we're navigating to. + */ + navigate: function (container) { + if (!container) { + return; + } + + let node = container.node; + this.markNodeAsSelected(node, "treepanel"); + }, + + /** + * Make sure a node is included in the markup tool. + * + * @param {NodeFront} node + * The node in the content document. + * @param {Boolean} flashNode + * Whether the newly imported node should be flashed + * @return {MarkupContainer} The MarkupContainer object for this element. + */ + importNode: function (node, flashNode) { + if (!node) { + return null; + } + + if (this._containers.has(node)) { + return this.getContainer(node); + } + + let container; + let {nodeType, isPseudoElement} = node; + if (node === this.walker.rootNode) { + container = new RootContainer(this, node); + this._elt.appendChild(container.elt); + this._rootNode = node; + } else if (nodeType == nodeConstants.ELEMENT_NODE && !isPseudoElement) { + container = new MarkupElementContainer(this, node, this.inspector); + } else if (nodeType == nodeConstants.COMMENT_NODE || + nodeType == nodeConstants.TEXT_NODE) { + container = new MarkupTextContainer(this, node, this.inspector); + } else { + container = new MarkupReadOnlyContainer(this, node, this.inspector); + } + + if (flashNode) { + container.flashMutation(); + } + + this._containers.set(node, container); + container.childrenDirty = true; + + this._updateChildren(container); + + this.inspector.emit("container-created", container); + + return container; + }, + + /** + * Mutation observer used for included nodes. + */ + _mutationObserver: function (mutations) { + for (let mutation of mutations) { + 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.getContainer(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" && mutation.attributeName === "class") { + container.updateIsDisplayed(); + } + if (type === "attributes" || type === "characterData" + || type === "events" || type === "pseudoClassLock") { + container.update(); + } else if (type === "childList" || type === "nativeAnonymousChildList") { + container.childrenDirty = true; + // Update the children to take care of changes in the markup view DOM + // and update container (and its subtree) DOM tree depth level for + // accessibility where necessary. + this._updateChildren(container, {flash: true}).then(() => + container.updateLevel()); + } else if (type === "inlineTextChild") { + container.childrenDirty = true; + this._updateChildren(container, {flash: true}); + container.update(); + } + } + + this._waitForChildren().then(() => { + if (this._destroyer) { + // Could not fully update after markup mutations, the markup-view was destroyed + // while waiting for children. Bail out silently. + return; + } + this._flashMutatedNodes(mutations); + this.inspector.emit("markupmutation", mutations); + + // Since the htmlEditor is absolutely positioned, a mutation may change + // the location in which it should be shown. + this.htmlEditor.refresh(); + }); + }, + + /** + * React to display-change events from the walker + * + * @param {Array} nodes + * An array of nodeFronts + */ + _onDisplayChange: function (nodes) { + for (let node of nodes) { + let container = this.getContainer(node); + if (container) { + container.updateIsDisplayed(); + } + } + }, + + /** + * Given a list of mutations returned by the mutation observer, flash the + * corresponding containers to attract attention. + */ + _flashMutatedNodes: function (mutations) { + let addedOrEditedContainers = new Set(); + let removedContainers = new Set(); + + for (let {type, target, added, removed, newValue} of mutations) { + let container = this.getContainer(target); + + if (container) { + if (type === "characterData") { + addedOrEditedContainers.add(container); + } else if (type === "attributes" && newValue === null) { + // Removed attributes should flash the entire node. + // New or changed attributes will flash the attribute itself + // in ElementEditor.flashAttribute. + 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 if their associated + // container exist (so if their parent is expanded in the inspector). + added.forEach(node => { + let addedContainer = this.getContainer(node); + if (addedContainer) { + addedOrEditedContainers.add(addedContainer); + + // The node may be added as a result of an append, in which case + // 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 (node, centered = true) { + let parent = node; + + this.importNode(node); + + while ((parent = parent.parentNode())) { + this.importNode(parent); + this.expandNode(parent); + } + + return this._waitForChildren().then(() => { + if (this._destroyer) { + return promise.reject("markupview destroyed"); + } + return this._ensureVisible(node); + }).then(() => { + scrollIntoViewIfNeeded(this.getContainer(node).editor.elt, centered); + }, this._handleRejectionIfNotDestroyed); + }, + + /** + * Expand the container's children. + */ + _expandContainer: function (container) { + return this._updateChildren(container, {expand: true}).then(() => { + if (this._destroyer) { + // Could not expand the node, the markup-view was destroyed in the meantime. Just + // silently give up. + return; + } + container.setExpanded(true); + }); + }, + + /** + * Expand the node's children. + */ + expandNode: function (node) { + let container = this.getContainer(node); + this._expandContainer(container); + }, + + /** + * Expand the entire tree beneath a container. + * + * @param {MarkupContainer} container + * The container to expand. + */ + _expandAll: function (container) { + return this._expandContainer(container).then(() => { + let child = container.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 {DOMNode} node + * The node to expand, or null to start from the top. + */ + expandAll: function (node) { + node = node || this._rootNode; + return this._expandAll(this.getContainer(node)); + }, + + /** + * Collapse the node's children. + */ + collapseNode: function (node) { + let container = this.getContainer(node); + container.setExpanded(false); + }, + + /** + * Returns either the innerHTML or the outerHTML for a remote node. + * + * @param {NodeFront} node + * The NodeFront to get the outerHTML / innerHTML for. + * @param {Boolean} isOuter + * If true, makes the function return the outerHTML, + * otherwise the innerHTML. + * @return {Promise} that will be resolved with the outerHTML / innerHTML. + */ + _getNodeHTML: function (node, isOuter) { + let walkerPromise = null; + + if (isOuter) { + walkerPromise = this.walker.outerHTML(node); + } else { + walkerPromise = this.walker.innerHTML(node); + } + + return walkerPromise.then(longstr => { + return longstr.string().then(html => { + longstr.release().then(null, console.error); + return html; + }); + }); + }, + + /** + * Retrieve the outerHTML for a remote node. + * + * @param {NodeFront} node + * The NodeFront to get the outerHTML for. + * @return {Promise} that will be resolved with the outerHTML. + */ + getNodeOuterHTML: function (node) { + return this._getNodeHTML(node, true); + }, + + /** + * Retrieve the innerHTML for a remote node. + * + * @param {NodeFront} node + * The NodeFront to get the innerHTML for. + * @return {Promise} that will be resolved with the innerHTML. + */ + getNodeInnerHTML: function (node) { + return this._getNodeHTML(node); + }, + + /** + * Listen to mutations, expect a given node to be removed and try and select + * the node that sits at the same place instead. + * This is useful when changing the outerHTML or the tag name so that the + * newly inserted node gets selected instead of the one that just got removed. + */ + reselectOnRemoved: function (removedNode, reason) { + // Only allow one removed node reselection at a time, so that when there are + // more than 1 request in parallel, the last one wins. + this.cancelReselectOnRemoved(); + + // Get the removedNode index in its parent node to reselect the right node. + let isHTMLTag = removedNode.tagName.toLowerCase() === "html"; + let oldContainer = this.getContainer(removedNode); + let parentContainer = this.getContainer(removedNode.parentNode()); + let childIndex = parentContainer.getChildContainers().indexOf(oldContainer); + + let onMutations = this._removedNodeObserver = (e, mutations) => { + let isNodeRemovalMutation = false; + for (let mutation of mutations) { + let containsRemovedNode = mutation.removed && + mutation.removed.some(n => n === removedNode); + if (mutation.type === "childList" && + (containsRemovedNode || isHTMLTag)) { + isNodeRemovalMutation = true; + break; + } + } + if (!isNodeRemovalMutation) { + return; + } + + this.inspector.off("markupmutation", onMutations); + this._removedNodeObserver = null; + + // Don't select the new node if the user has already changed the current + // selection. + if (this.inspector.selection.nodeFront === parentContainer.node || + (this.inspector.selection.nodeFront === removedNode && isHTMLTag)) { + let childContainers = parentContainer.getChildContainers(); + if (childContainers && childContainers[childIndex]) { + this.markNodeAsSelected(childContainers[childIndex].node, reason); + if (childContainers[childIndex].hasChildren) { + this.expandNode(childContainers[childIndex].node); + } + this.emit("reselectedonremoved"); + } + } + }; + + // Start listening for mutations until we find a childList change that has + // removedNode removed. + this.inspector.on("markupmutation", onMutations); + }, + + /** + * Make sure to stop listening for node removal markupmutations and not + * reselect the corresponding node when that happens. + * Useful when the outerHTML/tagname edition failed. + */ + cancelReselectOnRemoved: function () { + if (this._removedNodeObserver) { + this.inspector.off("markupmutation", this._removedNodeObserver); + this._removedNodeObserver = null; + this.emit("canceledreselectonremoved"); + } + }, + + /** + * Replace the outerHTML of any node displayed in the inspector with + * some other HTML code + * + * @param {NodeFront} node + * Node which outerHTML will be replaced. + * @param {String} newValue + * The new outerHTML to set on the node. + * @param {String} oldValue + * The old outerHTML that will be used if the user undoes the update. + * @return {Promise} that will resolve when the outer HTML has been updated. + */ + updateNodeOuterHTML: function (node, newValue) { + let container = this.getContainer(node); + if (!container) { + return promise.reject(); + } + + // Changing the outerHTML removes the node which outerHTML was changed. + // Listen to this removal to reselect the right node afterwards. + this.reselectOnRemoved(node, "outerhtml"); + return this.walker.setOuterHTML(node, newValue).then(null, () => { + this.cancelReselectOnRemoved(); + }); + }, + + /** + * Replace the innerHTML of any node displayed in the inspector with + * some other HTML code + * @param {Node} node + * node which innerHTML will be replaced. + * @param {String} newValue + * The new innerHTML to set on the node. + * @param {String} oldValue + * The old innerHTML that will be used if the user undoes the update. + * @return {Promise} that will resolve when the inner HTML has been updated. + */ + updateNodeInnerHTML: function (node, newValue, oldValue) { + let container = this.getContainer(node); + if (!container) { + return promise.reject(); + } + + let def = defer(); + + container.undo.do(() => { + this.walker.setInnerHTML(node, newValue).then(def.resolve, def.reject); + }, () => { + this.walker.setInnerHTML(node, oldValue); + }); + + return def.promise; + }, + + /** + * Insert adjacent HTML to any node displayed in the inspector. + * + * @param {NodeFront} node + * The reference node. + * @param {String} position + * The position as specified for Element.insertAdjacentHTML + * (i.e. "beforeBegin", "afterBegin", "beforeEnd", "afterEnd"). + * @param {String} newValue + * The adjacent HTML. + * @return {Promise} that will resolve when the adjacent HTML has + * been inserted. + */ + insertAdjacentHTMLToNode: function (node, position, value) { + let container = this.getContainer(node); + if (!container) { + return promise.reject(); + } + + let def = defer(); + + let injectedNodes = []; + container.undo.do(() => { + this.walker.insertAdjacentHTML(node, position, value).then(nodeArray => { + injectedNodes = nodeArray.nodes; + return nodeArray; + }).then(def.resolve, def.reject); + }, () => { + this.walker.removeNodes(injectedNodes); + }); + + return def.promise; + }, + + /** + * Open an editor in the UI to allow editing of a node's outerHTML. + * + * @param {NodeFront} node + * The NodeFront to edit. + */ + beginEditingOuterHTML: function (node) { + this.getNodeOuterHTML(node).then(oldValue => { + let container = this.getContainer(node); + if (!container) { + return; + } + this.htmlEditor.show(container.tagLine, oldValue); + this.htmlEditor.once("popuphidden", (e, commit, value) => { + // Need to focus the <html> element instead of the frame / window + // in order to give keyboard focus back to doc (from editor). + this.doc.documentElement.focus(); + + if (commit) { + this.updateNodeOuterHTML(node, value, oldValue); + } + }); + }); + }, + + /** + * Mark the given node expanded. + * + * @param {NodeFront} node + * The NodeFront to mark as expanded. + * @param {Boolean} expanded + * Whether the expand or collapse. + * @param {Boolean} expandDescendants + * Whether to expand all descendants too + */ + setNodeExpanded: function (node, expanded, expandDescendants) { + if (expanded) { + if (expandDescendants) { + this.expandAll(node); + } else { + this.expandNode(node); + } + } else { + this.collapseNode(node); + } + }, + + /** + * Mark the given node selected, and update the inspector.selection + * object's NodeFront to keep consistent state between UI and selection. + * + * @param {NodeFront} aNode + * The NodeFront to mark as selected. + * @param {String} reason + * The reason for marking the node as selected. + * @return {Boolean} False if the node is already marked as selected, true + * otherwise. + */ + markNodeAsSelected: function (node, reason) { + let container = this.getContainer(node); + + if (this._selectedContainer === container) { + return false; + } + + // Un-select and remove focus from the previous container. + if (this._selectedContainer) { + this._selectedContainer.selected = false; + this._selectedContainer.clearFocus(); + } + + // Select the new container. + this._selectedContainer = container; + if (node) { + this._selectedContainer.selected = true; + } + + // Change the current selection if needed. + if (this.inspector.selection.nodeFront !== node) { + this.inspector.selection.setNodeFront(node, 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.getContainer(node); + let parent = node.parentNode(); + if (!container.elt.parentNode) { + let parentContainer = this.getContainer(parent); + if (parentContainer) { + parentContainer.childrenDirty = true; + this._updateChildren(parentContainer, {expand: true}); + } + } + + node = parent; + } + return this._waitForChildren(); + }, + + /** + * Unmark selected node (no node selected). + */ + unmarkSelectedNode: function () { + if (this._selectedContainer) { + this._selectedContainer.selected = false; + this._selectedContainer = null; + } + }, + + /** + * 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. + * + * @return The node that should be made visible, if any. + */ + _checkSelectionVisible: function (container) { + let centered = null; + let node = this.inspector.selection.nodeFront; + while (node) { + if (node.parentNode() === container.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} container + * The markup container whose children need updating + * @param {Object} options + * Options are {expand:boolean,flash:boolean} + * @return {Promise} that will be resolved when the children are ready + * (which may be immediately). + */ + _updateChildren: function (container, options) { + let expand = options && options.expand; + let flash = options && options.flash; + + container.hasChildren = container.node.hasChildren; + // Accessibility should either ignore empty children or semantically + // consider them a group. + container.setChildrenRole(); + + if (!this._queuedChildUpdates) { + this._queuedChildUpdates = new Map(); + } + + if (this._queuedChildUpdates.has(container)) { + return this._queuedChildUpdates.get(container); + } + + if (!container.childrenDirty) { + return promise.resolve(container); + } + + if (container.inlineTextChild + && container.inlineTextChild != container.node.inlineTextChild) { + // This container was doing double duty as a container for a single + // text child, back that out. + this._containers.delete(container.inlineTextChild); + container.clearInlineTextChild(); + + if (container.hasChildren && container.selected) { + container.setExpanded(true); + } + } + + if (container.node.inlineTextChild) { + container.setExpanded(false); + // this container will do double duty as the container for the single + // text child. + while (container.children.firstChild) { + container.children.removeChild(container.children.firstChild); + } + + container.setInlineTextChild(container.node.inlineTextChild); + + this._containers.set(container.node.inlineTextChild, container); + container.childrenDirty = false; + return promise.resolve(container); + } + + if (!container.hasChildren) { + while (container.children.firstChild) { + container.children.removeChild(container.children.firstChild); + } + container.childrenDirty = false; + container.setExpanded(false); + return promise.resolve(container); + } + + // 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 (!(container.expanded || expand)) { + return promise.resolve(container); + } + + // We're going to issue a children request, make sure it includes the + // centered node. + let centered = this._checkSelectionVisible(container); + + // 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. + container.childrenDirty = false; + let updatePromise = + this._getVisibleChildren(container, centered).then(children => { + if (!this._containers) { + return promise.reject("markup view destroyed"); + } + this._queuedChildUpdates.delete(container); + + // 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 (container.childrenDirty) { + return this._updateChildren(container, {expand: centered}); + } + + let fragment = this.doc.createDocumentFragment(); + + for (let child of children.nodes) { + let childContainer = this.importNode(child, flash); + fragment.appendChild(childContainer.elt); + } + + while (container.children.firstChild) { + container.children.removeChild(container.children.firstChild); + } + + if (!(children.hasFirst && children.hasLast)) { + let nodesCount = container.node.numChildren; + let showAllString = PluralForm.get(nodesCount, + INSPECTOR_L10N.getStr("markupView.more.showAll2")); + let data = { + showing: INSPECTOR_L10N.getStr("markupView.more.showing"), + showAll: showAllString.replace("#1", nodesCount), + allButtonClick: () => { + container.maxChildren = -1; + container.childrenDirty = true; + this._updateChildren(container); + } + }; + + 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); + } + } + + container.children.appendChild(fragment); + return container; + }).catch(this._handleRejectionIfNotDestroyed); + this._queuedChildUpdates.set(container, updatePromise); + return updatePromise; + }, + + _waitForChildren: function () { + if (!this._queuedChildUpdates) { + return promise.resolve(undefined); + } + + return promise.all([...this._queuedChildUpdates.values()]); + }, + + /** + * Return a list of the children to display for this container. + */ + _getVisibleChildren: function (container, centered) { + let maxChildren = container.maxChildren || this.maxChildren; + if (maxChildren == -1) { + maxChildren = undefined; + } + + return this.walker.children(container.node, { + maxNodes: maxChildren, + center: centered + }); + }, + + /** + * Tear down the markup panel. + */ + destroy: function () { + if (this._destroyer) { + return this._destroyer; + } + + this._destroyer = promise.resolve(); + + this._clearBriefBoxModelTimer(); + + this._hoveredNode = null; + + this.htmlEditor.destroy(); + this.htmlEditor = null; + + this.undo.destroy(); + this.undo = null; + + this.popup.destroy(); + this.popup = null; + + this._elt.removeEventListener("click", this._onMouseClick, false); + this._elt.removeEventListener("mousemove", this._onMouseMove, false); + this._elt.removeEventListener("mouseout", this._onMouseOut, false); + this._elt.removeEventListener("blur", this._onBlur, true); + this.win.removeEventListener("mouseup", this._onMouseUp); + this.win.removeEventListener("copy", this._onCopy); + this._frame.removeEventListener("focus", this._onFocus, false); + this.walker.off("mutations", this._mutationObserver); + this.walker.off("display-change", this._onDisplayChange); + this.inspector.selection.off("new-node-front", this._onNewSelection); + this.toolbox.off("picker-node-hovered", + this._onToolboxPickerHover); + + this._prefObserver.off(ATTR_COLLAPSE_ENABLED_PREF, + this._onCollapseAttributesPrefChange); + this._prefObserver.off(ATTR_COLLAPSE_LENGTH_PREF, + this._onCollapseAttributesPrefChange); + this._prefObserver.destroy(); + + this._elt = null; + + for (let [, container] of this._containers) { + container.destroy(); + } + this._containers = null; + + this.eventDetailsTooltip.destroy(); + this.eventDetailsTooltip = null; + + this.imagePreviewTooltip.destroy(); + this.imagePreviewTooltip = null; + + this.win = null; + this.doc = null; + + this._lastDropTarget = null; + this._lastDragTarget = null; + + return this._destroyer; + }, + + /** + * Find the closest element with class tag-line. These are used to indicate + * drag and drop targets. + * + * @param {DOMNode} el + * @return {DOMNode} + */ + findClosestDragDropTarget: function (el) { + return el.classList.contains("tag-line") + ? el + : el.querySelector(".tag-line") || el.closest(".tag-line"); + }, + + /** + * Takes an element as it's only argument and marks the element + * as the drop target + */ + indicateDropTarget: function (el) { + if (this._lastDropTarget) { + this._lastDropTarget.classList.remove("drop-target"); + } + + if (!el) { + return; + } + + let target = this.findClosestDragDropTarget(el); + if (target) { + target.classList.add("drop-target"); + this._lastDropTarget = target; + } + }, + + /** + * Takes an element to mark it as indicator of dragging target's initial place + */ + indicateDragTarget: function (el) { + if (this._lastDragTarget) { + this._lastDragTarget.classList.remove("drag-target"); + } + + if (!el) { + return; + } + + let target = this.findClosestDragDropTarget(el); + if (target) { + target.classList.add("drag-target"); + this._lastDragTarget = target; + } + }, + + /** + * Used to get the nodes required to modify the markup after dragging the + * element (parent/nextSibling). + */ + get dropTargetNodes() { + let target = this._lastDropTarget; + + if (!target) { + return null; + } + + let parent, nextSibling; + + if (target.previousElementSibling && + target.previousElementSibling.nodeName.toLowerCase() === "ul") { + parent = target.parentNode.container.node; + nextSibling = null; + } else { + parent = target.parentNode.container.node.parentNode(); + nextSibling = target.parentNode.container.node; + } + + if (nextSibling && nextSibling.isBeforePseudoElement) { + nextSibling = target.parentNode.parentNode.children[1].container.node; + } + if (nextSibling && nextSibling.isAfterPseudoElement) { + parent = target.parentNode.container.node.parentNode(); + nextSibling = null; + } + + if (parent.nodeType !== nodeConstants.ELEMENT_NODE) { + return null; + } + + return {parent, nextSibling}; + } +}; + +/** + * Map a number from one range to another. + */ +function map(value, oldMin, oldMax, newMin, newMax) { + let ratio = oldMax - oldMin; + if (ratio == 0) { + return value; + } + return newMin + (newMax - newMin) * ((value - oldMin) / ratio); +} + +module.exports = MarkupView; |