DevTools: Introduce Landing page for Timeline panel.

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
index 0f70e8286aba3ddde351151b198b726f7e86be60..47d116b660ed5d77ba4afd2534f90917f13eea75 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -84,6 +84,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._panelToolbar = new UI.Toolbar('', this.element);
 
     var timelinePane = new UI.VBox();
+    this._timelinePane = timelinePane;

[caseq, 2016/12/07 20:17:29]

let's get rid of local var for simplicity.

[alph, 2016/12/08 07:22:45]

Done.

     timelinePane.show(this.element);
     var topPaneElement = timelinePane.element.createChild('div', 'hbox');
     topPaneElement.id = 'timeline-overview-panel';
@@ -660,10 +661,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._frameModel.reset();
     this._filmStripModel.reset(this._tracingModel);
     this._overviewPane.reset();
-    for (var i = 0; i < this._currentViews.length; ++i)
-      this._currentViews[i].reset();
-    for (var i = 0; i < this._overviewControls.length; ++i)
-      this._overviewControls[i].reset();
+    this._currentViews.forEach(view => view.reset());
+    this._overviewControls.forEach(overview => overview.reset());
     this.select(null);
     this._detailsSplitWidget.hideSidebar();
   }
@@ -690,6 +689,11 @@ Timeline.TimelinePanel = class extends UI.Panel {
   }
 
   _showRecordingHelpMessage() {
+    if (Runtime.experiments.isEnabled('timelineLandingPage')) {
+      this._showLandingPage();
+      return;
+    }
+
     /**
      * @param {string} tagName
      * @param {string} contents
@@ -724,11 +728,32 @@ Timeline.TimelinePanel = class extends UI.Panel {
   }
 
   _hideRecordingHelpMessage() {
+    if (Runtime.experiments.isEnabled('timelineLandingPage')) {
+      this._hideLandingPage();
+      return;
+    }
     if (this._helpMessageElement)
       this._helpMessageElement.remove();
     delete this._helpMessageElement;
   }
 
+  _showLandingPage() {
+    if (this._landingPage)
+      return;
+    this._landingPage = new Timeline.LandingPage();
+    this._landingPage.show(this._timelinePane.element);
+    this._detailsSplitWidget.detach();
+  }
+
+  _hideLandingPage() {
+    if (!this._landingPage)
+      return;
+    this._landingPage.dispose();
+    this._landingPage.detach();
+    this._landingPage = null;
+    this._detailsSplitWidget.show(this._timelinePane.element);
+  }
+
   /**
    * @override
    */