Add toolbar showing count of warnings to issues panel

Add a toolbar to the issues pane. Its only content for now is an icon
with the number of detected issues next to it. More content will be
added later. Explicitly displaying a count of 0 fixes the confusion
caused by the issues pane being completely empty when there are no
issues to display.

Screenshot: https://imgur.com/mWHVYc0

Fixed: chromium:1053466
Change-Id: I8a325f651d15f76960841b9b69a0693eb53fd63f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2078232
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Sigurd Schneider <sigurds@chromium.org>

front_end/issues/IssuesPane.js

@@ -86,6 +86,17 @@ export class IssuesPaneImpl extends UI.Widget.VBox {
     this._issueViews = new Map();
     this._selectedIssue = null;
 
+    const issuesToolbarContainer = this.contentElement.createChild('div', 'issues-toolbar-container');
+    new UI.Toolbar.Toolbar('issues-toolbar-left', issuesToolbarContainer);
+    const rightToolbar = new UI.Toolbar.Toolbar('issues-toolbar-right', issuesToolbarContainer);
+    rightToolbar.appendSeparator();
+    const toolbarWarnings = new UI.Toolbar.ToolbarItem(createElement('div'));
+    const breakingChangeIcon = UI.Icon.Icon.create('largeicon-breaking-change');
+    toolbarWarnings.element.appendChild(breakingChangeIcon);
+    this._toolbarIssuesCount = toolbarWarnings.element.createChild('span', 'warnings-count-label');
+    this._updateIssuesCount();
+    rightToolbar.appendToolbarItem(toolbarWarnings);
+
     for (const issue of this._model.issues()) {
       this._addIssueView(issue);
     }
@@ -97,13 +108,14 @@ export class IssuesPaneImpl extends UI.Widget.VBox {
 
   _addIssueView(issue) {
     if (!(issue.code in issueDetails)) {
-      console.warn('Received issue with unknow code:', issue.code);
+      console.warn('Received issue with unknown code:', issue.code);
       return;
     }
 
     const view = new IssueView(this, issue);
     view.show(this.contentElement);
     this._issueViews.set(issue.code, view);
+    this._updateIssuesCount();
   }
 
   _issuesCleared() {
@@ -112,6 +124,11 @@ export class IssuesPaneImpl extends UI.Widget.VBox {
     }
     this._issueViews.clear();
     this._selectedIssue = null;
+    this._updateIssuesCount();
+  }
+
+  _updateIssuesCount() {
+    this._toolbarIssuesCount.textContent = this._model.size();
   }
 
   handleSelect(issue) {

front_end/issues/issuesPane.css

@@ -101,3 +101,21 @@
 .issue.collapsed .body-wrapper {
     max-height: 0;
 }
+
+.issues-toolbar-container {
+    display: flex;
+    flex: none;
+}
+
+.issues-toolbar-container > .toolbar {
+    background-color: var(--toolbar-bg-color);
+    border-bottom: var(--divider-border);
+}
+
+.issues-toolbar-left {
+    flex: 1 1 auto;
+}
+
+.issues-toolbar-right {
+    padding-right: 6px;
+}

front_end/sdk/IssuesModel.js

@@ -86,6 +86,13 @@ export class IssuesModel extends SDKModel {
     return this._browserIssuesByCode.values();
   }
 
+   /**
+   * @return {number}
+   */
+  size() {
+    return this._browserIssuesByCode.size;
+  }
+
   /**
    * @param {!*} obj
    * @param {!Issue} issue