nearby: show timer countdown for high visibility receiving page

http://screen/BSS3pyv4WRqJY73

Bug: 1156229
Change-Id: I132fd519bfff65b8a7052da90323c64800b1ae89
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2581883
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835867}

chrome/browser/nearby_sharing/nearby_share_delegate_impl.cc

@@ -163,6 +163,12 @@ void NearbyShareDelegateImpl::SettingsOpener::ShowSettingsPage(
     // Append a timestamp to make the url unique per-call. Otherwise, settings
     // will not respond to successive calls if the url does not change.
     query_string += "?" + sub_page + "&time=" + GetTimestampString();
+
+    if (sub_page == kStartReceivingQueryParam) {
+      // Attach high visibility shutoff timeout for display in webui.
+      query_string +=
+          "&timeout=" + base::NumberToString(kShutoffTimeout.InSeconds());
+    }
   }
 
   chrome::SettingsWindowManager::GetInstance()->ShowOSSettings(

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_high_visibility_page.html

@@ -51,7 +51,7 @@
       }
     </style>
     <nearby-page-template title="$i18n{nearbyShareFeatureName}"
-        sub-title="[[getSubTitle_(deviceName)]]"
+        sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]"
         cancel-button-label="$i18n{cancel}">
       <div id="content" slot="content">
         <div id="help">

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_high_visibility_page.js

@@ -20,16 +20,68 @@ Polymer({
       notify: true,
       type: String,
       value: 'DEVICE_NAME_NOT_SET',
+    },
+
+    /**
+     * Timestamp in milliseconds since unix epoch of when high visibility will
+     * be turned off.
+     * @type {number}
+     */
+    shutoffTimestamp: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  /**
+   * Calculated value of remaining seconds of high visibility mode.
+   * @private {number}
+   */
+  remainingTimeInSeconds_: 0,
+
+  /** @private {number} */
+  remainingTimeIntervalId_: -1,
+
+  /** @override */
+  attached() {
+    this.calculateRemainingTime_();
+    this.remainingTimeIntervalId_ = setInterval(() => {
+      this.calculateRemainingTime_();
+    }, 1000);
+  },
+
+  /** @override */
+  detached() {
+    if (this.remainingTimeIntervalId_ === -1) {
+      clearInterval(this.remainingTimeIntervalId_);
+      this.remainingTimeIntervalId_ = -1;
     }
   },
 
+  /** @private */
+  calculateRemainingTime_() {
+    const now = new Date().getTime();
+    const remainingTimeInMs =
+        this.shutoffTimestamp > now ? this.shutoffTimestamp - now : 0;
+    this.remainingTimeInSeconds_ = Math.trunc(remainingTimeInMs / 1000);
+  },
+
   /**
    * @return {string} localized string
-   * @private
+   * @protected
    */
   getSubTitle_() {
-    // TODO(joonbug): Get timer value and dynamically update this.
-    const timeValue = this.i18n('nearbyShareHighVisibilitySubTitleMinutes', 5);
+    let timeValue = '';
+    if (this.remainingTimeInSeconds_ > 60) {
+      timeValue = this.i18n(
+          'nearbyShareHighVisibilitySubTitleMinutes',
+          Math.ceil(this.remainingTimeInSeconds_ / 60));
+    } else {
+      timeValue = this.i18n(
+          'nearbyShareHighVisibilitySubTitleSeconds',
+          this.remainingTimeInSeconds_);
+    }
+
     return this.i18n(
         'nearbyShareHighVisibilitySubTitle', this.deviceName, timeValue);
   },

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.html

@@ -24,7 +24,8 @@
       <div id="content" slot="body" aria-live="polite">
         <cr-view-manager id="viewManager">
           <nearby-share-high-visibility-page id="[[Page.HIGH_VISIBILITY]]"
-              slot="view" device-name="[[settings.deviceName]]">
+              slot="view" device-name="[[settings.deviceName]]"
+              shutoff-timestamp="[[highVisibilityShutoffTimestamp_]]">
           </nearby-share-high-visibility-page>
           <nearby-share-confirm-page id="[[Page.CONFIRM]]" slot="view"
               share-target="[[shareTarget]]"

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_receive_dialog.js

@@ -92,6 +92,13 @@ Polymer({
   /** @private {number} */
   closeTimeoutId_: 0,
 
+  /**
+   * Timestamp in milliseconds since unix epoch of when high visibility will
+   * be turned off.
+   * @private {number}
+   */
+  highVisibilityShutoffTimestamp_: 0,
+
   /** @override */
   attached() {
     this.closing_ = false;
@@ -223,14 +230,21 @@ Polymer({
 
   /**
    * Call to show the high visibility page.
+   * @param {number} shutoffTimeoutInSeconds Duration of the high
+   *     visibility session, after which the session would be turned off.
    */
-  showHighVisibilityPage() {
+  showHighVisibilityPage(shutoffTimeoutInSeconds) {
     // Check if we need to wait for settings values from mojo or if we need to
     // run onboarding first before showing the page.
-    if (this.deferCallIfNecessary(this.showHighVisibilityPage.bind(this))) {
+    if (this.deferCallIfNecessary(
+            this.showHighVisibilityPage.bind(this, shutoffTimeoutInSeconds))) {
       return;
     }
 
+    // Date().getTime() returns current time in milliseconds since unix epoch.
+    this.highVisibilityShutoffTimestamp_ =
+        new Date().getTime() + (shutoffTimeoutInSeconds * 1000);
+
     // Register a receive surface to enter high visibility and show the page.
     this.receiveManager_.registerForegroundReceiveSurface();
     this.getViewManager_().switchView(Page.HIGH_VISIBILITY);

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_subpage.js

@@ -299,9 +299,11 @@ Polymer({
     }
 
     if (queryParams.has('receive')) {
+      // Get shutoffTimeoutInSeconds with a default of 5 minutes (300 seconds)
+      const shutoffTimeoutInSeconds = Number(queryParams.get('timeout')) || 300;
       this.showReceiveDialog_ = true;
       Polymer.dom.flush();
-      this.$$('#receiveDialog').showHighVisibilityPage();
+      this.$$('#receiveDialog').showHighVisibilityPage(shutoffTimeoutInSeconds);
     }
 
     if (queryParams.has('confirm')) {

chrome/test/data/webui/settings/chromeos/nearby_share_subpage_tests.js

@@ -10,7 +10,7 @@
 // #import {FakeContactManager} from '../../nearby_share/shared/fake_nearby_contact_manager.m.js';
 // #import {FakeNearbyShareSettings} from '../../nearby_share/shared/fake_nearby_share_settings.m.js';
 // #import {FakeReceiveManager} from './fake_receive_manager.m.js'
-// #import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
+// #import {isVisible, waitAfterNextRender} from 'chrome://test/test_util.m.js';
 // #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 // clang-format on
 
@@ -232,4 +232,19 @@ suite('NearbyShare', function() {
     assertTrue(!!dialog);
   });
 
+  test('show high visibility dialog', function() {
+    const params = new URLSearchParams;
+    params.append('receive', '1');
+    params.append('timeout', '600');  // 10 minutes
+    settings.Router.getInstance().navigateTo(
+        settings.routes.NEARBY_SHARE, params);
+    Polymer.dom.flush();
+
+    const dialog = subpage.$$('nearby-share-receive-dialog');
+    assertTrue(!!dialog);
+
+    const highVisibilityDialog = dialog.$$('nearby-share-high-visibility-page');
+    assertTrue(test_util.isVisible(highVisibilityDialog));
+    assertGT(highVisibilityDialog.shutoffTimestamp, new Date().getTime());
+  });
 });