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
16export const SpKeyboardHtml = `
17<style>
18.root{
19  position: relative;
20}
21.shadow-box{
22  position:absolute;
23  width: 100%;
24  height : 100%;
25  background-color: rgba(0, 0, 0, 0.8);
26}
27.sp-keyboard-vessel {
28  width: 100%;
29  height: 100%;
30  display: flex;
31  justify-content: center;
32  align-items: center;
33}
34.body{
35  width: 50%;
36  background-color: #fff;
37  padding: 0 30px 30px;
38  z-index: 9000;
39  max-height: 600px;
40  overflow-y: scroll;
41}
42.title{
43  margin: 0;
44  position:absolute;
45}
46header {
47  position: fixed;
48  width: 50%;
49  height: 50px;
50  line-height: 50px;
51  background-color: #fff;
52}
53.close-icon{
54  cursor: pointer;
55  position: absolute;
56  right: 19px;
57}
58main{
59  font-size: 12px;
60  font-weight: 700;
61  margin: 50px 0 30px 0;
62}
63table{
64  margin-bottom: 15px;
65}
66.help table tr{
67  font-size: 16px;
68}
69.help table td{
70  min-width: 250px;
71  font-weight: 500;
72}
73.keycap{
74  background-color: #fafbfc;
75  border:1px solid #d1d5da;
76  border-bottom-color: #c6cbd1;
77  border-radius:3px;
78  box-shadow: inset 0 -1px 0 #c6cbd1;
79  color: #444d56;
80  display: inline-block;
81  vertical-align: middle;
82  line-height: 20px;
83  padding:3px 7px;
84  font-weight: 500;
85}
86.mouse-ctr tr{
87  line-height: 27px;
88}
89.describe-td{
90  font-weight: 200!important;
91}
92</style>
93<div class="sp-keyboard-vessel">
94<div class='shadow-box'></div>
95 <div class="body">
96  <header style="display">
97    <h2 class="title">SmartPerf Help</h3>
98    <a class="close-icon"> ✕ </a>
99  </header>
100  <main>
101    <div class="help">
102      <h2>Navigation</h2>
103      <table>
104        <tr>
105          <td>
106            <div class="keycap">w</div> /
107            <div class="keycap">s</div>
108          </td>
109          <td class="describe-td">Zoom in/out</td>
110        </tr>
111        <tr>
112        <td>
113          <div class="keycap">a</div> /
114          <div class="keycap">d</div>
115        </td>
116        <td class="describe-td">Pan left/right</td>
117      </tr>
118      </table>
119      <h2>Mouse Controls</h2>
120      <table class="mouse-ctr">
121        <tr>
122          <td>Click</td>
123          <td class="describe-td">Select event</td>
124        </tr> 
125        <tr>
126          <td>Click + Drag</td>
127          <td class="describe-td">Select area</td>
128        </tr> 
129        <tr>
130        <tr>
131          <td>Ctrl + Scroll wheel</td>
132          <td class="describe-td">Zoom in/out</td>
133        </tr> 
134          <td>Ctrl + Click + Drag</td>
135          <td class="describe-td">Pan left/right</td>
136        </tr> 
137      </table>
138      <h2>Making SQL queries from the query page</h2>
139      <table>
140        <tr>
141          <td>
142            <div class="keycap">Ctrl</div> +
143            <div class="keycap">Enter</div>
144          </td>
145          <td class="describe-td">Execute query</td>
146        </tr>
147      </table>
148      <h2>Other</h2>
149      <table>
150        <tr>
151          <td>
152            <div class="keycap">f</div> (with event selected)
153          </td>
154          <td class="describe-td">Focus on the selected slice</td>
155        </tr>
156        <tr>
157          <td>
158            <div class="keycap">m</div> (with event or area selected)
159          </td>
160          <td class="describe-td">Mark the area (temporarily)</td>
161        </tr>
162        <tr>
163          <td>
164            <div class="keycap">Shift</div> +
165            <div class="keycap">m</div> (with event or area selected)
166          </td>
167          <td class="describe-td">Mark the area (persistently)</td>
168        </tr>
169        <tr>
170          <td>
171            <div class="keycap">Ctr</div> +
172            <div class="keycap">b</div> 
173          </td>
174          <td class="describe-td">Hide/Show menus and search boxes</td>
175        </tr>
176        <tr>
177          <td>
178            <div class="keycap">Ctrl</div> +
179            <div class="keycap">,</div> /
180            <div class="keycap">.</div>
181          </td>
182          <td class="describe-td">Locate the time point marked by the previous/next flag</td>
183        </tr>
184        <tr>
185          <td>
186            <div class="keycap">Ctrl</div> +
187            <div class="keycap">[</div> /
188            <div class="keycap">]</div>
189          </td>
190          <td class="describe-td">Locate the previous/next position selected with shift+m</td>
191        </tr>
192        <tr>
193          <td>
194            <div class="keycap">/</div>
195          </td>
196          <td class="describe-td">Show Keyboard shortcuts</td>
197        </tr>
198        <tr>
199          <td>
200            <div class="keycap">v</div>
201          </td>
202          <td class="describe-td">Show/hide Vsync signal</td>
203        </tr>
204        <tr>
205          <td>
206            <div class="keycap">b</div>
207          </td>
208          <td class="describe-td">Expand/Fold Collection Area</td>
209      </tr>
210      </table>
211    </div>
212  </main>
213 </div>
214</div>
215`;
216