DevTools: [lighthouse] Implement performance metrics filmstrip

third_party/WebKit/Source/devtools/front_end/audits2/Audits2Panel.js

 // Copyright (c) 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @unrestricted
  */
 Audits2.Audits2Panel = class extends UI.PanelWithSidebar {
   constructor() {
     super('audits2');
@@ skipping 27 matching lines @@
 
     this._dropTarget = new UI.DropTarget(
         this.contentElement, [UI.DropTarget.Types.Files], Common.UIString('Drop audit file here'),
         this._handleDrop.bind(this));
 
     this._showLandingPage();
   }
 
   _clearAll() {
     this._treeOutline.removeChildren();
-    if (!this._treeOutline.rootElement().childCount())
-      this._showLandingPage();
+    this._showLandingPage();
   }
 
   _deleteSelected() {
     var selection = this._treeOutline.selectedTreeElement;
     if (selection)
-      this._treeOutline.removeChild(selection);
-    if (!this._treeOutline.rootElement().childCount())
-      this._showLandingPage();
+      selection._deleteItem();
   }
 
   _showLandingPage() {
+    if (this._treeOutline.rootElement().childCount())
+      return;
+
     this.mainElement().removeChildren();
     var landingPage = this.mainElement().createChild('div', 'vbox audits2-landing-page');
     var landingCenter = landingPage.createChild('div', 'vbox audits2-landing-center');
     landingCenter.createChild('div', 'audits2-logo');
     var text = landingCenter.createChild('div', 'audits2-landing-text');
     text.createChild('span', 'audits2-landing-bold-text').textContent = Common.UIString('Audits');
     text.createChild('span').textContent = Common.UIString(
         ' help you identify and fix common problems that affect' +
         ' your site\'s performance, accessibility, and user experience. ');
     var link = text.createChild('span', 'link');
@@ skipping 126 matching lines @@
     if (!this._dialog)
       return;
     this._statusElement.textContent = statusMessage;
   }
 
   /**
    * @return {!Promise<undefined>}
    */
   _stop() {
     return this._protocolService.detach().then(_ => {
+      Emulation.InspectedPagePlaceholder.instance().update(true);
       this._auditRunning = false;
       this._updateButton();
       var resourceTreeModel = SDK.targetManager.mainTarget().model(SDK.ResourceTreeModel);
       if (resourceTreeModel && this._inspectedURL !== SDK.targetManager.mainTarget().inspectedURL())
         resourceTreeModel.navigate(this._inspectedURL).then(() => this._hideDialog());
       else
         this._hideDialog();
     });
   }
 
   /**
    * @param {!ReportRenderer.ReportJSON} lighthouseResult
    */
   _finish(lighthouseResult) {
     if (lighthouseResult === null) {
       this._updateStatus(Common.UIString('Auditing failed.'));
       return;
     }
-    var treeElement = new Audits2.Audits2Panel.TreeElement(lighthouseResult, this.mainElement());
+    var treeElement =
+        new Audits2.Audits2Panel.TreeElement(lighthouseResult, this.mainElement(), this._showLandingPage.bind(this));
     this._treeOutline.appendChild(treeElement);
     treeElement._populate();
     treeElement.select();
     this._hideDialog();
   }
 
   /**
    * @param {!Error} err
    */
   _renderBugReport(err) {
@@ skipping 194 matching lines @@
       this._initWorker();
 
     return this._backendPromise.then(_ => this._backend.send(method, params));
   }
 };
 
 Audits2.Audits2Panel.TreeElement = class extends UI.TreeElement {
   /**
    * @param {!ReportRenderer.ReportJSON} lighthouseResult
    * @param {!Element} resultsView
+   * @param {function()} showLandingCallback
    */
-  constructor(lighthouseResult, resultsView) {
+  constructor(lighthouseResult, resultsView, showLandingCallback) {
     super('', false);
     this._lighthouseResult = lighthouseResult;
     this._resultsView = resultsView;
+    this._showLandingCallback = showLandingCallback;
     /** @type {?Element} */
     this._reportContainer = null;
 
     var url = new Common.ParsedURL(lighthouseResult.url);
     var timestamp = lighthouseResult.generatedTime;
     var titleElement = this.titleElement();
     titleElement.classList.add('audits2-report-tree-item');
     titleElement.createChild('div').textContent = url.domain();
     titleElement.createChild('span', 'dimmed').textContent = new Date(timestamp).toLocaleString();
     this.listItemElement.addEventListener('contextmenu', this._handleContextMenuEvent.bind(this), false);
@@ skipping 10 matching lines @@
    * @override
    * @param {boolean=} selectedByUser
    * @return {boolean}
    */
   onselect(selectedByUser) {
     this._renderReport();
     return true;
   }
 
   /**
+   * @override
+   */
+  ondelete() {
+    this._deleteItem();
+    return true;
+  }
+
+  _deleteItem() {
+    this.treeOutline.removeChild(this);
+    this._showLandingCallback();
+  }
+
+  /**
    * @param {!Event} event
    */
   _handleContextMenuEvent(event) {
     var contextMenu = new UI.ContextMenu(event);
     contextMenu.appendItem(Common.UIString('Save as\u2026'), () => {
       var url = new Common.ParsedURL(this._lighthouseResult.url).domain();
       var timestamp = this._lighthouseResult.generatedTime;
       var fileName = `${url}-${new Date(timestamp).toISO8601Compact()}.json`;
       Workspace.fileManager.save(fileName, JSON.stringify(this._lighthouseResult), true);
     });
+    contextMenu.appendItem(Common.UIString('Delete'), () => this._deleteItem());
     contextMenu.show();
   }
 
   /**
    * @override
    */
   onunbind() {
     if (this._reportContainer && this._reportContainer.parentElement)
       this._reportContainer.remove();
   }
@@ skipping 12 matching lines @@
     var categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     var renderer = new Audits2.Audits2Panel.ReportRenderer(dom, categoryRenderer);
 
     var templatesHTML = Runtime.cachedResources['audits2/lighthouse/templates.html'];
     var templatesDOM = new DOMParser().parseFromString(templatesHTML, 'text/html');
     if (!templatesDOM)
       return;
 
     renderer.setTemplateContext(templatesDOM);
     renderer.renderReport(this._lighthouseResult, this._reportContainer);
+
+    var performanceScoreElement = this._reportContainer.querySelector('.lh-category[id=performance] .lh-score');
+    var artifacts = this._lighthouseResult['artifacts'];
+    if (!performanceScoreElement || !artifacts)
+      return;
+    var tracePass = artifacts['traces'] ? artifacts['traces']['defaultPass'] : null;
+    if (!tracePass)
+      return;
+
+    var fmp = this._lighthouseResult['audits']['first-meaningful-paint'];
+    if (!fmp || !fmp['extendedInfo'])
+      return;
+
+    var tti = this._lighthouseResult['audits']['time-to-interactive'];
+    if (!tti || !tti['extendedInfo'])
+      return;
+
+    var navStart = fmp['extendedInfo']['value']['timestamps']['navStart'];
+    var markers = [
+      {
+        title: Common.UIString('First contentful paint'),
+        value: (fmp['extendedInfo']['value']['timestamps']['fCP'] - navStart) / 1000
+      },
+      {
+        title: Common.UIString('First meaningful paint'),
+        value: (fmp['extendedInfo']['value']['timestamps']['fMP'] - navStart) / 1000
+      },
+      {
+        title: Common.UIString('Time to interactive'),
+        value: (tti['extendedInfo']['value']['timestamps']['timeToInteractive'] - navStart) / 1000
+      },
+      {
+        title: Common.UIString('Visually ready'),
+        value: (tti['extendedInfo']['value']['timestamps']['visuallyReady'] - navStart) / 1000
+      }
+    ];
+
+    var timeSpan = Math.max(...markers.map(marker => marker.value));
+    var screenshots = tracePass.traceEvents.filter(e => e.cat === 'disabled-by-default-devtools.screenshot');
+    var timelineElement = createElementWithClass('div', 'audits2-timeline');
+    var filmStripElement = timelineElement.createChild('div', 'audits2-filmstrip');
+
+    var numberOfFrames = 8;
+    var roundToMs = 100;
+    var timeStep = (Math.ceil(timeSpan / numberOfFrames / roundToMs)) * roundToMs;
+
+    for (var time = 0; time < timeSpan; time += timeStep) {
+      var frameForTime = null;
+      for (var e of screenshots) {
+        if ((e.ts - navStart) / 1000 < time + timeStep)
+          frameForTime = e.args.snapshot;
+      }
+      var frame = filmStripElement.createChild('div', 'frame');
+      frame.createChild('div', 'time').textContent = Number.millisToString(time + timeStep);
+
+      var thumbnail = frame.createChild('div', 'thumbnail');
+      if (frameForTime) {
+        var img = thumbnail.createChild('img');
+        img.src = 'data:image/jpg;base64,' + frameForTime;
+      }
+    }
+
+    for (var marker of markers) {
+      var markerElement = timelineElement.createChild('div', 'audits2-timeline-marker');
+      markerElement.createChild('div', 'audits2-timeline-bar').style.width =
+          (100 * (marker.value / timeSpan) | 0) + '%';
+      markerElement.createChild('span').textContent = Common.UIString('%s: ', marker.title);
+      markerElement.createChild('span', 'audits2-timeline-subtitle').textContent = Number.millisToString(marker.value);
+    }
+
+    performanceScoreElement.parentElement.insertBefore(timelineElement, performanceScoreElement.nextSibling);
   }
 };
 
 Audits2.Audits2Panel.TreeSubElement = class extends UI.TreeElement {
   /**
    * @param {string} id
    * @param {string} name
    * @param {number} score
    */
   constructor(id, name, score) {
@@ skipping 12 matching lines @@
   onselect() {
     this.parent._renderReport();
     var node = this.parent._resultsView.querySelector('.lh-category[id=' + this._id + ']');
     if (node) {
       node.scrollIntoView(true);
       return true;
     }
     return false;
   }
 };