Coverage: misc UI polish

third_party/WebKit/Source/devtools/front_end/coverage/CoverageView.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.
 
 Coverage.CoverageView = class extends UI.VBox {
   constructor() {
     super(true);
 
     /** @type {?Coverage.CoverageModel} */
     this._model = null;
@@ skipping 15 matching lines @@
     var startWithReloadAction =
         /** @type {!UI.Action }*/ (UI.actionRegistry.action('coverage.start-with-reload'));
     this._startWithReloadButton = UI.Toolbar.createActionButton(startWithReloadAction);
     topToolbar.appendToolbarItem(this._startWithReloadButton);
 
     this._clearButton = new UI.ToolbarButton(Common.UIString('Clear all'), 'largeicon-clear');
     this._clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._reset.bind(this));
     topToolbar.appendToolbarItem(this._clearButton);
 
     this._coverageResultsElement = this.contentElement.createChild('div', 'coverage-results');
-    this._progressElement = this._coverageResultsElement.createChild('div', 'progress-view');
+    this._landingPage = this._buildLandingPage();
+
     this._listView = new Coverage.CoverageListView();
 
     this._statusToolbarElement = this.contentElement.createChild('div', 'coverage-toolbar-summary');
     this._statusMessageElement = this._statusToolbarElement.createChild('div', 'coverage-message');
-    this._showHelpScreen();
+    this._landingPage.show(this._coverageResultsElement);
   }
 
   _reset() {
     if (this._decorationManager) {
       this._decorationManager.dispose();
       this._decorationManager = null;
     }
     this._listView.reset();
     this._listView.detach();
-    this._coverageResultsElement.removeChildren();
-    this._showHelpScreen();
-
+    this._landingPage.show(this._coverageResultsElement);
     this._statusMessageElement.textContent = '';
   }
 
-  _showHelpScreen() {
-    this._coverageResultsElement.appendChild(this._progressElement);
-    this._progressElement.removeChildren();
-
-    var recordButton = UI.Toolbar.createActionButton(this._toggleRecordAction).element;
-    var reloadButton = UI.Toolbar.createActionButtonForId('coverage.start-with-reload').element;
-
-    this._progressElement.createChild('p', 'landing-page')
-        .appendChild(UI.formatLocalized(
-            'Click the record button %s to start capturing coverage.\n' +
-                'Click the reload button %s to reload and start capturing coverage.',
-            [recordButton, reloadButton]));
+  /**
+   * @return {!UI.VBox}
+   */
+  _buildLandingPage() {
+    var recordButton = UI.createInlineButton(UI.Toolbar.createActionButton(this._toggleRecordAction));
+    var reloadButton = UI.createInlineButton(UI.Toolbar.createActionButtonForId('coverage.start-with-reload'));
+    var widget = new UI.VBox();
+    var message = UI.formatLocalized(
+        'Click the record button %s to start capturing coverage.\n' +
+            'Click the reload button %s to reload and start capturing coverage.',
+        [recordButton, reloadButton]);
+    message.classList.add('message');
+    widget.contentElement.appendChild(message);
+    widget.element.classList.add('landing-page');
+    return widget;
   }
 
   _toggleRecording() {
     var enable = !this._toggleRecordAction.toggled();
 
     if (enable)
       this._startRecording();
     else
       this._stopRecording();
   }
@@ skipping 16 matching lines @@
       return;
     console.assert(!this._model, 'Attempting to start coverage twice');
     var model = new Coverage.CoverageModel(mainTarget);
     if (!model.start())
       return;
     this._model = model;
     this._decorationManager = new Coverage.CoverageDecorationManager(model);
     this._toggleRecordAction.setToggled(true);
     this._clearButton.setEnabled(false);
     this._startWithReloadButton.setEnabled(false);
-    this._coverageResultsElement.removeChildren();
+    if (this._landingPage.isShowing())
+      this._landingPage.detach();
     this._listView.show(this._coverageResultsElement);
     this._poll();
   }
 
   async _poll() {
     delete this._pollTimer;
     var updates = await this._model.poll();
     this._updateViews(updates);
     this._pollTimer = setTimeout(() => this._poll(), 700);
   }
@@ skipping 68 matching lines @@
         coverageView._toggleRecording();
         break;
       case 'coverage.start-with-reload':
         coverageView._startWithReload();
         break;
       default:
         console.assert(false, `Unknown action: ${actionId}`);
     }
   }
 };