[DevToolsIcon] Update remaining uses of the info icon to GM3.

Also delete the already unused info-icon.svg.

Screenshot: https://imgur.com/VyzVtu9.png
Bug: chromium:1427397
Change-Id: I2a89c6271512f80a74b619acd2dfdafa7a6799ba
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4445939
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: bmeurer

config/gni/devtools_grd_files.gni

@@ -145,7 +145,6 @@ grd_files_release_sources = [
   "front_end/Images/iframe-crossed.svg",
   "front_end/Images/iframe.svg",
   "front_end/Images/import.svg",
-  "front_end/Images/info-icon.svg",
   "front_end/Images/info.svg",
   "front_end/Images/issue-cross-filled.svg",
   "front_end/Images/issue-exclamation-filled.svg",

config/gni/devtools_image_files.gni

@@ -150,7 +150,6 @@ devtools_svg_sources = [
   "iframe-crossed.svg",
   "iframe.svg",
   "import.svg",
-  "info-icon.svg",
   "info.svg",
   "issue-cross-filled.svg",
   "issue-exclamation-filled.svg",

front_end/Images/src/info-icon.svg

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -505,8 +506,10 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
             {PH1: response.usage.toLocaleString(), PH2: response.quota.toLocaleString()}));
 
     if (!response.overrideActive && response.quota < 125829120) {  // 120 MB
+      const icon = new IconButton.Icon.Icon();
+      icon.data = {iconName: 'info', color: 'var(--icon-info)', width: '14px', height: '14px'};
       UI.Tooltip.Tooltip.install(this.quotaRow, i18nString(UIStrings.storageQuotaIsLimitedIn));
-      this.quotaRow.appendChild(UI.Icon.Icon.create('smallicon-info'));
+      this.quotaRow.appendChild(icon);
     }
 
     if (this.quotaUsage === null || this.quotaUsage !== response.usage) {

front_end/panels/application/StorageView.ts

@@ -40,6 +40,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../../../panels/network/forward/forward.js';
+import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UI from '../../legacy.js';
 import * as DataGrid from '../data_grid/data_grid.js';
 
@@ -777,7 +778,9 @@ export class DataGridNode extends DataGrid.DataGrid.DataGridNode<DataGridNode> {
     }
 
     if (blockedReasonString) {
-      const infoElement = UI.Icon.Icon.create('smallicon-info', 'cookie-warning-icon');
+      const infoElement = new IconButton.Icon.Icon();
+      infoElement.data = {iconName: 'info', color: 'var(--icon-info)', width: '14px', height: '14px'};
+      infoElement.classList.add('cookie-warning-icon');
       UI.Tooltip.Tooltip.install(infoElement, blockedReasonString);
       cell.insertBefore(infoElement, cell.firstChild);
       cell.classList.add('flagged-cookie-attribute-cell');

front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -17,6 +17,7 @@
 
 .cookies-table .cookie-warning-icon {
   margin-right: 4px;
+  margin-bottom: -2px;
 }
 
 .cookies-table td.flagged-cookie-attribute-cell .cookie-warning-icon {