Index: tracing/tracing/ui/timeline_view.html |
diff --git a/tracing/tracing/ui/timeline_view.html b/tracing/tracing/ui/timeline_view.html |
index 8173e2f54660787fc0cb6466b65160021563924e..51f44734528cc2adae01ba8afdee966280d91236 100644 |
--- a/tracing/tracing/ui/timeline_view.html |
+++ b/tracing/tracing/ui/timeline_view.html |
@@ -16,6 +16,7 @@ found in the LICENSE file. |
<link rel="import" href="/tracing/ui/base/favicons.html"> |
<link rel="import" href="/tracing/ui/base/hotkey_controller.html"> |
<link rel="import" href="/tracing/ui/base/info_bar_group.html"> |
+<link rel="import" href="/tracing/ui/base/mouse_mode_icon.html"> |
<link rel="import" href="/tracing/ui/base/overlay.html"> |
<link rel="import" href="/tracing/ui/base/toolbar_button.html"> |
<link rel="import" href="/tracing/ui/base/utils.html"> |
@@ -96,6 +97,10 @@ found in the LICENSE file. |
middle-container > x-timeline-view-side-panel-container { flex: 0 0 auto; } |
tr-ui-b-drag-handle { flex: 0 0 auto; } |
tr-ui-a-analysis-view { flex: 0 0 auto; } |
+ |
+ tr-ui-b-mouse-mode-icon { |
+ padding-right: 5px; |
+ } |
</style> |
<tv-ui-b-hotkey-controller id="hkc"></tv-ui-b-hotkey-controller> |
@@ -104,6 +109,18 @@ found in the LICENSE file. |
<div id="left_controls"></div> |
<div id="title">^_^</div> |
<div id="right_controls"> |
+ <tr-ui-b-mouse-mode-icon mode-name="SELECTION" title="selection (1)" |
+ on-click="onMouseModeButtonClick_"> |
+ </tr-ui-b-mouse-mode-icon> |
+ <tr-ui-b-mouse-mode-icon mode-name="PANSCAN" title="pan (2)" |
+ on-click="onMouseModeButtonClick_"> |
+ </tr-ui-b-mouse-mode-icon> |
+ <tr-ui-b-mouse-mode-icon mode-name="ZOOM" title="zoom (3)" |
+ on-click="onMouseModeButtonClick_"> |
+ </tr-ui-b-mouse-mode-icon> |
+ <tr-ui-b-mouse-mode-icon mode-name="TIMING" title="timing (4)" |
+ on-click="onMouseModeButtonClick_"> |
+ </tr-ui-b-mouse-mode-icon> |
<tr-ui-b-toolbar-button id="view_metadata_button"> |
M |
</tr-ui-b-toolbar-button> |
@@ -140,6 +157,10 @@ found in the LICENSE file. |
Polymer({ |
is: 'tr-ui-timeline-view', |
+ created() { |
+ this.onKeyUp_ = this.onKeyUp_.bind(this); |
+ }, |
+ |
attached() { |
this.async(function() { |
this.trackViewContainer_ = Polymer.dom(this).querySelector( |
@@ -148,6 +169,48 @@ Polymer({ |
throw new Error('missing trackviewContainer'); |
} |
}); |
+ document.addEventListener('keyup', this.onKeyUp_); |
+ }, |
+ |
+ detached() { |
+ document.removeEventListener('keyup', this.onKeyUp_); |
+ }, |
+ |
+ onMouseModeButtonClick_(e) { |
+ this.trackView_.mouseMode = tr.ui.b.MOUSE_SELECTOR_MODE[e.target.modeName]; |
+ this.updateMouseModeButtons_(); |
+ }, |
+ |
+ onKeyUp_(e) { |
+ // Keys dispatched to INPUT elements still bubble, even when they're |
+ // handled. So, skip any events that targeted the input element. |
+ if (e.path[0].tagName === 'INPUT') return; |
+ |
+ switch (String.fromCharCode(e.keyCode)) { |
+ case '1': |
+ this.trackView_.mouseMode = |
+ tr.ui.b.MOUSE_SELECTOR_MODE.SELECTION; |
+ break; |
+ case '2': |
+ this.trackView_.mouseMode = |
+ tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN; |
+ break; |
+ case '3': |
+ this.trackView_.mouseMode = tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM; |
+ break; |
+ case '4': |
+ this.trackView_.mouseMode = tr.ui.b.MOUSE_SELECTOR_MODE.TIMING; |
+ break; |
+ } |
+ this.updateMouseModeButtons_(); |
+ }, |
+ |
+ updateMouseModeButtons_() { |
+ for (const icon of |
+ this.shadowRoot.querySelectorAll('tr-ui-b-mouse-mode-icon')) { |
+ icon.active = (this.trackView_.mouseMode === |
+ tr.ui.b.MOUSE_SELECTOR_MODE[icon.modeName]); |
+ } |
}, |
ready() { |
@@ -400,6 +463,7 @@ Polymer({ |
// Create new trackView if needed. |
if (modelValid && !this.trackView_) { |
this.trackView_ = document.createElement('tr-ui-timeline-track-view'); |
+ this.updateMouseModeButtons_(); |
this.trackView_.timelineView = this; |
this.trackView.brushingStateController = this.brushingStateController_; |