[ExtensionSafetyCheck] Potentially unsafe extension row element imple…

…mentation

Implements the inner elements and integrate the extension apis.

Bug: 1432194
Change-Id: I521e2aa4b44a798b34b7d56384014312e0305665
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4490823
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Zack Han <zackhan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1158488}

chrome/browser/resources/extensions/item_list.html

@@ -78,7 +78,7 @@
 </style>
 <div id="container">
   <template is="dom-if" if="[[showSafetyCheckReviewPanel_]]">
-    <extensions-review-panel extensions="[[extensions]]">
+    <extensions-review-panel extensions="[[extensions]]" delegate="[[delegate]]">
     </extensions-review-panel>
   </template>
   <managed-footnote hidden="[[filter]]"></managed-footnote>

chrome/browser/resources/extensions/review_panel.html

@@ -48,7 +48,7 @@
     padding-inline-start: 50px;
   }
 
-  .extension-row > .cr-row {
+  .extension-row.cr-row {
     border: none;
   }
 
@@ -86,8 +86,23 @@ <h3 id="headingText">[[headerString_]]</h3>
 <iron-collapse class="extension-list"
     opened="[[unsafeExtensionsReviewListExpanded_]]">
   <template is="dom-repeat" items="[[unsafeExtensions_]]">
-    <div class="extension-row">
-      <!-- TODO(crbug.com/1432194): Implement extension row element in the next CL. -->
+    <div class="extension-row cr-row">
+      <img id="extension-icon" src="[[item.iconUrl]]" role="presentation">
+      <div class="display-name text-elide">
+        <div class="extension-representation">[[item.name]]</div>
+        <div class="secondary">
+          <!-- TODO(crbug.com/1432194): Add secondary string
+            (trigger warnings). -->
+          Placeholder for the trigger text.
+        </div>
+      </div>
+      <cr-icon-button iron-icon="cr:delete"
+          actionable on-click="onRemoveExtensionClick_">
+      </cr-icon-button>
+      <cr-icon-button class="icon-more-vert header-aligned-button"
+        id="makeExceptionMenuButton"
+        on-click="onMakeExceptionMenuClick_"
+        focus-type="makeExceptionMenuButton"></cr-icon-button>
     </div>
   </template>
   <div class="cr-row first">
@@ -99,3 +114,10 @@ <h3 id="headingText">[[headerString_]]</h3>
     </cr-button>
   </div>
 </iron-collapse>
+<cr-action-menu id="makeExceptionMenu">
+  <button id="menuKeepExtension"
+    class="dropdown-item"
+    on-click="onKeepExtensionClick_">
+      $i18n{safetyCheckKeepExtension}
+  </button>
+</cr-action-menu>

chrome/browser/resources/extensions/review_panel.ts

@@ -7,15 +7,18 @@ import 'chrome://resources/cr_elements/cr_shared_style.css.js';
 import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
 import './shared_style.css.js';
 
+import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import {CrExpandButtonElement} from 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.js';
 import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {ItemDelegate} from './item.js';
 import {getTemplate} from './review_panel.html.js';
 
 export interface ExtensionsReviewPanelElement {
   $: {
+    makeExceptionMenu: CrActionMenuElement,
     reviewPanelContainer: HTMLDivElement,
     expandButton: CrExpandButtonElement,
     headingText: HTMLElement,
@@ -35,9 +38,8 @@ export class ExtensionsReviewPanelElement extends PolymerElement {
 
   static get properties() {
     return {
-      /**
-       * List of installed extensions.
-       */
+      delegate: Object,
+
       extensions: {
         type: Array,
         notify: true,
@@ -73,14 +75,15 @@ export class ExtensionsReviewPanelElement extends PolymerElement {
     return ['onExtensionsChanged_(extensions.*)'];
   }
 
+  delegate: ItemDelegate;
   extensions: chrome.developerPrivate.ExtensionInfo[];
   private unsafeExtensions_: chrome.developerPrivate.ExtensionInfo[]|null;
   private headerString_: string;
   private subtitleString_: string;
   private unsafeExtensionsReviewListExpanded_: boolean;
 
   private async onExtensionsChanged_() {
-    this.unsafeExtensions_ = [];
+    this.unsafeExtensions_ = this.getUnsafeExtensions_(this.extensions);
     this.headerString_ =
         await PluralStringProxyImpl.getInstance().getPluralString(
             'safetyCheckTitle', this.unsafeExtensions_.length);
@@ -89,7 +92,39 @@ export class ExtensionsReviewPanelElement extends PolymerElement {
             'safetyCheckDescription', this.unsafeExtensions_.length);
   }
 
-  private onRemoveAllClick_() {
+  private getUnsafeExtensions_(extensions:
+                                   chrome.developerPrivate.ExtensionInfo[]):
+      chrome.developerPrivate.ExtensionInfo[] {
+    // TODO(crbug.com/1432194): Update this filter criteria when new trigger
+    // texts are added to getExtensionInfo API.
+    return extensions.filter(
+        extension => extension.disableReasons.corruptInstall ||
+            extension.disableReasons.suspiciousInstall ||
+            extension.runtimeWarnings.length || !!extension.blacklistText);
+  }
+
+  /**
+   * Opens the extension action menu.
+   */
+  private onMakeExceptionMenuClick_(e: Event) {
+    this.$.makeExceptionMenu.showAt(e.target as HTMLElement);
+  }
+
+  /**
+   * Acknowledges the extension safety check warning.
+   */
+  private onKeepExtensionClick_() {
+    this.$.makeExceptionMenu.close();
+    // TODO(crbug.com/1432194): Call the private API to keep the extension in
+    // pref.
+  }
+
+  private onRemoveExtensionClick_(
+      e: DomRepeatEvent<chrome.developerPrivate.ExtensionInfo>): void {
+    this.delegate.deleteItem(e.model.item.id);
+  }
+
+  private onRemoveAllExtensions_(): void {
     // TODO(crbug.com/1432194): Call the private API to remove all extensions.
   }
 }

chrome/test/data/webui/extensions/review_panel_test.ts

@@ -55,11 +55,11 @@ suite('ExtensionsReviewPanel', function() {
     // TODO(http://crbug.com/1432194): Update the unsafe extensions number
     const headingArgs = pluralString.getArgs('getPluralString')[0];
     assertEquals('safetyCheckTitle', headingArgs.messageName);
-    assertEquals(0, headingArgs.itemCount);
+    assertEquals(1, headingArgs.itemCount);
 
     const descriptionArgs = pluralString.getArgs('getPluralString')[1];
     assertEquals('safetyCheckDescription', descriptionArgs.messageName);
-    assertEquals(0, descriptionArgs.itemCount);
+    assertEquals(1, descriptionArgs.itemCount);
 
     // Verify that Remove All button exists.
     const removeAllButton = element.$.removeAllButton;
@@ -95,5 +95,16 @@ suite('ExtensionsReviewPanel', function() {
     assertTrue(extensionsList.opened);
   });
 
+  test('ReviewPanelUnsafeExtensionRowsExist', async function() {
+    const extensionNameContainers =
+        element.shadowRoot!.querySelectorAll('.extension-row');
+    assertEquals(extensionNameContainers.length, 1);
+    assertEquals(
+        extensionNameContainers[0]
+            ?.querySelector('.extension-representation')
+            ?.textContent,
+        'Alpha');
+  });
+
   // TODO(http://crbug.com/1432194): Add tests to verify action functionalities.
 });