Alex Rudenko | 550dc4d | 2020-08-20 06:05:02 | [diff] [blame] | 1 | // 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 | |
| 5 | import * as LitHtml from '../third_party/lit-html/lit-html.js'; |
| 6 | |
| 7 | const {render, html} = LitHtml; |
| 8 | |
Jack Franklin | a8aa0a8 | 2020-09-21 14:32:16 | [diff] [blame] | 9 | export interface NodeTextData { |
| 10 | nodeTitle: string, nodeId?: string, nodeClasses?: string[] |
| 11 | } |
| 12 | |
Alex Rudenko | 550dc4d | 2020-08-20 06:05:02 | [diff] [blame] | 13 | export 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 Franklin | a8aa0a8 | 2020-09-21 14:32:16 | [diff] [blame] | 19 | set data(data: NodeTextData) { |
Alex Rudenko | 550dc4d | 2020-08-20 06:05:02 | [diff] [blame] | 20 | 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 Brosset | 436d8ac | 2020-09-03 17:05:43 | [diff] [blame] | 52 | ${parts} |
Alex Rudenko | 550dc4d | 2020-08-20 06:05:02 | [diff] [blame] | 53 | `, this.shadow, { |
| 54 | eventContext: this, |
| 55 | }); |
| 56 | // clang-format on |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | customElements.define('devtools-node-text', NodeText); |
| 61 | |
| 62 | declare global { |
| 63 | interface HTMLElementTagNameMap { |
| 64 | 'devtools-node-text': NodeText; |
| 65 | } |
| 66 | } |