Update To 11.40.268.0
[platform/framework/web/crosswalk.git] / src / third_party / trace-viewer / trace_viewer / tracing / timeline_track_view.html
index b826bd1..e475e91 100644 (file)
@@ -5,23 +5,23 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
-<link rel="stylesheet" href="/tvcm/ui/common.css">
+<link rel="stylesheet" href="/base/ui/common.css">
 <link rel="stylesheet" href="/tracing/timeline_track_view.css">
 
+<link rel="import" href="/base/events.html">
+<link rel="import" href="/base/properties.html">
+<link rel="import" href="/base/settings.html">
+<link rel="import" href="/base/ui.html">
+<link rel="import" href="/base/ui/mouse_mode_selector.html">
 <link rel="import" href="/tracing/filter.html">
 <link rel="import" href="/tracing/selection.html">
 <link rel="import" href="/tracing/timeline_viewport.html">
 <link rel="import" href="/tracing/timeline_display_transform_animations.html">
 <link rel="import" href="/tracing/timing_tool.html">
-<link rel="import" href="/tvcm/events.html">
-<link rel="import" href="/tvcm/properties.html">
-<link rel="import" href="/tvcm/settings.html">
 <link rel="import" href="/tracing/trace_model/event.html">
 <link rel="import" href="/tracing/tracks/drawing_container.html">
 <link rel="import" href="/tracing/tracks/trace_model_track.html">
 <link rel="import" href="/tracing/tracks/ruler_track.html">
-<link rel="import" href="/tvcm/ui.html">
-<link rel="import" href="/tvcm/ui/mouse_mode_selector.html">
 
 <script>
 'use strict';
@@ -40,7 +40,7 @@ found in the LICENSE file.
  *    Thread2:     CCCCCC                 CCCCC
  *
  */
-tvcm.exportTo('tracing', function() {
+tv.exportTo('tracing', function() {
   var Selection = tracing.Selection;
   var SelectionState = tracing.trace_model.SelectionState;
   var Viewport = tracing.TimelineViewport;
@@ -71,7 +71,7 @@ tvcm.exportTo('tracing', function() {
    * @constructor
    * @extends {HTMLDivElement}
    */
-  var TimelineTrackView = tvcm.ui.define('div');
+  var TimelineTrackView = tv.ui.define('div');
 
   TimelineTrackView.prototype = {
     __proto__: HTMLDivElement.prototype,
@@ -114,6 +114,8 @@ tvcm.exportTo('tracing', function() {
       this.appendChild(this.dragBox_);
       this.hideDragBox_();
 
+      this.initHintText_();
+
       this.bindEventListener_(document, 'keypress', this.onKeypress_, this);
       this.bindEventListener_(document, 'keydown', this.onKeydown_, this);
       this.bindEventListener_(document, 'keyup', this.onKeyup_, this);
@@ -155,7 +157,7 @@ tvcm.exportTo('tracing', function() {
     },
 
     initMouseModeSelector: function() {
-      this.mouseModeSelector_ = new tvcm.ui.MouseModeSelector(this);
+      this.mouseModeSelector_ = new tv.ui.MouseModeSelector(this);
       this.appendChild(this.mouseModeSelector_);
 
       this.mouseModeSelector_.addEventListener('beginpan',
@@ -190,7 +192,7 @@ tvcm.exportTo('tracing', function() {
       this.mouseModeSelector_.addEventListener('exittiming',
           this.timingTool_.onExitTiming.bind(this.timingTool_));
 
-      var m = tvcm.ui.MOUSE_SELECTOR_MODE;
+      var m = tv.ui.MOUSE_SELECTOR_MODE;
       this.mouseModeSelector_.supportedModeMask =
           m.SELECTION | m.PANSCAN | m.ZOOM | m.TIMING;
       this.mouseModeSelector_.settingsKey =
@@ -201,11 +203,11 @@ tvcm.exportTo('tracing', function() {
       this.mouseModeSelector_.setKeyCodeForMode(m.TIMING, '4'.charCodeAt(0));
 
       this.mouseModeSelector_.setModifierForAlternateMode(
-          m.SELECTION, tvcm.ui.MODIFIER.SHIFT);
+          m.SELECTION, tv.ui.MODIFIER.SHIFT);
       this.mouseModeSelector_.setModifierForAlternateMode(
-          m.PANSCAN, tvcm.ui.MODIFIER.SPACE);
+          m.PANSCAN, tv.ui.MODIFIER.SPACE);
       this.mouseModeSelector_.setModifierForAlternateMode(
-          m.ZOOM, tvcm.ui.MODIFIER.CMD_OR_CTRL);
+          m.ZOOM, tv.ui.MODIFIER.CMD_OR_CTRL);
     },
 
     detach: function() {
@@ -231,7 +233,7 @@ tvcm.exportTo('tracing', function() {
       if (!model)
         throw new Error('Model cannot be null');
 
-      var modelInstanceChanged = this.model_ != model;
+      var modelInstanceChanged = this.model_ !== model;
       this.model_ = model;
       this.modelTrack_.model = model;
 
@@ -239,7 +241,7 @@ tvcm.exportTo('tracing', function() {
       if (modelInstanceChanged)
         this.viewport_.setWhenPossible(this.setInitialViewport_.bind(this));
 
-      tvcm.setPropertyAndDispatchChange(this, 'model', model);
+      tv.setPropertyAndDispatchChange(this, 'model', model);
     },
 
     get hasVisibleContent() {
@@ -247,6 +249,10 @@ tvcm.exportTo('tracing', function() {
     },
 
     setInitialViewport_: function() {
+      // We need the canvas size to be up-to-date at this point. We maybe in
+      // here before the raf fires, so the size may have not been updated since
+      // the canvas was resized.
+      this.modelTrackContainer_.updateCanvasSizeIfNeeded_();
       var w = this.modelTrackContainer_.canvas.width;
 
       var min;
@@ -255,13 +261,14 @@ tvcm.exportTo('tracing', function() {
       if (this.model_.bounds.isEmpty) {
         min = 0;
         range = 1000;
-      } else if (this.model_.bounds.range == 0) {
+      } else if (this.model_.bounds.range === 0) {
         min = this.model_.bounds.min;
         range = 1000;
       } else {
         min = this.model_.bounds.min;
         range = this.model_.bounds.range;
       }
+
       var boost = range * 0.15;
       tempDisplayTransform.set(this.viewport_.currentDisplayTransform);
       tempDisplayTransform.xSetWorldBounds(min - boost,
@@ -310,7 +317,7 @@ tvcm.exportTo('tracing', function() {
       if (this.focusElement.tabIndex >= 0) {
         if (document.activeElement == this.focusElement)
           return true;
-        return tvcm.ui.elementIsChildOf(document.activeElement,
+        return tv.ui.elementIsChildOf(document.activeElement,
                                         this.focusElement);
       }
       return true;
@@ -456,7 +463,7 @@ tvcm.exportTo('tracing', function() {
 
     onDblClick_: function(e) {
       if (this.mouseModeSelector_.mode !==
-          tvcm.ui.MOUSE_SELECTOR_MODE.SELECTION)
+          tv.ui.MOUSE_SELECTOR_MODE.SELECTION)
         return;
 
       if (!this.selection.length || !this.selection[0].title)
@@ -493,6 +500,10 @@ tvcm.exportTo('tracing', function() {
      * @param {boolean} Whether to change the zoom level smoothly.
      */
     zoomBy_: function(scale, smooth) {
+      if (scale <= 0) {
+        return;
+      }
+
       smooth = !!smooth;
       var vp = this.viewport_;
       var viewWidth = this.modelTrackContainer_.canvas.clientWidth;
@@ -528,12 +539,13 @@ tvcm.exportTo('tracing', function() {
         return;
 
       var worldCenter = bounds.center;
+      var viewCenter = this.modelTrackContainer_.canvas.width / 2;
       var adjustedWorldRange = bounds.range * 1.25;
       var newScale = this.modelTrackContainer_.canvas.width /
           adjustedWorldRange;
       var zoomInRatio = newScale / this.viewport_.currentDisplayTransform.scaleX;
       var animation = new tracing.TimelineDisplayTransformZoomToAnimation(
-          worldCenter, 'center',
+          worldCenter, viewCenter,
           this.viewport_.currentDisplayTransform.panY,
           zoomInRatio);
       this.viewport_.queueDisplayTransformAnimation(animation);
@@ -692,7 +704,8 @@ tvcm.exportTo('tracing', function() {
       } else
         this.selection_ = new Selection();
 
-      tvcm.dispatchSimpleEvent(this, 'selectionChange');
+      tv.dispatchSimpleEvent(this, 'selectionChange');
+      this.showHintText_('Press \'m\' to mark current selection');
 
       if (this.selectionOfInterest.length) {
         var track = this.viewport_.trackForEvent(this.selectionOfInterest[0]);
@@ -781,7 +794,7 @@ tvcm.exportTo('tracing', function() {
       var roundedDuration = Math.round((hiWX - loWX) * 100) / 100;
       this.dragBox_.textContent = roundedDuration + 'ms';
 
-      var e = new tvcm.Event('selectionChanging');
+      var e = new tv.Event('selectionChanging');
       e.loWX = loWX;
       e.hiWX = hiWX;
       this.dispatchEvent(e);
@@ -972,7 +985,9 @@ tvcm.exportTo('tracing', function() {
           loVX, hiVX, loY, hiY, selection);
 
       // Activate the new selection.
-      this.setSelectionAndClearHighlight(selection);
+      var selection_change_event = new tracing.RequestSelectionChangeEvent();
+      selection_change_event.selection = selection;
+      this.dispatchEvent(selection_change_event);
     },
 
     onBeginZoom_: function(e) {
@@ -1058,6 +1073,31 @@ tvcm.exportTo('tracing', function() {
       tempDisplayTransform.panY -= yDelta;
       vp.setDisplayTransformImmediately(tempDisplayTransform);
       this.storeLastTouchPositions_(e);
+    },
+
+    initHintText_: function() {
+      this.hintTextBox_ = this.ownerDocument.createElement('div');
+      this.hintTextBox_.className = 'hint-text';
+      this.hintTextBox_.style.display = 'none';
+      this.appendChild(this.hintTextBox_);
+
+      this.pendingHintTextClearTimeout_ = undefined;
+    },
+
+    showHintText_: function(text) {
+      if (this.pendingHintTextClearTimeout_) {
+        window.clearTimeout(this.pendingHintTextClearTimeout_);
+        this.pendingHintTextClearTimeout_ = undefined;
+      }
+      this.pendingHintTextClearTimeout_ = setTimeout(
+          this.hideHintText_.bind(this), 1000);
+      this.hintTextBox_.textContent = text;
+      this.hintTextBox_.style.display = '';
+    },
+
+    hideHintText_: function() {
+      this.pendingHintTextClearTimeout_ = undefined;
+      this.hintTextBox_.style.display = 'none';
     }
   };