DevTools: Do not show screenshots overview bar if there's no screenshots

BUG=836030

Change-Id: I8c01d3186568ac162cc1be118dd8faf06fcee074
Reviewed-on: https://chromium-review.googlesource.com/1033327Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554591}

third_party/blink/renderer/devtools/front_end/timeline/TimelinePanel.js

@@ -416,7 +416,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._overviewControls.push(new Timeline.TimelineEventOverviewFrames());
     this._overviewControls.push(new Timeline.TimelineEventOverviewCPUActivity());
     this._overviewControls.push(new Timeline.TimelineEventOverviewNetwork());
-    if (this._showScreenshotsSetting.get())
+    if (this._showScreenshotsSetting.get() && this._performanceModel &&
+        this._performanceModel.frameModel().frames().length)
       this._overviewControls.push(new Timeline.TimelineFilmStripOverview());
     if (this._showMemorySetting.get())
       this._overviewControls.push(new Timeline.TimelineEventOverviewMemory());
@@ -568,6 +569,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._performanceModel = model;
     this._flameChart.setModel(model);
 
+    this._updateOverviewControls();
     this._overviewPane.reset();
     if (model) {
       this._performanceModel.addEventListener(
@@ -776,7 +778,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
       case Timeline.TimelineSelection.Type.Range:
         return null;
       case Timeline.TimelineSelection.Type.TraceEvent:
-        return this._performanceModel.frameModel().filteredFrames(selection._endTime, selection._endTime)[0];
+        return this._performanceModel.frameModel().frames(selection._endTime, selection._endTime)[0];
       default:
         console.assert(false, 'Should never be reached');
         return null;

third_party/blink/renderer/devtools/front_end/timeline_model/TimelineFrameModel.js

@@ -41,38 +41,16 @@ TimelineModel.TimelineFrameModel = class {
   }
 
   /**
-   * @return {!Array.<!TimelineModel.TimelineFrame>}
-   */
-  frames() {
-    return this._frames;
-  }
-
-  /**
-   * @param {number} startTime
-   * @param {number} endTime
-   * @return {!Array.<!TimelineModel.TimelineFrame>}
-   */
-  filteredFrames(startTime, endTime) {
-    /**
-     * @param {number} value
-     * @param {!TimelineModel.TimelineFrame} object
-     * @return {number}
-     */
-    function compareStartTime(value, object) {
-      return value - object.startTime;
-    }
-    /**
-     * @param {number} value
-     * @param {!TimelineModel.TimelineFrame} object
-     * @return {number}
-     */
-    function compareEndTime(value, object) {
-      return value - object.endTime;
-    }
-    const frames = this._frames;
-    const firstFrame = frames.lowerBound(startTime, compareEndTime);
-    const lastFrame = frames.lowerBound(endTime, compareStartTime);
-    return frames.slice(firstFrame, lastFrame);
+   * @param {number=} startTime
+   * @param {number=} endTime
+   * @return {!Array<!TimelineModel.TimelineFrame>}
+   */
+  frames(startTime, endTime) {
+    if (!startTime && !endTime)
+      return this._frames;
+    const firstFrame = this._frames.lowerBound(startTime || 0, (time, frame) => time - frame.endTime);
+    const lastFrame = this._frames.lowerBound(endTime || Infinity, (time, frame) => time - frame.startTime);
+    return this._frames.slice(firstFrame, lastFrame);
   }
 
   /**