summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/markup/views/markup-container.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/inspector/markup/views/markup-container.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/inspector/markup/views/markup-container.js')
-rw-r--r--devtools/client/inspector/markup/views/markup-container.js720
1 files changed, 720 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js
new file mode 100644
index 000000000..b54157242
--- /dev/null
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -0,0 +1,720 @@
+/* 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 {Task} = require("devtools/shared/task");
+const {KeyCodes} = require("devtools/client/shared/keycodes");
+const {flashElementOn, flashElementOff} =
+ require("devtools/client/inspector/markup/utils");
+
+const DRAG_DROP_MIN_INITIAL_DISTANCE = 10;
+
+/**
+ * The main structure for storing a document node in the markup
+ * tree. Manages creation of the editor for the node and
+ * a <ul> for placing child elements, and expansion/collapsing
+ * of the element.
+ *
+ * This should not be instantiated directly, instead use one of:
+ * MarkupReadOnlyContainer
+ * MarkupTextContainer
+ * MarkupElementContainer
+ */
+function MarkupContainer() { }
+
+/**
+ * Unique identifier used to set markup container node id.
+ * @type {Number}
+ */
+let markupContainerID = 0;
+
+MarkupContainer.prototype = {
+ /*
+ * Initialize the MarkupContainer. Should be called while one
+ * of the other contain classes is instantiated.
+ *
+ * @param {MarkupView} markupView
+ * The markup view that owns this container.
+ * @param {NodeFront} node
+ * The node to display.
+ * @param {String} templateID
+ * Which template to render for this container
+ */
+ initialize: function (markupView, node, templateID) {
+ this.markup = markupView;
+ this.node = node;
+ this.undo = this.markup.undo;
+ this.win = this.markup._frame.contentWindow;
+ this.id = "treeitem-" + markupContainerID++;
+ this.htmlElt = this.win.document.documentElement;
+
+ // The template will fill the following properties
+ this.elt = null;
+ this.expander = null;
+ this.tagState = null;
+ this.tagLine = null;
+ this.children = null;
+ this.markup.template(templateID, this);
+ this.elt.container = this;
+
+ this._onMouseDown = this._onMouseDown.bind(this);
+ this._onToggle = this._onToggle.bind(this);
+ this._onMouseUp = this._onMouseUp.bind(this);
+ this._onMouseMove = this._onMouseMove.bind(this);
+ this._onKeyDown = this._onKeyDown.bind(this);
+
+ // Binding event listeners
+ this.elt.addEventListener("mousedown", this._onMouseDown, false);
+ this.win.addEventListener("mouseup", this._onMouseUp, true);
+ this.win.addEventListener("mousemove", this._onMouseMove, true);
+ this.elt.addEventListener("dblclick", this._onToggle, false);
+ if (this.expander) {
+ this.expander.addEventListener("click", this._onToggle, false);
+ }
+
+ // Marking the node as shown or hidden
+ this.updateIsDisplayed();
+ },
+
+ toString: function () {
+ return "[MarkupContainer for " + this.node + "]";
+ },
+
+ isPreviewable: function () {
+ if (this.node.tagName && !this.node.isPseudoElement) {
+ let tagName = this.node.tagName.toLowerCase();
+ let srcAttr = this.editor.getAttributeElement("src");
+ let isImage = tagName === "img" && srcAttr;
+ let isCanvas = tagName === "canvas";
+
+ return isImage || isCanvas;
+ }
+
+ return false;
+ },
+
+ /**
+ * Show whether the element is displayed or not
+ * If an element has the attribute `display: none` or has been hidden with
+ * the H key, it is not displayed (faded in markup view).
+ * Otherwise, it is displayed.
+ */
+ updateIsDisplayed: function () {
+ this.elt.classList.remove("not-displayed");
+ if (!this.node.isDisplayed || this.node.hidden) {
+ this.elt.classList.add("not-displayed");
+ }
+ },
+
+ /**
+ * True if the current node has children. The MarkupView
+ * will set this attribute for the MarkupContainer.
+ */
+ _hasChildren: false,
+
+ get hasChildren() {
+ return this._hasChildren;
+ },
+
+ set hasChildren(value) {
+ this._hasChildren = value;
+ this.updateExpander();
+ },
+
+ /**
+ * A list of all elements with tabindex that are not in container's children.
+ */
+ get focusableElms() {
+ return [...this.tagLine.querySelectorAll("[tabindex]")];
+ },
+
+ /**
+ * An indicator that the container internals are focusable.
+ */
+ get canFocus() {
+ return this._canFocus;
+ },
+
+ /**
+ * Toggle focusable state for container internals.
+ */
+ set canFocus(value) {
+ if (this._canFocus === value) {
+ return;
+ }
+
+ this._canFocus = value;
+
+ if (value) {
+ this.tagLine.addEventListener("keydown", this._onKeyDown, true);
+ this.focusableElms.forEach(elm => elm.setAttribute("tabindex", "0"));
+ } else {
+ this.tagLine.removeEventListener("keydown", this._onKeyDown, true);
+ // Exclude from tab order.
+ this.focusableElms.forEach(elm => elm.setAttribute("tabindex", "-1"));
+ }
+ },
+
+ /**
+ * If conatiner and its contents are focusable, exclude them from tab order,
+ * and, if necessary, remove focus.
+ */
+ clearFocus: function () {
+ if (!this.canFocus) {
+ return;
+ }
+
+ this.canFocus = false;
+ let doc = this.markup.doc;
+
+ if (!doc.activeElement || doc.activeElement === doc.body) {
+ return;
+ }
+
+ let parent = doc.activeElement;
+
+ while (parent && parent !== this.elt) {
+ parent = parent.parentNode;
+ }
+
+ if (parent) {
+ doc.activeElement.blur();
+ }
+ },
+
+ /**
+ * True if the current node can be expanded.
+ */
+ get canExpand() {
+ return this._hasChildren && !this.node.inlineTextChild;
+ },
+
+ /**
+ * True if this is the root <html> element and can't be collapsed.
+ */
+ get mustExpand() {
+ return this.node._parent === this.markup.walker.rootNode;
+ },
+
+ /**
+ * True if current node can be expanded and collapsed.
+ */
+ get showExpander() {
+ return this.canExpand && !this.mustExpand;
+ },
+
+ updateExpander: function () {
+ if (!this.expander) {
+ return;
+ }
+
+ if (this.showExpander) {
+ this.expander.style.visibility = "visible";
+ // Update accessibility expanded state.
+ this.tagLine.setAttribute("aria-expanded", this.expanded);
+ } else {
+ this.expander.style.visibility = "hidden";
+ // No need for accessible expanded state indicator when expander is not
+ // shown.
+ this.tagLine.removeAttribute("aria-expanded");
+ }
+ },
+
+ /**
+ * If current node has no children, ignore them. Otherwise, consider them a
+ * group from the accessibility point of view.
+ */
+ setChildrenRole: function () {
+ this.children.setAttribute("role",
+ this.hasChildren ? "group" : "presentation");
+ },
+
+ /**
+ * Set an appropriate DOM tree depth level for a node and its subtree.
+ */
+ updateLevel: function () {
+ // ARIA level should already be set when container template is rendered.
+ let currentLevel = this.tagLine.getAttribute("aria-level");
+ let newLevel = this.level;
+ if (currentLevel === newLevel) {
+ // If level did not change, ignore this node and its subtree.
+ return;
+ }
+
+ this.tagLine.setAttribute("aria-level", newLevel);
+ let childContainers = this.getChildContainers();
+ if (childContainers) {
+ childContainers.forEach(container => container.updateLevel());
+ }
+ },
+
+ /**
+ * If the node has children, return the list of containers for all these
+ * children.
+ */
+ getChildContainers: function () {
+ if (!this.hasChildren) {
+ return null;
+ }
+
+ return [...this.children.children].filter(node => node.container)
+ .map(node => node.container);
+ },
+
+ /**
+ * True if the node has been visually expanded in the tree.
+ */
+ get expanded() {
+ return !this.elt.classList.contains("collapsed");
+ },
+
+ setExpanded: function (value) {
+ if (!this.expander) {
+ return;
+ }
+
+ if (!this.canExpand) {
+ value = false;
+ }
+ if (this.mustExpand) {
+ value = true;
+ }
+
+ if (value && this.elt.classList.contains("collapsed")) {
+ // Expanding a node means cloning its "inline" closing tag into a new
+ // tag-line that the user can interact with and showing the children.
+ let closingTag = this.elt.querySelector(".close");
+ if (closingTag) {
+ if (!this.closeTagLine) {
+ let line = this.markup.doc.createElement("div");
+ line.classList.add("tag-line");
+ // Closing tag is not important for accessibility.
+ line.setAttribute("role", "presentation");
+
+ let tagState = this.markup.doc.createElement("div");
+ tagState.classList.add("tag-state");
+ line.appendChild(tagState);
+
+ line.appendChild(closingTag.cloneNode(true));
+
+ flashElementOff(line);
+ this.closeTagLine = line;
+ }
+ this.elt.appendChild(this.closeTagLine);
+ }
+
+ this.elt.classList.remove("collapsed");
+ this.expander.setAttribute("open", "");
+ this.hovered = false;
+ this.markup.emit("expanded");
+ } else if (!value) {
+ if (this.closeTagLine) {
+ this.elt.removeChild(this.closeTagLine);
+ this.closeTagLine = undefined;
+ }
+ this.elt.classList.add("collapsed");
+ this.expander.removeAttribute("open");
+ this.markup.emit("collapsed");
+ }
+ if (this.showExpander) {
+ this.tagLine.setAttribute("aria-expanded", this.expanded);
+ }
+ },
+
+ parentContainer: function () {
+ return this.elt.parentNode ? this.elt.parentNode.container : null;
+ },
+
+ /**
+ * Determine tree depth level of a given node. This is used to specify ARIA
+ * level for node tree items and to give them better semantic context.
+ */
+ get level() {
+ let level = 1;
+ let parent = this.node.parentNode();
+ while (parent && parent !== this.markup.walker.rootNode) {
+ level++;
+ parent = parent.parentNode();
+ }
+ return level;
+ },
+
+ _isDragging: false,
+ _dragStartY: 0,
+
+ set isDragging(isDragging) {
+ let rootElt = this.markup.getContainer(this.markup._rootNode).elt;
+ this._isDragging = isDragging;
+ this.markup.isDragging = isDragging;
+ this.tagLine.setAttribute("aria-grabbed", isDragging);
+
+ if (isDragging) {
+ this.htmlElt.classList.add("dragging");
+ this.elt.classList.add("dragging");
+ this.markup.doc.body.classList.add("dragging");
+ rootElt.setAttribute("aria-dropeffect", "move");
+ } else {
+ this.htmlElt.classList.remove("dragging");
+ this.elt.classList.remove("dragging");
+ this.markup.doc.body.classList.remove("dragging");
+ rootElt.setAttribute("aria-dropeffect", "none");
+ }
+ },
+
+ get isDragging() {
+ return this._isDragging;
+ },
+
+ /**
+ * Check if element is draggable.
+ */
+ isDraggable: function () {
+ let tagName = this.node.tagName && this.node.tagName.toLowerCase();
+
+ return !this.node.isPseudoElement &&
+ !this.node.isAnonymous &&
+ !this.node.isDocumentElement &&
+ tagName !== "body" &&
+ tagName !== "head" &&
+ this.win.getSelection().isCollapsed &&
+ this.node.parentNode().tagName !== null;
+ },
+
+ /**
+ * Move keyboard focus to a next/previous focusable element inside container
+ * that is not part of its children (only if current focus is on first or last
+ * element).
+ *
+ * @param {DOMNode} current currently focused element
+ * @param {Boolean} back direction
+ * @return {DOMNode} newly focused element if any
+ */
+ _wrapMoveFocus: function (current, back) {
+ let elms = this.focusableElms;
+ let next;
+ if (back) {
+ if (elms.indexOf(current) === 0) {
+ next = elms[elms.length - 1];
+ next.focus();
+ }
+ } else if (elms.indexOf(current) === elms.length - 1) {
+ next = elms[0];
+ next.focus();
+ }
+ return next;
+ },
+
+ _onKeyDown: function (event) {
+ let {target, keyCode, shiftKey} = event;
+ let isInput = this.markup._isInputOrTextarea(target);
+
+ // Ignore all keystrokes that originated in editors except for when 'Tab' is
+ // pressed.
+ if (isInput && keyCode !== KeyCodes.DOM_VK_TAB) {
+ return;
+ }
+
+ switch (keyCode) {
+ case KeyCodes.DOM_VK_TAB:
+ // Only handle 'Tab' if tabbable element is on the edge (first or last).
+ if (isInput) {
+ // Corresponding tabbable element is editor's next sibling.
+ let next = this._wrapMoveFocus(target.nextSibling, shiftKey);
+ if (next) {
+ event.preventDefault();
+ // Keep the editing state if possible.
+ if (next._editable) {
+ let e = this.markup.doc.createEvent("Event");
+ e.initEvent(next._trigger, true, true);
+ next.dispatchEvent(e);
+ }
+ }
+ } else {
+ let next = this._wrapMoveFocus(target, shiftKey);
+ if (next) {
+ event.preventDefault();
+ }
+ }
+ break;
+ case KeyCodes.DOM_VK_ESCAPE:
+ this.clearFocus();
+ this.markup.getContainer(this.markup._rootNode).elt.focus();
+ if (this.isDragging) {
+ // Escape when dragging is handled by markup view itself.
+ return;
+ }
+ event.preventDefault();
+ break;
+ default:
+ return;
+ }
+ event.stopPropagation();
+ },
+
+ _onMouseDown: function (event) {
+ let {target, button, metaKey, ctrlKey} = event;
+ let isLeftClick = button === 0;
+ let isMiddleClick = button === 1;
+ let isMetaClick = isLeftClick && (metaKey || ctrlKey);
+
+ // The "show more nodes" button already has its onclick, so early return.
+ if (target.nodeName === "button") {
+ return;
+ }
+
+ // target is the MarkupContainer itself.
+ this.hovered = false;
+ this.markup.navigate(this);
+ // Make container tabbable descendants tabbable and focus in.
+ this.canFocus = true;
+ this.focus();
+ event.stopPropagation();
+
+ // Preventing the default behavior will avoid the body to gain focus on
+ // mouseup (through bubbling) when clicking on a non focusable node in the
+ // line. So, if the click happened outside of a focusable element, do
+ // prevent the default behavior, so that the tagname or textcontent gains
+ // focus.
+ if (!target.closest(".editor [tabindex]")) {
+ event.preventDefault();
+ }
+
+ // Follow attribute links if middle or meta click.
+ if (isMiddleClick || isMetaClick) {
+ let link = target.dataset.link;
+ let type = target.dataset.type;
+ // Make container tabbable descendants not tabbable (by default).
+ this.canFocus = false;
+ this.markup.inspector.followAttributeLink(type, link);
+ return;
+ }
+
+ // Start node drag & drop (if the mouse moved, see _onMouseMove).
+ if (isLeftClick && this.isDraggable()) {
+ this._isPreDragging = true;
+ this._dragStartY = event.pageY;
+ }
+ },
+
+ /**
+ * On mouse up, stop dragging.
+ */
+ _onMouseUp: Task.async(function* () {
+ this._isPreDragging = false;
+
+ if (this.isDragging) {
+ this.cancelDragging();
+
+ let dropTargetNodes = this.markup.dropTargetNodes;
+
+ if (!dropTargetNodes) {
+ return;
+ }
+
+ yield this.markup.walker.insertBefore(this.node, dropTargetNodes.parent,
+ dropTargetNodes.nextSibling);
+ this.markup.emit("drop-completed");
+ }
+ }),
+
+ /**
+ * On mouse move, move the dragged element and indicate the drop target.
+ */
+ _onMouseMove: function (event) {
+ // If this is the first move after mousedown, only start dragging after the
+ // mouse has travelled a few pixels and then indicate the start position.
+ let initialDiff = Math.abs(event.pageY - this._dragStartY);
+ if (this._isPreDragging && initialDiff >= DRAG_DROP_MIN_INITIAL_DISTANCE) {
+ this._isPreDragging = false;
+ this.isDragging = true;
+
+ // If this is the last child, use the closing <div.tag-line> of parent as
+ // indicator.
+ let position = this.elt.nextElementSibling ||
+ this.markup.getContainer(this.node.parentNode())
+ .closeTagLine;
+ this.markup.indicateDragTarget(position);
+ }
+
+ if (this.isDragging) {
+ let x = 0;
+ let y = event.pageY - this.win.scrollY;
+
+ // Ensure we keep the dragged element within the markup view.
+ if (y < 0) {
+ y = 0;
+ } else if (y >= this.markup.doc.body.offsetHeight - this.win.scrollY) {
+ y = this.markup.doc.body.offsetHeight - this.win.scrollY - 1;
+ }
+
+ let diff = y - this._dragStartY + this.win.scrollY;
+ this.elt.style.top = diff + "px";
+
+ let el = this.markup.doc.elementFromPoint(x, y);
+ this.markup.indicateDropTarget(el);
+ }
+ },
+
+ cancelDragging: function () {
+ if (!this.isDragging) {
+ return;
+ }
+
+ this._isPreDragging = false;
+ this.isDragging = false;
+ this.elt.style.removeProperty("top");
+ },
+
+ /**
+ * Temporarily flash the container to attract attention.
+ * Used for markup mutations.
+ */
+ flashMutation: function () {
+ if (!this.selected) {
+ flashElementOn(this.tagState, this.editor.elt);
+ if (this._flashMutationTimer) {
+ clearTimeout(this._flashMutationTimer);
+ this._flashMutationTimer = null;
+ }
+ this._flashMutationTimer = setTimeout(() => {
+ flashElementOff(this.tagState, this.editor.elt);
+ }, this.markup.CONTAINER_FLASHING_DURATION);
+ }
+ },
+
+ _hovered: false,
+
+ /**
+ * Highlight the currently hovered tag + its closing tag if necessary
+ * (that is if the tag is expanded)
+ */
+ set hovered(value) {
+ this.tagState.classList.remove("flash-out");
+ this._hovered = value;
+ if (value) {
+ if (!this.selected) {
+ this.tagState.classList.add("theme-bg-darker");
+ }
+ if (this.closeTagLine) {
+ this.closeTagLine.querySelector(".tag-state").classList.add(
+ "theme-bg-darker");
+ }
+ } else {
+ this.tagState.classList.remove("theme-bg-darker");
+ if (this.closeTagLine) {
+ this.closeTagLine.querySelector(".tag-state").classList.remove(
+ "theme-bg-darker");
+ }
+ }
+ },
+
+ /**
+ * True if the container is visible in the markup tree.
+ */
+ get visible() {
+ return this.elt.getBoundingClientRect().height > 0;
+ },
+
+ /**
+ * True if the container is currently selected.
+ */
+ _selected: false,
+
+ get selected() {
+ return this._selected;
+ },
+
+ set selected(value) {
+ this.tagState.classList.remove("flash-out");
+ this._selected = value;
+ this.editor.selected = value;
+ // Markup tree item should have accessible selected state.
+ this.tagLine.setAttribute("aria-selected", value);
+ if (this._selected) {
+ let container = this.markup.getContainer(this.markup._rootNode);
+ if (container) {
+ container.elt.setAttribute("aria-activedescendant", this.id);
+ }
+ this.tagLine.setAttribute("selected", "");
+ this.tagState.classList.add("theme-selected");
+ } else {
+ this.tagLine.removeAttribute("selected");
+ this.tagState.classList.remove("theme-selected");
+ }
+ },
+
+ /**
+ * Update the container's editor to the current state of the
+ * viewed node.
+ */
+ update: function () {
+ if (this.node.pseudoClassLocks.length) {
+ this.elt.classList.add("pseudoclass-locked");
+ } else {
+ this.elt.classList.remove("pseudoclass-locked");
+ }
+
+ if (this.editor.update) {
+ this.editor.update();
+ }
+ },
+
+ /**
+ * Try to put keyboard focus on the current editor.
+ */
+ focus: function () {
+ // Elements with tabindex of -1 are not focusable.
+ let focusable = this.editor.elt.querySelector("[tabindex='0']");
+ if (focusable) {
+ focusable.focus();
+ }
+ },
+
+ _onToggle: function (event) {
+ this.markup.navigate(this);
+ if (this.hasChildren) {
+ this.markup.setNodeExpanded(this.node, !this.expanded, event.altKey);
+ }
+ event.stopPropagation();
+ },
+
+ /**
+ * Get rid of event listeners and references, when the container is no longer
+ * needed
+ */
+ destroy: function () {
+ // Remove event listeners
+ this.elt.removeEventListener("mousedown", this._onMouseDown, false);
+ this.elt.removeEventListener("dblclick", this._onToggle, false);
+ this.tagLine.removeEventListener("keydown", this._onKeyDown, true);
+ if (this.win) {
+ this.win.removeEventListener("mouseup", this._onMouseUp, true);
+ this.win.removeEventListener("mousemove", this._onMouseMove, true);
+ }
+
+ this.win = null;
+ this.htmlElt = null;
+
+ if (this.expander) {
+ this.expander.removeEventListener("click", this._onToggle, false);
+ }
+
+ // Recursively destroy children containers
+ let firstChild = this.children.firstChild;
+ while (firstChild) {
+ // Not all children of a container are containers themselves
+ // ("show more nodes" button is one example)
+ if (firstChild.container) {
+ firstChild.container.destroy();
+ }
+ this.children.removeChild(firstChild);
+ firstChild = this.children.firstChild;
+ }
+
+ this.editor.destroy();
+ }
+};
+
+module.exports = MarkupContainer;