• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BaseElement, element } from '../../../base-ui/BaseElement.js';
17import { info } from '../../../log/Log.js';
18import { SpStatisticsHttpUtil } from '../../../statistics/util/SpStatisticsHttpUtil.js';
19import { PluginConvertUtils } from './utils/PluginConvertUtils.js';
20
21@element('trace-command')
22export class SpTraceCommand extends BaseElement {
23  private codeHl: HTMLTextAreaElement | undefined | null;
24  private copyEl: HTMLElement | undefined | null;
25  private codeCopyText: HTMLInputElement | undefined;
26
27  get hdcCommon(): string {
28    return this.codeHl!.textContent + '';
29  }
30
31  set hdcCommon(value: string) {
32    info('hdc Common is:', value);
33    this.codeHl!.textContent = value;
34  }
35
36  //当 custom element首次被插入文档DOM时，被调用。
37  public connectedCallback() {
38    this.codeHl!.textContent = '';
39    this.copyEl?.addEventListener('click', this.codeCopyEvent);
40    this.codeHl?.addEventListener('selectionchange', this.textSelectEvent);
41  }
42
43  public disconnectedCallback() {
44    this.copyEl?.removeEventListener('click', this.codeCopyEvent);
45  }
46
47  codeCopyEvent = () => {
48    this.codeHl?.select();
49    document.execCommand('copy');
50    let allPlugin: Array<string> = [];
51    PluginConvertUtils.pluginConfig.forEach((plugin) => {
52      allPlugin.push(plugin.pluginName);
53    });
54    SpStatisticsHttpUtil.addOrdinaryVisitAction({
55      action: 'config_page',
56      event: 'offline_record',
57      eventData: {
58        plugin: allPlugin,
59      },
60    });
61  };
62
63  textSelectEvent = () => {
64    this.copyEl!.style.backgroundColor = '#FFFFFF';
65  };
66
67  initElements(): void {
68    this.codeHl = this.shadowRoot?.querySelector('#code-text') as HTMLTextAreaElement;
69    this.copyEl = this.shadowRoot?.querySelector('#copy-image') as HTMLElement;
70  }
71
72  initHtml(): string {
73    return `
74        <style>
75        :host{
76            width: 100%;
77            position: relative;
78            background: var(--dark-background3,#FFFFFF);
79            border-radius: 0px 16px 16px 0px;
80        }
81
82        #code-text{
83            -webkit-appearance:none;
84            opacity: 0.6;
85            font-family: Helvetica;
86            color: var(--dark-color,#000000);
87            padding: 20px 56px 5px 56px;
88            font-size:1em;
89            margin-left: 10px;
90            line-height: 20px;
91            font-weight: 400;
92            border: none;
93            outline:none;
94            resize:none;
95            /*overflow:auto;*/
96            z-index: 2;
97            min-height: 500px;
98            background: var(--dark-background3,#FFFFFF);
99        }
100
101        #copy-image{
102            display: table-cell;
103            white-space: nowrap;
104            outline:0;
105            float:right;
106            z-index: 66;
107            position: relative;
108            top: 56px;
109            right: 40px;
110            cursor:pointer;
111        }
112
113        #copy-button{
114            -webkit-appearance:none;
115            outline:0;
116            border: 0;
117            background: var(--dark-background3,#FFFFFF);
118            justify-content: end;
119            z-index: 55;
120            border-radius: 0px 16px 0px 0px;
121        }
122
123        #text-cmd{
124            /*overflow-y:auto;*/
125            display: grid;
126            justify-content: stretch;
127            align-content:  stretch;
128            font-size:16px;
129            background: var(--dark-background3,#FFFFFF);
130            border-radius: 0px 16px 0px 0px;
131
132        }
133
134        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
135        ::-webkit-scrollbar
136        {
137          width: 6px;
138          height: 10px;
139          background-color: var(--dark-background3,#FFFFFF);
140        }
141
142        /*定义滚动条轨道 内阴影+圆角*/
143        ::-webkit-scrollbar-track
144        {
145          background-color: var(--dark-background3,#FFFFFF);
146        }
147
148        /*定义滑块 内阴影+圆角*/
149        ::-webkit-scrollbar-thumb
150        {
151          border-radius: 6px;
152          background-color: var(--dark-background7,#e7c9c9);
153        }
154        </style>
155        <div id="text-cmd">
156            <button id="copy-button">
157                <img id="copy-image" src="img/copy.png">
158            </button>
159            <textarea id="code-text" readonly></textarea>
160        </div>
161        `;
162  }
163}
164