Eliminate race condition when setting model early on TimelineView

tracing/tracing/ui/timeline_view.html

Index: tracing/tracing/ui/timeline_view.html
diff --git a/tracing/tracing/ui/timeline_view.html b/tracing/tracing/ui/timeline_view.html
index 891a3a3b45ec77187f0899fabe97bbf9167acaec..7d46259952e1c17d2d0253b9850468fccc33d7f7 100644
--- a/tracing/tracing/ui/timeline_view.html
+++ b/tracing/tracing/ui/timeline_view.html
@@ -149,26 +149,32 @@ Polymer({
     });
   },
 
-  ready: function() {
+  created: function() {
     this.tabIndex = 0; // Let the timeline able to receive key events.
 
-    this.titleEl_ = this.$.title;
-    this.leftControlsEl_ = this.$.left_controls;
-    this.rightControlsEl_ = this.$.right_controls;
-    this.collapsingControlsEl_ = this.$.collapsing_controls;
-    this.sidePanelContainer_ = this.$.side_panel_container;
-
     this.brushingStateController_ = new tr.c.BrushingStateController(this);
+    this.showFlowEvents_ = false;
+    this.highlightVSync_ = false;
+    this.railScoreSpan_ = undefined;
+
+    // Bookkeeping.
+    this.onViewportChanged_ = this.onViewportChanged_.bind(this);
+
+    this.ready_ = false;
+    this.pendingModel_ = undefined;
+  },
+
+  ready: function() {
+    this.ready_ = true;
 
-    this.findCtl_ = this.$.view_find_control;
-    this.findCtl_.controller = new tr.ui.FindController(
+    this.$.view_find_control.controller = new tr.ui.FindController(
         this.brushingStateController_);
 
     this.scriptingCtl_ = document.createElement('tr-ui-scripting-control');
     this.scriptingCtl_.controller = new tr.c.ScriptingController(
         this.brushingStateController_);
 
-    this.sidePanelContainer_.brushingStateController =
+    this.$.side_panel_container.brushingStateController =
         this.brushingStateController_;
 
     if (window.tr.metrics && window.tr.metrics.sh &&
@@ -180,20 +186,18 @@ Polymer({
       this.railScoreSpan_ = undefined;
     }
 
-    this.optionsDropdown_ = this.$.view_options_dropdown;
-    Polymer.dom(this.optionsDropdown_.iconElement).textContent = 'View Options';
+    var optionsDropdown = this.$.view_options_dropdown;
+    Polymer.dom(optionsDropdown.iconElement).textContent = 'View Options';
 
-    this.showFlowEvents_ = false;
-    Polymer.dom(this.optionsDropdown_).appendChild(tr.ui.b.createCheckBox(
+    Polymer.dom(optionsDropdown).appendChild(tr.ui.b.createCheckBox(
         this, 'showFlowEvents',
         'tr.ui.TimelineView.showFlowEvents', false,
         'Flow events'));
-    this.highlightVSync_ = false;
     this.highlightVSyncCheckbox_ = tr.ui.b.createCheckBox(
         this, 'highlightVSync',
         'tr.ui.TimelineView.highlightVSync', false,
         'Highlight VSync');
-    Polymer.dom(this.optionsDropdown_).appendChild(
+    Polymer.dom(optionsDropdown).appendChild(
         this.highlightVSyncCheckbox_);
 
     this.initMetadataButton_();
@@ -202,8 +206,6 @@ Polymer({
 
     Polymer.dom(this.collapsingControls).appendChild(this.scriptingCtl_);
 
-    this.dragEl_ = this.$.drag_handle;
-
     this.analysisEl_ = this.$.analysis;
     this.analysisEl_.brushingStateController = this.brushingStateController_;
 
@@ -214,11 +216,15 @@ Polymer({
           sc.changeSelectionFromRequestSelectionChangeEvent(e.selection);
         }.bind(this));
 
-    // Bookkeeping.
-    this.onViewportChanged_ = this.onViewportChanged_.bind(this);
+
+    this.$.drag_handle.target = this.analysisEl_;
+
     this.bindKeyListeners_();
 
-    this.dragEl_.target = this.analysisEl_;
+    if (this.pendingModel_) {
+      this.model = this.pendingModel_;
+      this.pendingModel_ = undefined;
+    }
   },
 
   get globalMode() {
@@ -337,30 +343,30 @@ Polymer({
   },
 
   get leftControls() {
-    return this.leftControlsEl_;
+    return this.$.left_controls;
   },
 
   get rightControls() {
-    return this.rightControlsEl_;
+    return this.$.right_controls;
   },
 
   get collapsingControls() {
-    return this.collapsingControlsEl_;
+    return this.$.collapsing_controls;
   },
 
   get viewTitle() {
-    return Polymer.dom(this.titleEl_).textContent.substring(
-        Polymer.dom(this.titleEl_).textContent.length - 2);
+    return Polymer.dom(this.$.title).textContent.substring(
+        Polymer.dom(this.$.title).textContent.length - 2);
   },
 
   set viewTitle(text) {
     if (text === undefined) {
-      Polymer.dom(this.titleEl_).textContent = '';
-      this.titleEl_.hidden = true;
+      Polymer.dom(this.$.title).textContent = '';
+      this.$.title.hidden = true;
       return;
     }
-    this.titleEl_.hidden = false;
-    Polymer.dom(this.titleEl_).textContent = text;
+    this.$.title.hidden = false;
+    Polymer.dom(this.$.title).textContent = text;
   },
 
   get model() {
@@ -370,6 +376,11 @@ Polymer({
   },
 
   set model(model) {
+    if (!this.ready_) {
+      this.pendingModel_ = model;
+      return;
+    }
+
     var modelInstanceChanged = model != this.model;
     var modelValid = model && !model.bounds.isEmpty;
 
@@ -481,10 +492,10 @@ Polymer({
       callback: function(e) {
         if (this.scriptingCtl_.hasFocus)
           return;
-        if (this.findCtl_.hasFocus)
+        if (this.$.view_find_control.hasFocus)
           this.focus();
         else
-          this.findCtl_.focus();
+          this.$.view_find_control.focus();
         e.preventDefault();
         e.stopPropagation();
       }
@@ -515,7 +526,7 @@ Polymer({
   },
 
   onViewportChanged_: function(e) {
-    var spc = this.sidePanelContainer_;
+    var spc = this.$.side_panel_container;
     if (!this.trackView_) {
       spc.rangeOfInterest.reset();
       return;
@@ -535,7 +546,7 @@ Polymer({
   },
 
   setFindCtlText: function(string) {
-    this.findCtl_.setText(string);
+    this.$.view_find_control.setText(string);
   }
 });
 </script>