Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(548)

Side by Side Diff: tracing/tracing/ui/timeline_view.html

Issue 3002723002: Trace viewer: move mouse mode selector into top controls bar. (Closed)
Patch Set: Created 3 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « tracing/tracing/ui/timeline_track_view.html ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2013 The Chromium Authors. All rights reserved. 3 Copyright (c) 2013 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/base/settings.html"> 8 <link rel="import" href="/tracing/base/settings.html">
9 <link rel="import" href="/tracing/base/utils.html"> 9 <link rel="import" href="/tracing/base/utils.html">
10 <link rel="import" href="/tracing/core/scripting_controller.html"> 10 <link rel="import" href="/tracing/core/scripting_controller.html">
11 <link rel="import" href="/tracing/metrics/all_metrics.html"> 11 <link rel="import" href="/tracing/metrics/all_metrics.html">
12 <link rel="import" href="/tracing/ui/analysis/analysis_view.html"> 12 <link rel="import" href="/tracing/ui/analysis/analysis_view.html">
13 <link rel="import" href="/tracing/ui/base/dom_helpers.html"> 13 <link rel="import" href="/tracing/ui/base/dom_helpers.html">
14 <link rel="import" href="/tracing/ui/base/drag_handle.html"> 14 <link rel="import" href="/tracing/ui/base/drag_handle.html">
15 <link rel="import" href="/tracing/ui/base/dropdown.html"> 15 <link rel="import" href="/tracing/ui/base/dropdown.html">
16 <link rel="import" href="/tracing/ui/base/favicons.html"> 16 <link rel="import" href="/tracing/ui/base/favicons.html">
17 <link rel="import" href="/tracing/ui/base/hotkey_controller.html"> 17 <link rel="import" href="/tracing/ui/base/hotkey_controller.html">
18 <link rel="import" href="/tracing/ui/base/info_bar_group.html"> 18 <link rel="import" href="/tracing/ui/base/info_bar_group.html">
19 <link rel="import" href="/tracing/ui/base/mouse_mode_icon.html">
19 <link rel="import" href="/tracing/ui/base/overlay.html"> 20 <link rel="import" href="/tracing/ui/base/overlay.html">
20 <link rel="import" href="/tracing/ui/base/toolbar_button.html"> 21 <link rel="import" href="/tracing/ui/base/toolbar_button.html">
21 <link rel="import" href="/tracing/ui/base/utils.html"> 22 <link rel="import" href="/tracing/ui/base/utils.html">
22 <link rel="import" href="/tracing/ui/brushing_state_controller.html"> 23 <link rel="import" href="/tracing/ui/brushing_state_controller.html">
23 <link rel="import" href="/tracing/ui/find_control.html"> 24 <link rel="import" href="/tracing/ui/find_control.html">
24 <link rel="import" href="/tracing/ui/find_controller.html"> 25 <link rel="import" href="/tracing/ui/find_controller.html">
25 <link rel="import" href="/tracing/ui/scripting_control.html"> 26 <link rel="import" href="/tracing/ui/scripting_control.html">
26 <link rel="import" href="/tracing/ui/side_panel/side_panel_container.html"> 27 <link rel="import" href="/tracing/ui/side_panel/side_panel_container.html">
27 <link rel="import" href="/tracing/ui/timeline_track_view.html"> 28 <link rel="import" href="/tracing/ui/timeline_track_view.html">
28 <link rel="import" href="/tracing/ui/timeline_view_help_overlay.html"> 29 <link rel="import" href="/tracing/ui/timeline_view_help_overlay.html">
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
89 display: flex; 90 display: flex;
90 min-height: 0; 91 min-height: 0;
91 min-width: 0; 92 min-width: 0;
92 overflow-x: hidden; 93 overflow-x: hidden;
93 } 94 }
94 95
95 middle-container ::content track-view-container > * { flex: 1 1 auto; } 96 middle-container ::content track-view-container > * { flex: 1 1 auto; }
96 middle-container > x-timeline-view-side-panel-container { flex: 0 0 auto; } 97 middle-container > x-timeline-view-side-panel-container { flex: 0 0 auto; }
97 tr-ui-b-drag-handle { flex: 0 0 auto; } 98 tr-ui-b-drag-handle { flex: 0 0 auto; }
98 tr-ui-a-analysis-view { flex: 0 0 auto; } 99 tr-ui-a-analysis-view { flex: 0 0 auto; }
100
101 tr-ui-b-mouse-mode-icon {
102 padding-right: 5px;
103 }
99 </style> 104 </style>
100 105
101 <tv-ui-b-hotkey-controller id="hkc"></tv-ui-b-hotkey-controller> 106 <tv-ui-b-hotkey-controller id="hkc"></tv-ui-b-hotkey-controller>
102 <div id="control"> 107 <div id="control">
103 <div id="bar"> 108 <div id="bar">
104 <div id="left_controls"></div> 109 <div id="left_controls"></div>
105 <div id="title">^_^</div> 110 <div id="title">^_^</div>
106 <div id="right_controls"> 111 <div id="right_controls">
112 <tr-ui-b-mouse-mode-icon mode-name="SELECTION" title="selection (1)"
113 on-click="onMouseModeButtonClick_">
114 </tr-ui-b-mouse-mode-icon>
115 <tr-ui-b-mouse-mode-icon mode-name="PANSCAN" title="pan (2)"
116 on-click="onMouseModeButtonClick_">
117 </tr-ui-b-mouse-mode-icon>
118 <tr-ui-b-mouse-mode-icon mode-name="ZOOM" title="zoom (3)"
119 on-click="onMouseModeButtonClick_">
120 </tr-ui-b-mouse-mode-icon>
121 <tr-ui-b-mouse-mode-icon mode-name="TIMING" title="timing (4)"
122 on-click="onMouseModeButtonClick_">
123 </tr-ui-b-mouse-mode-icon>
107 <tr-ui-b-toolbar-button id="view_metadata_button"> 124 <tr-ui-b-toolbar-button id="view_metadata_button">
108 M 125 M
109 </tr-ui-b-toolbar-button> 126 </tr-ui-b-toolbar-button>
110 <tr-ui-b-dropdown id="view_options_dropdown"></tr-ui-b-dropdown> 127 <tr-ui-b-dropdown id="view_options_dropdown"></tr-ui-b-dropdown>
111 <tr-ui-find-control id="view_find_control"></tr-ui-find-control> 128 <tr-ui-find-control id="view_find_control"></tr-ui-find-control>
112 <tr-ui-b-toolbar-button id="view_console_button"> 129 <tr-ui-b-toolbar-button id="view_console_button">
113 &#187; 130 &#187;
114 </tr-ui-b-toolbar-button> 131 </tr-ui-b-toolbar-button>
115 <tr-ui-b-toolbar-button id="view_help_button"> 132 <tr-ui-b-toolbar-button id="view_help_button">
116 ? 133 ?
(...skipping 16 matching lines...) Expand all
133 <tr-v-ui-preferred-display-unit id="display_unit"> 150 <tr-v-ui-preferred-display-unit id="display_unit">
134 </tr-v-ui-preferred-display-unit> 151 </tr-v-ui-preferred-display-unit>
135 </template> 152 </template>
136 </dom-module> 153 </dom-module>
137 <script> 154 <script>
138 'use strict'; 155 'use strict';
139 156
140 Polymer({ 157 Polymer({
141 is: 'tr-ui-timeline-view', 158 is: 'tr-ui-timeline-view',
142 159
160 created() {
161 this.onKeyUp_ = this.onKeyUp_.bind(this);
162 },
163
143 attached() { 164 attached() {
144 this.async(function() { 165 this.async(function() {
145 this.trackViewContainer_ = Polymer.dom(this).querySelector( 166 this.trackViewContainer_ = Polymer.dom(this).querySelector(
146 '#track_view_container'); 167 '#track_view_container');
147 if (!this.trackViewContainer_) { 168 if (!this.trackViewContainer_) {
148 throw new Error('missing trackviewContainer'); 169 throw new Error('missing trackviewContainer');
149 } 170 }
150 }); 171 });
172 document.addEventListener('keyup', this.onKeyUp_);
173 },
174
175 detached() {
176 document.removeEventListener('keyup', this.onKeyUp_);
177 },
178
179 onMouseModeButtonClick_(e) {
180 this.trackView_.mouseMode = tr.ui.b.MOUSE_SELECTOR_MODE[e.target.modeName];
181 this.updateMouseModeButtons_();
182 },
183
184 onKeyUp_(e) {
185 // Keys dispatched to INPUT elements still bubble, even when they're
186 // handled. So, skip any events that targeted the input element.
187 if (e.path[0].tagName === 'INPUT') return;
188
189 switch (String.fromCharCode(e.keyCode)) {
190 case '1':
191 this.trackView_.mouseMode =
192 tr.ui.b.MOUSE_SELECTOR_MODE.SELECTION;
193 break;
194 case '2':
195 this.trackView_.mouseMode =
196 tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN;
197 break;
198 case '3':
199 this.trackView_.mouseMode = tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM;
200 break;
201 case '4':
202 this.trackView_.mouseMode = tr.ui.b.MOUSE_SELECTOR_MODE.TIMING;
203 break;
204 }
205 this.updateMouseModeButtons_();
206 },
207
208 updateMouseModeButtons_() {
209 for (const icon of
210 this.shadowRoot.querySelectorAll('tr-ui-b-mouse-mode-icon')) {
211 icon.active = (this.trackView_.mouseMode ===
212 tr.ui.b.MOUSE_SELECTOR_MODE[icon.modeName]);
213 }
151 }, 214 },
152 215
153 ready() { 216 ready() {
154 this.tabIndex = 0; // Let the timeline able to receive key events. 217 this.tabIndex = 0; // Let the timeline able to receive key events.
155 218
156 this.titleEl_ = this.$.title; 219 this.titleEl_ = this.$.title;
157 this.leftControlsEl_ = this.$.left_controls; 220 this.leftControlsEl_ = this.$.left_controls;
158 this.rightControlsEl_ = this.$.right_controls; 221 this.rightControlsEl_ = this.$.right_controls;
159 this.collapsingControlsEl_ = this.$.collapsing_controls; 222 this.collapsingControlsEl_ = this.$.collapsing_controls;
160 this.sidePanelContainer_ = this.$.side_panel_container; 223 this.sidePanelContainer_ = this.$.side_panel_container;
(...skipping 232 matching lines...) Expand 10 before | Expand all | Expand 10 after
393 this.trackView_.brushingStateController = undefined; 456 this.trackView_.brushingStateController = undefined;
394 this.trackView_.detach(); 457 this.trackView_.detach();
395 this.trackView_ = undefined; 458 this.trackView_ = undefined;
396 } 459 }
397 this.brushingStateController_.modelWillChange(); 460 this.brushingStateController_.modelWillChange();
398 } 461 }
399 462
400 // Create new trackView if needed. 463 // Create new trackView if needed.
401 if (modelValid && !this.trackView_) { 464 if (modelValid && !this.trackView_) {
402 this.trackView_ = document.createElement('tr-ui-timeline-track-view'); 465 this.trackView_ = document.createElement('tr-ui-timeline-track-view');
466 this.updateMouseModeButtons_();
403 this.trackView_.timelineView = this; 467 this.trackView_.timelineView = this;
404 468
405 this.trackView.brushingStateController = this.brushingStateController_; 469 this.trackView.brushingStateController = this.brushingStateController_;
406 470
407 Polymer.dom(this.trackViewContainer_).appendChild(this.trackView_); 471 Polymer.dom(this.trackViewContainer_).appendChild(this.trackView_);
408 this.trackView_.viewport.addEventListener( 472 this.trackView_.viewport.addEventListener(
409 'change', this.onViewportChanged_); 473 'change', this.onViewportChanged_);
410 } 474 }
411 475
412 // Set the model. 476 // Set the model.
(...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after
546 toggleHighlightVSync_() { 610 toggleHighlightVSync_() {
547 this.highlightVSyncCheckbox_.checked = 611 this.highlightVSyncCheckbox_.checked =
548 !this.highlightVSyncCheckbox_.checked; 612 !this.highlightVSyncCheckbox_.checked;
549 }, 613 },
550 614
551 setFindCtlText(string) { 615 setFindCtlText(string) {
552 this.findCtl_.setText(string); 616 this.findCtl_.setText(string);
553 } 617 }
554 }); 618 });
555 </script> 619 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/timeline_track_view.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698