summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/markup/views/slotted-node-container.js
blob: 6d128cfc39bb59397027c4481f3c04a74e8090e0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* 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 SlottedNodeEditor = require("resource://devtools/client/inspector/markup/views/slotted-node-editor.js");
const MarkupContainer = require("resource://devtools/client/inspector/markup/views/markup-container.js");
const { extend } = require("resource://devtools/shared/extend.js");

function SlottedNodeContainer(markupView, node) {
  MarkupContainer.prototype.initialize.call(
    this,
    markupView,
    node,
    "slottednodecontainer"
  );

  this.editor = new SlottedNodeEditor(this, node);
  this.tagLine.appendChild(this.editor.elt);
  this.hasChildren = false;
}

SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
  _onMouseDown(event) {
    if (event.target.classList.contains("reveal-link")) {
      event.stopPropagation();
      event.preventDefault();
      return;
    }
    MarkupContainer.prototype._onMouseDown.call(this, event);
  },

  /**
   * Slotted node containers never display children and should not react to toggle.
   */
  _onToggle(event) {
    event.stopPropagation();
  },

  _revealFromSlot() {
    const reason = "reveal-from-slot";
    this.markup.inspector.selection.setNodeFront(this.node, { reason });
    this.markup.telemetry.scalarSet(
      "devtools.shadowdom.reveal_link_clicked",
      true
    );
  },

  _onKeyDown(event) {
    MarkupContainer.prototype._onKeyDown.call(this, event);

    const isActionKey = event.code == "Enter" || event.code == "Space";
    if (event.target.classList.contains("reveal-link") && isActionKey) {
      this._revealFromSlot();
    }
  },

  async onContainerClick(event) {
    if (!event.target.classList.contains("reveal-link")) {
      return;
    }

    this._revealFromSlot();
  },

  isDraggable() {
    return false;
  },

  isSlotted() {
    return true;
  },
});

module.exports = SlottedNodeContainer;