blob: b7b1f8847e665fac0e5392ae7e9cba4790fe3e00 [file] [log] [blame]
Alex Rudenko550dc4d2020-08-20 06:05:021// Copyright (c) 2020 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import * as LitHtml from '../third_party/lit-html/lit-html.js';
6
7const {render, html} = LitHtml;
8
Jack Franklina8aa0a82020-09-21 14:32:169export interface NodeTextData {
10 nodeTitle: string, nodeId?: string, nodeClasses?: string[]
11}
12
Alex Rudenko550dc4d2020-08-20 06:05:0213export class NodeText extends HTMLElement {
14 private readonly shadow = this.attachShadow({mode: 'open'});
15 private nodeTitle: string = '';
16 private nodeId?: string = '';
17 private nodeClasses?: string[] = [];
18
Jack Franklina8aa0a82020-09-21 14:32:1619 set data(data: NodeTextData) {
Alex Rudenko550dc4d2020-08-20 06:05:0220 this.nodeTitle = data.nodeTitle;
21 this.nodeId = data.nodeId;
22 this.nodeClasses = data.nodeClasses;
23 this.render();
24 }
25
26 private render() {
27 const parts = [
28 html`<span class="node-label-name">${this.nodeTitle}</span>`,
29 ];
30
31 if (this.nodeId) {
32 parts.push(html`<span class="node-label-id">#${CSS.escape(this.nodeId)}</span>`);
33 }
34
35 if (this.nodeClasses && this.nodeClasses.length > 0) {
36 const text = this.nodeClasses.map(c => `.${CSS.escape(c)}`).join('');
37 parts.push(html`<span class="node-label-class">${text}</span>`);
38 }
39
40 // Disabled until https://crbug.com/1079231 is fixed.
41 // clang-format off
42 render(html`
43 <style>
44 .node-label-name {
45 color: var(--dom-tag-name-color);
46 }
47
48 .node-label-class {
49 color: var(--dom-attribute-name-color);
50 }
51 </style>
Patrick Brosset436d8ac2020-09-03 17:05:4352 ${parts}
Alex Rudenko550dc4d2020-08-20 06:05:0253 `, this.shadow, {
54 eventContext: this,
55 });
56 // clang-format on
57 }
58}
59
60customElements.define('devtools-node-text', NodeText);
61
62declare global {
63 interface HTMLElementTagNameMap {
64 'devtools-node-text': NodeText;
65 }
66}