[Extensions] Small UI changes for activity log

Summary of changes:
 - Move the clear activities button under the history/stream tabs
 - Add extension name and icon to activity log page
 - Add headings above activity log items

Refactoring of styles may be done in a follow up CL

Screenshots included in:
https://bugs.chromium.org/p/chromium/issues/detail?id=932768#c5

Bug: 932768
Change-Id: I249cee13e1b5c7e4bd319b5b788a0c05718ba8da
Reviewed-on: https://chromium-review.googlesource.com/c/1483738Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Kelvin Jiang <kelvinjiang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636668}

chrome/app/md_extensions_strings.grdp

@@ -128,11 +128,23 @@
     Error from line <ph name="ERROR_LINE_START">$1</ph> to <ph name="ERROR_LINE_END">$2</ph>
   </message>
   <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_PAGE_HEADING" desc="The heading of the page displaying an extension's activity log.">
-    Activity Log
+    <ph name="NAME_PH">$1</ph> - Activity Log
   </message>
   <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_SEARCH_LABEL" desc="The placeholder label to display in the search bar for the activity log page.">
     Search by API call/URL
   </message>
+  <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_TYPE_COLUMN" desc="The column heading for the activity's type.">
+    Type
+  </message>
+  <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_NAME_COLUMN" desc="The column heading for the activity's name.">
+    Activity Name
+  </message>
+  <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_COUNT_COLUMN" desc="The column heading for the activity's count.">
+    Count
+  </message>
+  <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_TIME_COLUMN" desc="The column heading for the activity's time.">
+    Time
+  </message>
   <message name="IDS_MD_EXTENSIONS_ACTIVITY_LOG_HISTORY_TAB_HEADING" desc="The heading for the activity log history tab.">
     History
   </message>

chrome/browser/resources/md_extensions/BUILD.gn

@@ -176,6 +176,7 @@ js_library("item") {
 js_library("item_behavior") {
   deps = [
     "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:load_time_data",
   ]
   externs_list = [ "$externs_path/developer_private.js" ]
 }

chrome/browser/resources/md_extensions/activity_log/BUILD.gn

@@ -48,10 +48,12 @@ js_library("activity_log") {
   deps = [
     ":activity_log_history",
     ":activity_log_stream",
+    "..:item_behavior",
     "..:navigation_helper",
     "//ui/webui/resources/cr_elements:cr_container_shadow_behavior",
     "//ui/webui/resources/cr_elements/cr_search_field:cr_search_field",
     "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js/cr/ui:focus_without_ink",
   ]
   externs_list = [

chrome/browser/resources/md_extensions/activity_log/activity_log.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="activity_log_history.html">
 <link rel="import" href="activity_log_stream.html">
+<link rel="import" href="../item_behavior.html">
 <link rel="import" href="../navigation_helper.html">
 <link rel="import" href="../shared_style.html">
 
 <dom-module id="extensions-activity-log">
   <template>
-    <style include="shared-style paper-button-style paper-tabs-style">
+    <style include="cr-icons shared-style paper-tabs-style">
       #activity-log-heading {
+        @apply --cr-title-text;
+        display: flex;
+        flex-direction: row;
         flex-grow: 1;
-        margin-inline-start: 16px;
       }
 
       #clear-activities-button {
@@ -31,6 +35,13 @@
         padding-inline-end: 8px;
       }
 
+      #icon {
+        height: 24px;
+        margin-inline-end: 12px;
+        margin-inline-start: 16px;
+        width: 24px;
+      }
+
       paper-tabs {
         font-size: inherit;
         height: 40px;
@@ -43,14 +54,17 @@
             <button id="closeButton" aria-label="$i18n{back}"
                 on-click="onCloseButtonTap_"></button>
           </paper-icon-button-light>
-          <span id="activity-log-heading">$i18n{activityLogPageHeading}</span>
+          <img id="icon" src="[[extensionInfo.iconUrl]]"
+              alt$="[[appOrExtension(
+                  extensionInfo.type,
+                  '$i18nPolymer{appIcon}',
+                  '$i18nPolymer{extensionIcon}')]]">
+          <div id="activity-log-heading">
+            [[i18n('activityLogPageHeading', extensionInfo.name)]]
+          </div>
           <cr-search-field label="$i18n{activityLogSearchLabel}"
               on-search-changed="onSearchChanged_">
           </cr-search-field >
-          <paper-button id="clear-activities-button"
-              on-click="onClearButtonTap_">
-            $i18n{clearActivities}
-          </paper-button>
         </div>
         <paper-tabs noink selected="{{selectedSubpage_}}">
           <paper-tab id="history-tab">
@@ -64,7 +78,7 @@
           <div>
             <template is="dom-if"
                 if="[[isHistoryTabSelected_(selectedSubpage_)]]" restamp>
-              <activity-log-history extension-id="[[extensionId]]"
+              <activity-log-history extension-id="[[extensionInfo.id]]"
                   delegate="[[delegate]]" last-search="[[lastSearch_]]">
               </activity-log-history>
             </template>
@@ -72,7 +86,7 @@
           <div>
             <template is="dom-if"
                 if="[[isStreamTabSelected_(selectedSubpage_)]]" restamp>
-              <activity-log-stream extension-id="[[extensionId]]"
+              <activity-log-stream extension-id="[[extensionInfo.id]]"
                   delegate="[[delegate]]">
               </activity-log-stream>
             </template>

chrome/browser/resources/md_extensions/activity_log/activity_log.js

@@ -23,11 +23,16 @@ cr.define('extensions', function() {
 
     behaviors: [
       CrContainerShadowBehavior,
+      I18nBehavior,
+      extensions.ItemBehavior,
     ],
 
     properties: {
-      /** @type {!string} */
-      extensionId: String,
+      /**
+       * The underlying ExtensionInfo for the details being displayed.
+       * @type {!chrome.developerPrivate.ExtensionInfo}
+       */
+      extensionInfo: Object,
 
       /** @type {!extensions.ActivityLogDelegate} */
       delegate: Object,
@@ -66,10 +71,6 @@ cr.define('extensions', function() {
      * @private
      */
     onViewExitFinish_: function() {
-      const activityLogStream = this.$$('activity-log-stream');
-      if (activityLogStream) {
-        activityLogStream.clearStream();
-      }
       this.selectedSubpage_ = ActivityLogSubpage.NONE;
     },
 
@@ -89,21 +90,10 @@ cr.define('extensions', function() {
       return this.selectedSubpage_ === ActivityLogSubpage.STREAM;
     },
 
-    /** @private */
-    onClearButtonTap_: function() {
-      if (this.selectedSubpage_ === ActivityLogSubpage.HISTORY) {
-        const activityLogHistory = this.$$('activity-log-history');
-        activityLogHistory.clearActivities();
-      } else {
-        const activityLogStream = this.$$('activity-log-stream');
-        activityLogStream.clearStream();
-      }
-    },
-
     /** @private */
     onCloseButtonTap_: function() {
       extensions.navigation.navigateTo(
-          {page: Page.DETAILS, extensionId: this.extensionId});
+          {page: Page.DETAILS, extensionId: this.extensionInfo.id});
     },
 
     /**

chrome/browser/resources/md_extensions/activity_log/activity_log_history.html

@@ -2,12 +2,44 @@
 
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/promise_resolver.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="activity_log_history_item.html">
 <link rel="import" href="../shared_style.html">
 
 <dom-module id="activity-log-history">
   <template>
-    <style include="shared-style"></style>
+    <style include="paper-button-style shared-style">
+      :host {
+        --activity-log-call-and-count-width: 529px;
+        --activity-type-width: 85px;
+        --activity-count-width: 100px;
+      }
+
+      .activity-table-headings {
+        max-width: var(--activity-log-call-and-count-width);
+      }
+
+      #activity-type {
+        flex: 0 var(--activity-type-width);
+      }
+
+      #activity-key {
+        flex: 1;
+        margin-inline-start: 10px;
+      }
+
+      #activity-count {
+        flex: 0 var(--activity-count-width);
+        text-align: end;
+      }
+    </style>
+    <div class="activity-subpage-header">
+      <paper-button class="clear-activities-button"
+          on-click="onClearActivitiesClick_">
+        $i18n{clearActivities}
+      </paper-button>
+    </div>
     <div id="loading-activities" class="activity-message"
         hidden$="[[!shouldShowLoadingMessage_(
             pageState_)]]">
@@ -20,6 +52,11 @@
     </div>
     <div id="activity-list"
         hidden$="[[!shouldShowActivities_(pageState_, activityData_)]]">
+      <div class="activity-table-headings">
+        <span id="activity-type">$i18n{activityLogTypeColumn}</span>
+        <span id="activity-key">$i18n{activityLogNameColumn}</span>
+        <span id="activity-count">$i18n{activityLogCountColumn}</span>
+      </div>
       <template is="dom-repeat" items="[[activityData_]]">
         <activity-log-history-item data="[[item]]">
         </activity-log-history-item>

chrome/browser/resources/md_extensions/activity_log/activity_log_history.js

@@ -263,7 +263,8 @@ cr.define('extensions', function() {
           this.activityData_.length > 0;
     },
 
-    clearActivities: function() {
+    /** @private */
+    onClearActivitiesClick_: function() {
       this.delegate.deleteActivitiesFromExtension(this.extensionId).then(() => {
         this.processActivities_([]);
       });

chrome/browser/resources/md_extensions/activity_log/activity_log_history_item.html

@@ -15,7 +15,6 @@
         border-top: var(--cr-separator-line);
         display: block;
         padding: 8px var(--cr-section-padding);
-        --activity-log-call-and-count-width: 529px;
       }
 
       #activity-item-main-row {
@@ -48,7 +47,7 @@
       }
 
       #activity-type {
-        flex: 0 85px;
+        flex: 0 var(--activity-type-width);
       }
 
       #activity-key {
@@ -60,7 +59,7 @@
       }
 
       #activity-count {
-        flex: 0 100px;
+        flex: 0 var(--activity-count-width);
         text-align: end;
       }
 

chrome/browser/resources/md_extensions/activity_log/activity_log_stream.html

@@ -2,17 +2,38 @@
 
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="activity_log_stream_item.html">
 <link rel="import" href="../shared_style.html">
 
 <dom-module id="activity-log-stream">
   <template>
     <style include="shared-style paper-button-style">
-      #activity-log-stream-header {
-        justify-content: flex-end;
+      :host {
+        --activity-log-call-and-time-width: 590px;
+        --activity-type-width: 85px;
+        --activity-time-width: 100px;
+      }
+
+      .activity-table-headings {
+        max-width: var(--activity-log-call-and-time-width);
+      }
+
+      #activity-type {
+        flex: 0 var(--activity-type-width);
+      }
+
+      #activity-key {
+        flex: 1;
+        margin-inline-start: 10px;
+      }
+
+      #activity-time {
+        flex: 0 var(--activity-time-width);
+        text-align: end;
       }
     </style>
-    <div id="activity-log-stream-header" class="page-header">
+    <div class="activity-subpage-header">
       <paper-button id="toggle-stream-button" on-click="onToggleButtonClick_">
         <span hidden$="[[isStreamOn_]]">
           $i18n{startActivityStream}
@@ -21,6 +42,10 @@
           $i18n{stopActivityStream}
         </span>
       </paper-button>
+      <paper-button class="clear-activities-button"
+          on-click="clearStream_">
+        $i18n{clearActivities}
+      </paper-button>
     </div>
     <div id="empty-stream-message" class="activity-message"
         hidden$="[[!isStreamEmpty_(activityStream_.length)]]">
@@ -33,6 +58,11 @@
     </div>
     <div id="activity-stream-list"
         hidden$="[[isStreamEmpty_(activityStream_.length)]]">
+      <div class="activity-table-headings">
+        <span id="activity-type">$i18n{activityLogTypeColumn}</span>
+        <span id="activity-key">$i18n{activityLogNameColumn}</span>
+        <span id="activity-time">$i18n{activityLogTimeColumn}</span>
+      </div>
       <template is="dom-repeat" items="[[activityStream_]]">
         <activity-log-stream-item id="[[item.id]]" data="[[item]]">
         </activity-log-stream-item>

chrome/browser/resources/md_extensions/activity_log/activity_log_stream.js

@@ -82,10 +82,11 @@ cr.define('extensions', function() {
     /** @override */
     detached: function() {
       this.pauseStream_();
-      this.clearStream();
+      this.clearStream_();
     },
 
-    clearStream: function() {
+    /** @private */
+    clearStream_: function() {
       this.activityStream_ = [];
     },
 

chrome/browser/resources/md_extensions/activity_log/activity_log_stream_item.html

@@ -14,7 +14,6 @@
         border-top: var(--cr-separator-line);
         display: block;
         padding: 8px var(--cr-section-padding);
-        --activity-log-call-and-time-width: 590px;
       }
 
       #activity-item-main-row {
@@ -38,7 +37,7 @@
       }
 
       #activity-type {
-        flex: 0 85px;
+        flex: 0 var(--activity-type-width);
       }
 
       #activity-name {
@@ -50,7 +49,7 @@
       }
 
       #activity-time {
-        flex: 0 100px;
+        flex: 0 var(--activity-time-width);
         text-align: end;
       }
 

chrome/browser/resources/md_extensions/detail_view.html

@@ -15,6 +15,7 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

chrome/browser/resources/md_extensions/detail_view.js

@@ -16,7 +16,7 @@ cr.define('extensions', function() {
     properties: {
       /**
        * The underlying ExtensionInfo for the details being displayed.
-       * @type {chrome.developerPrivate.ExtensionInfo}
+       * @type {!chrome.developerPrivate.ExtensionInfo}
        */
       data: Object,
 

chrome/browser/resources/md_extensions/manager.html

@@ -97,7 +97,7 @@
       <cr-lazy-render id="activity-log">
         <template>
           <extensions-activity-log delegate="[[delegate]]" slot="view"
-              extension-id="[[activityLogItemId_]]">
+              extension-info="[[activityLogItem_]]">
           </extensions-activity-log>
         </template>
       </cr-lazy-render>

chrome/browser/resources/md_extensions/manager.js

@@ -98,10 +98,11 @@ cr.define('extensions', function() {
       detailViewItem_: Object,
 
       /**
-       * The id of the item for the activity log view subpage.
-       * See also errorPageItem_.
+       * The item that provides some information about the current extension
+       * for the activity log view subpage. See also errorPageItem_.
+       * @private {!chrome.developerPrivate.ExtensionInfo|undefined}
        */
-      activityLogItemId_: String,
+      activityLogItem_: Object,
 
       /** @private {!Array<!chrome.developerPrivate.ExtensionInfo>} */
       extensions_: Array,
@@ -486,7 +487,7 @@ cr.define('extensions', function() {
           return;
         }
 
-        this.activityLogItemId_ = assert(data.id);
+        this.activityLogItem_ = assert(data);
       }
 
       if (fromPage != toPage) {

chrome/browser/resources/md_extensions/shared_style.html

@@ -17,6 +17,29 @@
         text-align: center;
       }
 
+      .activity-subpage-header {
+        border-bottom: var(--cr-separator-line);
+        display: flex;
+        justify-content: flex-end;
+        padding: 8px 12px;
+      }
+
+      .activity-table-headings {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        font-weight: 500;
+        margin-inline-end: auto;
+
+        /* Match separator height. */
+        min-height: calc(var(--cr-section-min-height) - var(--separator-gap));
+        padding: 0 var(--cr-section-padding);
+      }
+
+      .clear-activities-button {
+        margin: 0 8px;
+      }
+
       .page-container {
         height: 100%;
         overflow: overlay;

chrome/browser/ui/webui/extensions/extensions_ui.cc

@@ -187,6 +187,10 @@ content::WebUIDataSource* CreateMdExtensionsSource(Profile* profile,
     {"accessibilityErrorMultiLine",
      IDS_MD_EXTENSIONS_ACCESSIBILITY_ERROR_MULTI_LINE},
     {"activityLogPageHeading", IDS_MD_EXTENSIONS_ACTIVITY_LOG_PAGE_HEADING},
+    {"activityLogTypeColumn", IDS_MD_EXTENSIONS_ACTIVITY_LOG_TYPE_COLUMN},
+    {"activityLogNameColumn", IDS_MD_EXTENSIONS_ACTIVITY_LOG_NAME_COLUMN},
+    {"activityLogCountColumn", IDS_MD_EXTENSIONS_ACTIVITY_LOG_COUNT_COLUMN},
+    {"activityLogTimeColumn", IDS_MD_EXTENSIONS_ACTIVITY_LOG_TIME_COLUMN},
     {"activityLogSearchLabel", IDS_MD_EXTENSIONS_ACTIVITY_LOG_SEARCH_LABEL},
     {"activityLogHistoryTabHeading",
      IDS_MD_EXTENSIONS_ACTIVITY_LOG_HISTORY_TAB_HEADING},

chrome/test/data/webui/extensions/activity_log_history_test.js

@@ -138,6 +138,11 @@ suite('ExtensionsActivityLogHistoryTest', function() {
     activityLogHistory.remove();
   });
 
+  function getHistoryItems() {
+    return activityLogHistory.shadowRoot.querySelectorAll(
+        'activity-log-history-item');
+  }
+
   test('activities are present for extension', function() {
     proxyDelegate.testActivities = testActivities;
 
@@ -147,9 +152,9 @@ suite('ExtensionsActivityLogHistoryTest', function() {
       testVisible('#no-activities', false);
       testVisible('#loading-activities', false);
       testVisible('#activity-list', true);
+      testVisible('.activity-table-headings', true);
 
-      const activityLogItems = activityLogHistory.shadowRoot.querySelectorAll(
-          'activity-log-history-item');
+      const activityLogItems = getHistoryItems();
       expectEquals(activityLogItems.length, 2);
 
       // Test the order of the activity log items here. This test is in this
@@ -171,8 +176,7 @@ suite('ExtensionsActivityLogHistoryTest', function() {
 
     return setupActivityLogHistory().then(() => {
       Polymer.dom.flush();
-      const activityLogItems = activityLogHistory.shadowRoot.querySelectorAll(
-          'activity-log-history-item');
+      const activityLogItems = getHistoryItems();
 
       // One activity should be shown for each content script name.
       expectEquals(activityLogItems.length, 2);
@@ -189,8 +193,7 @@ suite('ExtensionsActivityLogHistoryTest', function() {
 
     return setupActivityLogHistory().then(() => {
       Polymer.dom.flush();
-      const activityLogItems = activityLogHistory.shadowRoot.querySelectorAll(
-          'activity-log-history-item');
+      const activityLogItems = getHistoryItems();
 
       // First activity should be split into two groups as it has two actions
       // recorded in the other.webRequest object. We display the names of these
@@ -221,9 +224,7 @@ suite('ExtensionsActivityLogHistoryTest', function() {
 
         return setupActivityLogHistory().then(() => {
           Polymer.dom.flush();
-          const activityLogItems =
-              activityLogHistory.shadowRoot.querySelectorAll(
-                  'activity-log-history-item');
+          const activityLogItems = getHistoryItems();
 
           expectEquals(activityLogItems.length, 2);
           proxyDelegate.resetResolver('getExtensionActivityLog');
@@ -235,11 +236,7 @@ suite('ExtensionsActivityLogHistoryTest', function() {
               .then(() => proxyDelegate.whenCalled('getExtensionActivityLog'))
               .then(() => {
                 Polymer.dom.flush();
-                expectEquals(
-                    1,
-                    activityLogHistory.shadowRoot
-                        .querySelectorAll('activity-log-history-item')
-                        .length);
+                expectEquals(1, getHistoryItems().length);
               });
         });
       });
@@ -254,11 +251,7 @@ suite('ExtensionsActivityLogHistoryTest', function() {
       testVisible('#no-activities', true);
       testVisible('#loading-activities', false);
       testVisible('#activity-list', false);
-      expectEquals(
-          activityLogHistory.shadowRoot
-              .querySelectorAll('activity-log-history-item')
-              .length,
-          0);
+      expectEquals(0, getHistoryItems().length);
     });
   });
 
@@ -277,4 +270,22 @@ suite('ExtensionsActivityLogHistoryTest', function() {
       testVisible('#activity-list', false);
     });
   });
+
+  test('clicking on clear button clears the activity log history', function() {
+    proxyDelegate.testActivities = testActivities;
+
+    return setupActivityLogHistory().then(() => {
+      Polymer.dom.flush();
+
+      expectEquals(2, getHistoryItems().length);
+      activityLogHistory.$$('.clear-activities-button').click();
+      return proxyDelegate.whenCalled('deleteActivitiesFromExtension')
+          .then(() => {
+            Polymer.dom.flush();
+            testVisible('#no-activities', true);
+            testVisible('.activity-table-headings', false);
+            expectEquals(0, getHistoryItems().length);
+          });
+    });
+  });
 });

chrome/test/data/webui/extensions/activity_log_stream_test.js

@@ -72,7 +72,7 @@ suite('ExtensionsActivityLogStreamTest', function() {
     Polymer.dom.flush();
 
     // Stream should be on when element is first attached to the DOM.
-    testVisible('#activity-log-stream-header', true);
+    testVisible('.activity-subpage-header', true);
     testVisible('#empty-stream-message', true);
     testVisible('#stream-started-message', true);
 
@@ -125,11 +125,24 @@ suite('ExtensionsActivityLogStreamTest', function() {
     proxyDelegate.getOnExtensionActivity().callListeners(contentScriptActivity);
 
     Polymer.dom.flush();
-    streamItems = getStreamItems();
+    let streamItems = getStreamItems();
     expectEquals(2, streamItems.length);
 
     // We should see two items: one for every script called.
     expectEquals(streamItems[0].$$('#activity-name').innerText, 'script1.js');
     expectEquals(streamItems[1].$$('#activity-name').innerText, 'script2.js');
   });
+
+  test('clicking on clear button clears the activity log stream', function() {
+    proxyDelegate.getOnExtensionActivity().callListeners(activity1);
+
+    Polymer.dom.flush();
+    expectEquals(1, getStreamItems().length);
+    testVisible('.activity-table-headings', true);
+    activityLogStream.$$('.clear-activities-button').click();
+
+    Polymer.dom.flush();
+    expectEquals(0, getStreamItems().length);
+    testVisible('.activity-table-headings', false);
+  });
 });

chrome/test/data/webui/extensions/activity_log_test.js

@@ -16,6 +16,13 @@ suite('ExtensionsActivityLogTest', function() {
    * @type {extensions.ActivityLog}
    */
   let activityLog;
+
+  /**
+   * Backing extension info for the activity log.
+   * @type {chrome.developerPrivate.ExtensionInfo}
+   */
+  let extensionInfo;
+
   let proxyDelegate;
   let testVisible;
 
@@ -69,7 +76,11 @@ suite('ExtensionsActivityLogTest', function() {
     activityLog = new extensions.ActivityLog();
     testVisible = extension_test_util.testVisible.bind(null, activityLog);
 
-    activityLog.extensionId = EXTENSION_ID;
+    extensionInfo = extension_test_util.createExtensionInfo({
+      id: EXTENSION_ID,
+    });
+    activityLog.extensionInfo = extensionInfo;
+
     proxyDelegate = new extensions.TestService();
     activityLog.delegate = proxyDelegate;
     proxyDelegate.testActivities = testActivities;
@@ -148,27 +159,6 @@ suite('ExtensionsActivityLogTest', function() {
         });
   });
 
-  test('clicking on clear activities button clears activities', function() {
-    activityLog.$$('#clear-activities-button').click();
-
-    return proxyDelegate.whenCalled('deleteActivitiesFromExtension')
-        .then(() => {
-          Polymer.dom.flush();
-          const activityLogHistory = activityLog.$$('activity-log-history');
-          testVisible =
-              extension_test_util.testVisible.bind(null, activityLogHistory);
-
-          testVisible('#no-activities', true);
-          testVisible('#loading-activities', false);
-          testVisible('#activity-list', false);
-          expectEquals(
-              activityLogHistory.shadowRoot
-                  .querySelectorAll('activity-log-history-item')
-                  .length,
-              0);
-        });
-  });
-
   test('clicking on back button navigates to the details page', function() {
     Polymer.dom.flush();
 
@@ -201,32 +191,4 @@ suite('ExtensionsActivityLogTest', function() {
       testVisible('activity-log-history', true);
     });
   });
-
-  test('clicking on clear button clears the activity log stream', function() {
-    Polymer.dom.flush();
-
-    // Navigate to the activity log stream.
-    activityLog.$$('#real-time-tab').click();
-    Polymer.dom.flush();
-    testVisible('activity-log-stream', true);
-
-    const activityLogStream = activityLog.$$('activity-log-stream');
-    const testVisibleForStream =
-        extension_test_util.testVisible.bind(null, activityLogStream);
-    proxyDelegate.getOnExtensionActivity().callListeners(testActivityEvent);
-
-    Polymer.dom.flush();
-    testVisibleForStream('#empty-stream-message', false);
-
-    expectEquals(
-        1,
-        activityLogStream.shadowRoot
-            .querySelectorAll('activity-log-stream-item')
-            .length);
-
-    activityLog.$$('#clear-activities-button').click();
-    Polymer.dom.flush();
-
-    testVisibleForStream('#empty-stream-message', true);
-  });
 });

chrome/test/data/webui/extensions/manager_unit_test.js

@@ -185,7 +185,7 @@ cr.define('extension_manager_tests', function() {
 
       const activityLog = manager.$$('extensions-activity-log');
       expectTrue(!!activityLog);  // View should now be present.
-      expectEquals(extension.id, activityLog.extensionId);
+      expectEquals(extension.id, activityLog.extensionInfo.id);
 
       // Test that updates to different extensions does not change which
       // extension the activity log points to. Regression test for
@@ -195,7 +195,7 @@ cr.define('extension_manager_tests', function() {
         extensionInfo: secondExtension,
       });
 
-      expectEquals(extension.id, activityLog.extensionId);
+      expectEquals(extension.id, activityLog.extensionInfo.id);
     });
 
     test(assert(TestNames.ProfileSettings), function() {