[Extensions Activity Log] Persist stream data between tab changes

This CL modifies the behavior of tab switches in activity log where:
 1) If a user switches from the stream tab to history tab, then back to
    the stream tab, the previous items in the stream should still be
    visible.
 2) The stream is paused if the user navigates away from the stream tab.

In order to accomplish this, some logic to manage the stream's
state and its event listener was moved from activity_log_stream to
activity_log.

Bug: 932768
Change-Id: I1f6197533d099b4c643c05c5c7280f8ec2217b55
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1601834
Commit-Queue: Kelvin Jiang <kelvinjiang@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#659337}

chrome/browser/resources/extensions/activity_log/activity_log.html

@@ -94,7 +94,7 @@
           </div>
           <div>
             <template is="dom-if"
-                if="[[isStreamTabSelected_(selectedSubpage_)]]" restamp>
+                if="[[isStreamTabSelected_(selectedSubpage_)]]">
               <activity-log-stream extension-id="[[extensionInfo.id]]"
                   delegate="[[delegate]]">
               </activity-log-stream>

chrome/browser/resources/extensions/activity_log/activity_log.js

@@ -41,6 +41,7 @@ cr.define('extensions', function() {
       selectedSubpage_: {
         type: Number,
         value: ActivityLogSubpage.NONE,
+        observer: 'onSelectedSubpageChanged_',
       },
     },
 
@@ -66,6 +67,11 @@ cr.define('extensions', function() {
      */
     onViewExitFinish_: function() {
       this.selectedSubpage_ = ActivityLogSubpage.NONE;
+      // clear the stream if the user is exiting the activity log page.
+      const activityLogStream = this.$$('activity-log-stream');
+      if (activityLogStream) {
+        activityLogStream.clearStream();
+      }
     },
 
     /**
@@ -84,6 +90,28 @@ cr.define('extensions', function() {
       return this.selectedSubpage_ === ActivityLogSubpage.STREAM;
     },
 
+    /**
+     * @private
+     * @param {!ActivityLogSubpage} newTab
+     * @param {!ActivityLogSubpage} oldTab
+     */
+    onSelectedSubpageChanged_: function(newTab, oldTab) {
+      const activityLogStream = this.$$('activity-log-stream');
+      if (activityLogStream) {
+        if (newTab === ActivityLogSubpage.STREAM) {
+          // Start the stream if the user is switching to the real-time tab.
+          // This will not handle the first tab switch to the real-time tab as
+          // the stream has not been attached to the DOM yet, and is handled
+          // instead by the stream's |attached| method.
+          activityLogStream.startStream();
+        } else if (oldTab === ActivityLogSubpage.STREAM) {
+          // Pause the stream if the user is navigating away from the real-time
+          // tab.
+          activityLogStream.pauseStream();
+        }
+      }
+    },
+
     /** @private */
     onCloseButtonTap_: function() {
       extensions.navigation.navigateTo(

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

@@ -59,7 +59,7 @@
         </span>
       </paper-button>
       <paper-button class="clear-activities-button"
-          on-click="clearStream_">
+          on-click="clearStream">
         $i18n{clearActivities}
       </paper-button>
     </div>

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

@@ -98,14 +98,10 @@ cr.define('extensions', function() {
 
     /** @override */
     attached: function() {
+      // Since this component is not restamped, this will only be called once
+      // in its lifecycle.
       this.listenerInstance_ = this.extensionActivityListener_.bind(this);
-      this.startStream_();
-    },
-
-    /** @override */
-    detached: function() {
-      this.pauseStream_();
-      this.clearStream_();
+      this.startStream();
     },
 
     /** @private */
@@ -113,13 +109,11 @@ cr.define('extensions', function() {
       this.$$('iron-list').notifyResize();
     },
 
-    /** @private */
-    clearStream_: function() {
+    clearStream: function() {
       this.splice('activityStream_', 0, this.activityStream_.length);
     },
 
-    /** @private */
-    startStream_: function() {
+    startStream: function() {
       if (this.isStreamOn_) {
         return;
       }
@@ -129,8 +123,7 @@ cr.define('extensions', function() {
           this.listenerInstance_);
     },
 
-    /** @private */
-    pauseStream_: function() {
+    pauseStream: function() {
       if (!this.isStreamOn_) {
         return;
       }
@@ -143,9 +136,9 @@ cr.define('extensions', function() {
     /** @private */
     onToggleButtonClick_: function() {
       if (this.isStreamOn_) {
-        this.pauseStream_();
+        this.pauseStream();
       } else {
-        this.startStream_();
+        this.startStream();
       }
     },
 

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

@@ -28,6 +28,14 @@ suite('ExtensionsActivityLogTest', function() {
 
   const testActivities = {activities: []};
 
+  const activity1 = {
+    extensionId: EXTENSION_ID,
+    activityType: chrome.activityLogPrivate.ExtensionActivityType.API_CALL,
+    time: 1550101623113,
+    args: JSON.stringify([null]),
+    apiCall: 'testAPI.testMethod',
+  };
+
   // Initialize an extension activity log before each test.
   setup(function() {
     PolymerTest.clearBody();
@@ -55,6 +63,14 @@ suite('ExtensionsActivityLogTest', function() {
     activityLog.remove();
   });
 
+  // Returns a list of visible stream items. The not([hidden]) selector is
+  // needed for iron-list as it reuses components but hides them when not in
+  // use.
+  function getStreamItems() {
+    return activityLog.$$('activity-log-stream')
+        .shadowRoot.querySelectorAll('activity-log-stream-item:not([hidden])');
+  }
+
   test('clicking on back button navigates to the details page', function() {
     Polymer.dom.flush();
 
@@ -75,8 +91,14 @@ suite('ExtensionsActivityLogTest', function() {
 
     // Navigate to the activity log stream.
     activityLog.$$('#real-time-tab').click();
+    Polymer.dom.flush();
+
+    // One activity is recorded and should appear in the stream.
+    proxyDelegate.getOnExtensionActivity().callListeners(activity1);
+
     Polymer.dom.flush();
     testVisible('activity-log-stream', true);
+    expectEquals(1, getStreamItems().length);
 
     // Navigate back to the activity log history tab.
     activityLog.$$('#history-tab').click();
@@ -85,6 +107,17 @@ suite('ExtensionsActivityLogTest', function() {
     proxyDelegate.whenCalled('getExtensionActivityLog').then(() => {
       Polymer.dom.flush();
       testVisible('activity-log-history', true);
+
+      // Another activity is recorded, but should not appear in the stream as
+      // the stream is inactive.
+      proxyDelegate.getOnExtensionActivity().callListeners(activity1);
+
+      activityLog.$$('#real-time-tab').click();
+      Polymer.dom.flush();
+
+      // The one activity in the stream should have persisted between tab
+      // switches.
+      expectEquals(1, getStreamItems().length);
     });
   });
 });