DevTools: update status / progress dialog in audits 2.

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 19 matching lines @@
     var clearButton = new UI.ToolbarButton(Common.UIString('Clear all'), 'largeicon-clear');
     toolbar.appendToolbarItem(clearButton);
     clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._clearAll.bind(this));
 
     this._treeOutline = new UI.TreeOutlineInShadow();
     this._treeOutline.registerRequiredCSS('audits2/lighthouse/report-styles.css');
     this._treeOutline.registerRequiredCSS('audits2/audits2Tree.css');
     this.panelSidebarElement().appendChild(this._treeOutline.element);
 
     this._dropTarget = new UI.DropTarget(
-        this.contentElement, [UI.DropTarget.Types.Files],
-        Common.UIString('Drop audit file here'), this._handleDrop.bind(this));
+        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();
   }
 
   _deleteSelected() {
     var selection = this._treeOutline.selectedTreeElement;
     if (selection)
       this._treeOutline.removeChild(selection);
     if (!this._treeOutline.rootElement().childCount())
       this._showLandingPage();
   }
 
   _showLandingPage() {
     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' +
+    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');
     link.textContent = Common.UIString('Learn more');
     link.addEventListener(
         'click', () => InspectorFrontendHost.openInNewTab('https://developers.google.com/web/tools/lighthouse/'));
 
     var newButton = UI.createTextButton(
         Common.UIString('Perform an audit\u2026'), this._showLauncherUI.bind(this), 'material-button default');
     landingCenter.appendChild(newButton);
   }
 
   _showLauncherUI() {
     this._dialog = new UI.Dialog();
     this._dialog.setOutsideClickCallback(event => event.consume(true));
     var root = UI.createShadowRootWithCoreStyles(this._dialog.contentElement, 'audits2/audits2Dialog.css');
     var auditsViewElement = root.createChild('div', 'audits2-view');
     var uiElement = auditsViewElement.createChild('div');
     var headerElement = uiElement.createChild('header');
-    headerElement.createChild('p').textContent = Common.UIString('Audits to perform');
+    this._headerTitleElement = headerElement.createChild('p');
+    this._headerTitleElement.textContent = Common.UIString('Audits to perform');
     uiElement.appendChild(headerElement);
 
-    var auditSelectorForm = uiElement.createChild('form', 'audits2-form');
+    this._auditSelectorForm = uiElement.createChild('form', 'audits2-form');
 
     for (var preset of Audits2.Audits2Panel.Presets) {
       preset.setting.setTitle(preset.title);
       var checkbox = new UI.ToolbarSettingCheckbox(preset.setting);
-      var row = auditSelectorForm.createChild('div', 'vbox audits2-launcher-row');
+      var row = this._auditSelectorForm.createChild('div', 'vbox audits2-launcher-row');
       row.appendChild(checkbox.element);
       row.createChild('span', 'audits2-launcher-description dimmed').textContent = preset.description;
     }
 
+    this._statusView = this._createStatusView(uiElement);
+
+    var buttonsRow = uiElement.createChild('div', 'audits2-dialog-buttons hbox');
     this._startButton =
         UI.createTextButton(Common.UIString('Run audit'), this._start.bind(this), 'material-button default');
-    auditSelectorForm.appendChild(this._startButton);
+    buttonsRow.appendChild(this._startButton);
     this._cancelButton = UI.createTextButton(Common.UIString('Cancel'), this._cancel.bind(this), 'material-button');
-    auditSelectorForm.appendChild(this._cancelButton);
-
-    this._statusView = this._createStatusView(uiElement);
+    buttonsRow.appendChild(this._cancelButton);
 
     this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
-    this._dialog.setMaxContentSize(new UI.Size(600, 400));
+    this._dialog.setMaxContentSize(new UI.Size(500, 400));
     this._dialog.show(this.mainElement());
     auditsViewElement.tabIndex = 0;
     auditsViewElement.focus();
   }
 
   /**
    * @param {!Element} launcherUIElement
    * @return {!Element}
    */
   _createStatusView(launcherUIElement) {
-    var statusView = launcherUIElement.createChild('div', 'audits2-status hbox hidden');
-    this._statusIcon = statusView.createChild('span', 'icon');
-    this._statusElement = statusView.createChild('p');
+    var statusView = launcherUIElement.createChild('div', 'audits2-status vbox hidden');
+    this._statusIcon = statusView.createChild('div', 'icon');
+    this._statusElement = statusView.createChild('div');
     this._updateStatus(Common.UIString('Loading...'));
     return statusView;
   }
 
   _start() {
     this._dialog.setCloseOnEscape(false);
     this._inspectedURL = SDK.targetManager.mainTarget().inspectedURL();
 
     var categoryIDs = [];
     for (var preset of Audits2.Audits2Panel.Presets) {
@@ skipping 22 matching lines @@
   _hideDialog() {
     if (!this._dialog)
       return;
     this._dialog.hide();
     delete this._dialog;
     delete this._statusView;
     delete this._statusIcon;
     delete this._statusElement;
     delete this._startButton;
     delete this._cancelButton;
+    delete this._auditSelectorForm;
+    delete this._headerTitleElement;
   }
 
   _cancel() {
     if (this._auditRunning) {
       this._updateStatus(Common.UIString('Cancelling\u2026'));
       this._stop();
     } else {
       this._hideDialog();
     }
   }
 
   _updateButton() {
     if (!this._dialog)
       return;
-    this._startButton.classList.toggle('default', !this._auditRunning);
+    this._startButton.classList.toggle('hidden', this._auditRunning);
     this._startButton.disabled = this._auditRunning;
     this._statusView.classList.toggle('hidden', !this._auditRunning);
+    this._auditSelectorForm.classList.toggle('hidden', this._auditRunning);
+    if (this._auditRunning)
+      this._headerTitleElement.textContent = Common.UIString('Auditing your web page \u2026');
+    else
+      this._headerTitleElement.textContent = Common.UIString('Audits to perform');
   }
 
   /**
    * @param {string} statusMessage
    */
   _updateStatus(statusMessage) {
     if (!this._dialog)
       return;
     this._statusElement.textContent = statusMessage;
   }
@@ skipping 78 matching lines @@
     }
   }
 
   /**
    * @param {string} profile
    */
   _loadedFromFile(profile) {
     var data = JSON.parse(profile);
     if (!data['lighthouseVersion'])
       return;
-    this._finish(/** @type {!ReportRenderer.ReportJSON} */(data));
+    this._finish(/** @type {!ReportRenderer.ReportJSON} */ (data));
   }
 };
 
 /**
  * @override
  */
 Audits2.Audits2Panel.ReportRenderer = class extends ReportRenderer {
   /**
    * Provides empty element for left nav
    * @override
@@ skipping 195 matching lines @@
 
   _renderReport() {
     this._resultsView.removeChildren();
     if (this._reportContainer) {
       this._resultsView.appendChild(this._reportContainer);
       return;
     }
 
     this._reportContainer = this._resultsView.createChild('div', 'report-container lh-root');
 
-    var dom = new DOM(/** @type {!Document} */(this._resultsView.ownerDocument));
+    var dom = new DOM(/** @type {!Document} */ (this._resultsView.ownerDocument));
     var detailsRenderer = new DetailsRenderer(dom);
     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);
@@ skipping 23 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;
   }
 };