Do not create counter icon-buttons when there are no errors / issues

Fixed: 477530170
Change-Id: I3ad55f156545ec45cab8ac9feeb4f0ce1abc166b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7526787
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>

Author: Kateryna Prokopenko

front_end/panels/console_counters/WarningErrorCounter.ts

@@ -12,9 +12,11 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+const {html, nothing, render} = Lit;
+
 const UIStrings = {
   /**
    * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
@@ -95,21 +97,25 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 
   render(
       html`<div class="status-buttons"
-         ><icon-button
+         >${
+          errors + warnings ? html`<icon-button
             .data=${iconData}
             title=${consoleTitle}
-            class=${'small' + warnings || errors ? nothing as unknown as string : 'hidden'}
+            class=${'small'}
             jslog=${VisualLogging.counter('console').track({
-        click: true
-      })}
-         ></icon-button><devtools-issue-counter
-            class=${'main-toolbar' + (issues ? '' : ' hidden')}
+            click: true
+          })}
+         ></icon-button>` :
+                              nothing}${
+          issues ? html`<devtools-issue-counter
+            class=${'main-toolbar'}
             title=${issuesTitle}
             .data=${issueCounterData}
             jslog=${VisualLogging.counter('issue').track({
-        click: true
-      })}
-         ></devtools-issue-counter></div>`,
+            click: true
+          })}
+         ></devtools-issue-counter>` :
+                   nothing}</div>`,
       target);
 };