1<!DOCTYPE html>
2<!--
3Copyright (c) 2013 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7<link rel="import" href="/tracing/base/base.html">
8<link rel="import" href="/tracing/ui/base/overlay.html">
9<link rel="import" href="/tracing/ui/base/mouse_mode_icon.html">
10
11<polymer-element name="tr-ui-timeline-view-help-overlay">
12  <template>
13    <style>
14    :host {
15      -webkit-flex: 1 1 auto;
16      -webkit-flex-direction: row;
17      display: -webkit-flex;
18      width: 700px;
19    }
20    .column {
21      width: 50%;
22    }
23    h2 {
24      font-size: 1.2em;
25      margin: 0;
26      margin-top: 5px;
27      text-align: center;
28    }
29    h3 {
30      margin: 0;
31      margin-left: 126px;
32      margin-top: 10px;
33    }
34    .pair {
35      -webkit-flex: 1 1 auto;
36      -webkit-flex-direction: row;
37      display: -webkit-flex;
38    }
39    .command {
40      font-family: monospace;
41      margin-right: 5px;
42      text-align: right;
43      width: 150px;
44    }
45    .action {
46      font-size: 0.9em;
47      text-align: left;
48      width: 200px;
49    }
50    tr-ui-b-mouse-mode-icon {
51      border: 1px solid #888;
52      border-radius: 3px;
53      box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
54      display: inline-block;
55      margin-right: 1px;
56      position: relative;
57      top: 4px;
58    }
59    .mouse-mode-icon.pan-mode {
60      background-position: -1px -11px;
61    }
62    .mouse-mode-icon.select-mode {
63      background-position: -1px -41px;
64    }
65    .mouse-mode-icon.zoom-mode {
66      background-position: -1px -71px;
67    }
68    .mouse-mode-icon.timing-mode {
69      background-position: -1px -101px;
70    }
71    </style>
72    <div class="column left">
73      <h2>Navigation</h2>
74      <div class='pair'>
75        <div class='command'>w/s</div>
76        <div class='action'>Zoom in/out (+shift: faster)</div>
77      </div>
78
79      <div class='pair'>
80        <div class='command'>a/d</div>
81        <div class='action'>Pan left/right (+shift: faster)</div>
82      </div>
83
84      <div class='pair'>
85        <div class='command'>&rarr;/shift-TAB</div>
86        <div class='action'>Select previous event</div>
87      </div>
88
89      <div class='pair'>
90        <div class='command'>&larr;/TAB</div>
91        <div class='action'>Select next event</div>
92      </div>
93
94      <h2>Mouse Controls</h2>
95      <div class='pair'>
96        <div class='command'>click</div>
97        <div class='action'>Select event</div>
98      </div>
99      <div class='pair'>
100        <div class='command'>alt-mousewheel</div>
101        <div class='action'>Zoom in/out</div>
102      </div>
103
104      <h3>
105        <tr-ui-b-mouse-mode-icon modeName="SELECTION"></tr-ui-b-mouse-mode-icon>
106        Select mode
107      </h3>
108      <div class='pair'>
109        <div class='command'>drag</div>
110        <div class='action'>Box select</div>
111      </div>
112
113      <div class='pair'>
114        <div class='command'><span class='mod'></span>-click/drag</div>
115        <div class='action'>Add events to the current selection</div>
116      </div>
117
118      <div class='pair'>
119        <div class='command'>double click</div>
120        <div class='action'>Select all events with same title</div>
121      </div>
122
123      <h3>
124        <tr-ui-b-mouse-mode-icon modeName="PANSCAN"></tr-ui-b-mouse-mode-icon>
125        Pan mode
126      </h3>
127      <div class='pair'>
128        <div class='command'>drag</div>
129        <div class='action'>Pan the view</div>
130      </div>
131
132      <h3>
133        <tr-ui-b-mouse-mode-icon modeName="ZOOM"></tr-ui-b-mouse-mode-icon>
134        Zoom mode
135      </h3>
136      <div class='pair'>
137        <div class='command'>drag</div>
138        <div class='action'>Zoom in/out by dragging up/down</div>
139      </div>
140
141      <h3>
142        <tr-ui-b-mouse-mode-icon modeName="TIMING"></tr-ui-b-mouse-mode-icon>
143        Timing mode
144      </h3>
145      <div class='pair'>
146        <div class='command'>drag</div>
147        <div class='action'>Create or move markers</div>
148      </div>
149
150      <div class='pair'>
151        <div class='command'>double click</div>
152        <div class='action'>Set marker range to slice</div>
153      </div>
154    </div>
155
156    <div class="column right">
157      <h2>General</h2>
158      <div class='pair'>
159        <div class='command'>1-4</div>
160        <div class='action'>Switch mouse mode</div>
161      </div>
162
163      <div class='pair'>
164        <div class='command'>shift</div>
165        <div class='action'>Hold for temporary select</div>
166      </div>
167
168      <div class='pair'>
169        <div class='command'>space</div>
170        <div class='action'>Hold for temporary pan</div>
171      </div>
172
173      <div class='pair'>
174        <div class='command'>/</div>
175        <div class='action'>Search</div>
176      </div>
177
178      <div class='pair'>
179        <div class='command'>enter</div>
180        <div class='action'>Step through search results</div>
181      </div>
182
183      <div class='pair'>
184        <div class='command'>f</div>
185        <div class='action'>Zoom into selection</div>
186      </div>
187
188      <div class='pair'>
189        <div class='command'>z/0</div>
190        <div class='action'>Reset zoom and pan</div>
191      </div>
192
193      <div class='pair'>
194        <div class='command'>g/G</div>
195        <div class='action'>Toggle 60hz grid</div>
196      </div>
197
198      <div class='pair'>
199        <div class='command'>v</div>
200        <div class='action'>Highlight VSync</div>
201      </div>
202
203      <div class='pair'>
204        <div class='command'>h</div>
205        <div class='action'>Toggle low/high details</div>
206      </div>
207
208      <div class='pair'>
209        <div class='command'>m</div>
210        <div class='action'>Mark current selection</div>
211      </div>
212
213      <div class='pair'>
214        <div class='command'>`</div>
215        <div class='action'>Show or hide the scripting console</div>
216      </div>
217
218      <div class='pair'>
219        <div class='command'>?</div>
220        <div class='action'>Show help</div>
221      </div>
222    </div>
223  </template>
224
225  <script>
226  'use strict';
227
228  Polymer('tr-ui-timeline-view-help-overlay', {
229    ready: function() {
230      var mod = tr.isMac ? 'cmd ' : 'ctrl';
231      var spans = this.shadowRoot.querySelectorAll('span.mod');
232      for (var i = 0; i < spans.length; i++) {
233        spans[i].textContent = mod;
234      }
235    }
236  });
237  </script>
238</polymer-element>
239