Coverage: misc UI polish

- make sure landing page is not truncted when sized too small
- extract UI.createInlineButton() and use it in landing pages
    of Timeline and Coverage;
- fix selected background for percentage;

BUG=709352

Review-Url: https://codereview.chromium.org/2875793004
Cr-Commit-Position: refs/heads/master@{#471209}

third_party/WebKit/Source/devtools/BUILD.gn

@@ -659,6 +659,7 @@ all_devtools_files = [
   "front_end/ui/Icon.js",
   "front_end/ui/infobar.css",
   "front_end/ui/Infobar.js",
+  "front_end/ui/inlineButton.css",
   "front_end/ui/InplaceEditor.js",
   "front_end/ui/inspectorCommon.css",
   "front_end/ui/inspectorStyle.css",

third_party/WebKit/Source/devtools/front_end/coverage/CoverageListView.js

@@ -139,7 +139,7 @@ Coverage.CoverageListView = class extends UI.VBox {
       var nodeA = /** @type {!Coverage.CoverageListView.GridNode} */ (a);
       var nodeB = /** @type {!Coverage.CoverageListView.GridNode} */ (b);
 
-      return nodeA._displayURL.localeCompare(nodeB._displayURL);
+      return nodeA._url.localeCompare(nodeB._url);
     }
 
     /**
@@ -193,7 +193,6 @@ Coverage.CoverageListView.GridNode = class extends DataGrid.SortableDataGridNode
     /** @type {number|undefined} */
     this._lastUsedSize;
     this._url = coverageInfo.url();
-    this._displayURL = new Common.ParsedURL(this._url).displayName;
     this._maxSize = maxSize;
   }
 

third_party/WebKit/Source/devtools/front_end/coverage/CoverageView.js

@@ -33,12 +33,13 @@ Coverage.CoverageView = class extends UI.VBox {
     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() {
@@ -48,24 +49,25 @@ Coverage.CoverageView = class extends UI.VBox {
     }
     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() {
@@ -102,7 +104,8 @@ Coverage.CoverageView = class extends UI.VBox {
     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();
   }

third_party/WebKit/Source/devtools/front_end/coverage/coverageListView.css

@@ -51,3 +51,7 @@
   width: 45px;
   display: inline-block;
 }
+
+.data-grid:focus tr.selected span.percent-value {
+  color: #eee;
+}

third_party/WebKit/Source/devtools/front_end/coverage/coverageView.css

@@ -41,34 +41,12 @@
     flex: auto;
 }
 
-.progress-view {
-    display: flex;
+.landing-page {
     justify-content: center;
-    align-items: center;
-    font-size: 30px;
+    align-items:  center;
+    padding: 20px;
 }
 
-.progress-view .landing-page {
-    flex: none;
-    overflow: auto;
-    font-size: 13px;
-    line-height: 15px;
-    color: #777;
+.landing-page .message {
     white-space: pre-line;
 }
-
-.progress-view .landing-page button {
-    padding: 0;
-    vertical-align: sub;
-    border: 1px solid #ddd;
-    margin-top: 4px;
-    background-color: #f3f3f3;
-}
-
-.progress-view .landing-page button  > span {
-    margin: -1px 2px -3px -2px;
-}
-
-.coverage-results > div {
-    flex: auto;
-}

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

@@ -666,8 +666,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._landingPage.contentElement.classList.add('timeline-landing-page', 'fill');
     var centered = this._landingPage.contentElement.createChild('div');
 
-    var recordButton = UI.Toolbar.createActionButton(this._toggleRecordAction).element;
-    var reloadButton = UI.Toolbar.createActionButtonForId('main.reload').element;
+    var recordButton = UI.createInlineButton(UI.Toolbar.createActionButton(this._toggleRecordAction));
+    var reloadButton = UI.createInlineButton(UI.Toolbar.createActionButtonForId('main.reload'));
 
     centered.createChild('p').appendChild(UI.formatLocalized(
         'Click the record button %s or hit %s to capture a new recording.\n' +

third_party/WebKit/Source/devtools/front_end/timeline/timelinePanel.css

@@ -639,22 +639,6 @@
     white-space: pre-line;
 }
 
-.timeline-landing-page button {
-    padding: 0;
-    vertical-align: sub;
-    border: 1px solid #ddd;
-    margin-top: 4px;
-    background-color: #f3f3f3;
-}
-
-.timeline-landing-page button > span {
-    margin: -1px 2px -3px -2px;
-}
-
-.timeline-landing-page button > span:hover {
-    background-color: #333;
-}
-
 .timeline-landing-warning {
     background-color: #fffde7;
     padding: 16px 20px;

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

@@ -2014,3 +2014,17 @@ UI.ConfirmDialog = class extends UI.VBox {
     buttonsBar.appendChild(UI.createTextButton(Common.UIString('Cancel'), cancelCallback));
   }
 };
+
+/**
+ * @param {!UI.ToolbarToggle} toolbarButton
+ * @return {!Element}
+ */
+UI.createInlineButton = function(toolbarButton) {
+  var element = createElement('span');
+  var shadowRoot = UI.createShadowRootWithCoreStyles(element, 'ui/inlineButton.css');
+  element.classList.add('inline-button');
+  var toolbar = new UI.Toolbar('');
+  toolbar.appendToolbarItem(toolbarButton);
+  shadowRoot.appendChild(toolbar.element);
+  return element;
+};

third_party/WebKit/Source/devtools/front_end/ui/inlineButton.css

+/*
+ * Copyright 2017 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.
+ */
+
+:host {
+  display: inline-block;
+  border: 1px solid #ddd;
+  position: relative;
+  top: 7px;
+  margin: 2px;
+  background-color: #f3f3f3;
+}
+
+:host > * {
+  position: relative;
+  left: -2px;
+  width: 28px;
+  height: 26px;
+}
\ No newline at end of file

third_party/WebKit/Source/devtools/front_end/ui/module.json

@@ -61,6 +61,7 @@
         "filter.css",
         "glassPane.css",
         "infobar.css",
+        "inlineButton.css",
         "inspectorCommon.css",
         "inspectorStyle.css",
         "inspectorSyntaxHighlight.css",