Print Preview: Split invitation promo into a separate element

print-preview-destination-dialog is being forked for Chrome OS, but
the invitations logic is largely the same across platforms. Moreover,
this logic is unlikely to diverge going forward, given that cloud
print is deprecated. Split out invitation promo UI and invitations
logic into a new invitation-promo element.

Bug: 1148906
Change-Id: I51f4013867808748ffa9f39c9c8613019bc9fe5d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2536041
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827447}

chrome/browser/resources/print_preview/BUILD.gn

@@ -134,6 +134,7 @@ preprocess_grit("preprocess_generated") {
     "ui/duplex_settings.js",
     "ui/header.js",
     "ui/icons.js",
+    "ui/invitation_promo.js",
     "ui/layout_settings.js",
     "ui/margin_control.js",
     "ui/margin_control_container.js",

chrome/browser/resources/print_preview/ui/BUILD.gn

@@ -428,21 +428,31 @@ js_library("plugin_proxy") {
   ]
 }
 
+js_library("invitation_promo") {
+  deps = [
+    "..:metrics",
+    "../data:invitation",
+    "../data:invitation_store",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:event_tracker.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+}
+
 js_library("destination_dialog") {
   deps = [
     ":destination_list",
+    ":invitation_promo",
     ":print_preview_search_box",
     ":provisional_destination_resolver",
     "..:metrics",
     "..:native_layer",
     "../data:destination",
     "../data:destination_store",
-    "../data:invitation",
     "../data:invitation_store",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
     "//ui/webui/resources/js:event_tracker.m",
-    "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:list_property_update_behavior.m",
   ]
 }
@@ -536,6 +546,7 @@ html_to_js("web_components") {
     "duplex_settings.js",
     "header.js",
     "icons.js",
+    "invitation_promo.js",
     "layout_settings.js",
     "link_container.js",
     "margin_control_container.js",

chrome/browser/resources/print_preview/ui/destination_dialog.html

-<style include="print-preview-shared action-link md-select cr-hidden-style
-    throbber">
+<style include="print-preview-shared md-select cr-hidden-style throbber">
   :host-context([dir=rtl]) #manageIcon {
     transform: scaleX(-1);
   }
@@ -55,47 +54,6 @@
     margin-inline-end: 0;
   }
 
-  #dialog #promos {
-    background: rgb(248, 249, 250);
-    padding: 0;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    #dialog #promos {
-      background: rgb(50, 54, 57);
-    }
-  }
-
-  #invitationPromo {
-    align-items: center;
-    color: var(--cr-primary-text-color);
-    display: flex;
-    flex-direction: column;
-    padding: 16px 20px;
-    text-align: center;
-  }
-
-  #invitationPromo .invitation-buttons {
-    display: flex;
-    padding: 12px 0;
-  }
-
-  #invitationPromo cr-button {
-    margin: 0 4px;
-  }
-
-  @media (prefers-color-scheme: light) {
-    #invitationPromo cr-button {
-      background-color: white;
-    }
-  }
-
-  #invitationPromo invitation-details {
-    color: var(--cr-secondary-text-color);
-    font-size: calc(10 / 13 * 1em);
-    font-weight: 500;
-  }
-
   cr-button iron-icon {
     --iron-icon-fill-color: currentColor;
     margin-inline-start: 8px;
@@ -141,21 +99,9 @@
       $i18n{cancel}
     </cr-button>
   </div>
-  <div id="promos" slot="footer" hidden="[[!invitation_]]">
-    <div id="invitationPromo">
-      <div inner-h-t-m-l="[[getInvitationText_(invitation_)]]"></div>
-      <div class="invitation-buttons">
-        <cr-button on-click="onInvitationAcceptClick_">
-          [[getAcceptButtonText_(invitation_)]]
-        </cr-button>
-        <cr-button on-click="onInvitationRejectClick_">
-          $i18n{reject}
-        </cr-button>
-        <div id="invitation-process-throbber" class="throbber" hidden></div>
-      </div>
-      <div class="invitation-details">
-        $i18nRaw{registerPrinterInformationMessage}
-      </div>
-    </div>
-  </div>
+  <template is="dom-if" if="[[activeUser]]">
+    <print-preview-invitation-promo slot="footer" active-user="[[activeUser]]"
+        invitation-store="[[invitationStore]]" metrics="[[metrics_]]">
+    </print-preview-invitation-promo>
+  </template>
 </cr-dialog>

chrome/browser/resources/print_preview/ui/destination_dialog.js

@@ -13,6 +13,7 @@ import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '../print_preview_utils.js';
 import './destination_list.js';
+import './invitation_promo.js';
 import './print_preview_search_box.js';
 import './print_preview_shared_css.js';
 import './print_preview_vars_css.js';
@@ -22,14 +23,12 @@ import './throbber_css.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
-import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {ListPropertyUpdateBehavior} from 'chrome://resources/js/list_property_update_behavior.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {beforeNextRender, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Destination} from '../data/destination.js';
 import {DestinationStore} from '../data/destination_store.js';
-import {Invitation} from '../data/invitation.js';
 import {InvitationStore} from '../data/invitation_store.js';
 import {Metrics, MetricsContext} from '../metrics.js';
 import {NativeLayerImpl} from '../native_layer.js';
@@ -39,7 +38,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior, ListPropertyUpdateBehavior],
+  behaviors: [ListPropertyUpdateBehavior],
 
   properties: {
     /** @type {?DestinationStore} */
@@ -49,10 +48,7 @@ Polymer({
     },
 
     /** @type {?InvitationStore} */
-    invitationStore: {
-      type: Object,
-      observer: 'onInvitationStoreSet_',
-    },
+    invitationStore: Object,
 
     activeUser: {
       type: String,
@@ -64,12 +60,6 @@ Polymer({
     /** @type {!Array<string>} */
     users: Array,
 
-    /** @private {?Invitation} */
-    invitation_: {
-      type: Object,
-      value: null,
-    },
-
     /** @private {!Array<!Destination>} */
     destinations_: {
       type: Array,
@@ -82,6 +72,9 @@ Polymer({
       value: false,
     },
 
+    /** @private {!MetricsContext} */
+    metrics_: Object,
+
     /** @private {?RegExp} */
     searchQuery_: {
       type: Object,
@@ -107,9 +100,6 @@ Polymer({
   /** @private {!EventTracker} */
   tracker_: new EventTracker(),
 
-  /** @private {!MetricsContext} */
-  metrics_: MetricsContext.destinationSearch(),
-
   // <if expr="chromeos">
   /** @private {?Destination} */
   destinationInConfiguring_: null,
@@ -146,45 +136,22 @@ Polymer({
         this.updateDestinations_.bind(this));
     this.tracker_.add(
         destinationStore, DestinationStore.EventType.DESTINATION_SEARCH_DONE,
-        this.updateDestinationsAndInvitations_.bind(this));
+        this.updateDestinations_.bind(this));
     this.initialized_ = true;
   },
 
-  /** @private */
-  onInvitationStoreSet_() {
-    const invitationStore = assert(this.invitationStore);
-    this.tracker_.add(
-        invitationStore, InvitationStore.EventType.INVITATION_SEARCH_DONE,
-        this.updateInvitations_.bind(this));
-    this.tracker_.add(
-        invitationStore, InvitationStore.EventType.INVITATION_PROCESSED,
-        this.updateInvitations_.bind(this));
-  },
-
   /** @private */
   onActiveUserChange_() {
     if (this.activeUser) {
       this.$$('select').value = this.activeUser;
     }
 
-    this.updateDestinationsAndInvitations_();
-  },
-
-  /** @private */
-  updateDestinationsAndInvitations_() {
-    if (!this.initialized_) {
-      return;
-    }
-
     this.updateDestinations_();
-    if (this.activeUser && !!this.invitationStore) {
-      this.invitationStore.startLoadingInvitations(this.activeUser);
-    }
   },
 
   /** @private */
   updateDestinations_() {
-    if (this.destinationStore === undefined) {
+    if (this.destinationStore === undefined || !this.initialized_) {
       return;
     }
 
@@ -315,6 +282,9 @@ Polymer({
   },
 
   show() {
+    if (!this.metrics_) {
+      this.metrics_ = MetricsContext.destinationSearch();
+    }
     this.$.dialog.showModal();
     this.loadingDestinations_ = this.destinationStore === undefined ||
         this.destinationStore.isPrintDestinationSearchInProgress;
@@ -331,74 +301,6 @@ Polymer({
     return this.$.dialog.hasAttribute('open');
   },
 
-  /**
-   * Updates printer sharing invitations UI.
-   * @private
-   */
-  updateInvitations_() {
-    const invitations = this.activeUser ?
-        this.invitationStore.invitations(this.activeUser) :
-        [];
-    if (this.invitation_ !== invitations[0]) {
-      this.metrics_.record(
-          Metrics.DestinationSearchBucket.INVITATION_AVAILABLE);
-    }
-    this.invitation_ = invitations.length > 0 ? invitations[0] : null;
-  },
-
-  /**
-   * @return {string} The text show show on the "accept" button in the
-   *     invitation promo. 'Accept', 'Accept for group', or empty if there is no
-   *     invitation.
-   * @private
-   */
-  getAcceptButtonText_() {
-    if (!this.invitation_) {
-      return '';
-    }
-
-    return this.invitation_.asGroupManager ? this.i18n('acceptForGroup') :
-                                             this.i18n('accept');
-  },
-
-  /**
-   * @return {string} The formatted text to show for the invitation promo.
-   * @private
-   */
-  getInvitationText_() {
-    if (!this.invitation_) {
-      return '';
-    }
-
-    if (this.invitation_.asGroupManager) {
-      return this.i18nAdvanced('groupPrinterSharingInviteText', {
-        substitutions: [
-          this.invitation_.sender, this.invitation_.destination.displayName,
-          this.invitation_.receiver
-        ]
-      });
-    }
-
-    return this.i18nAdvanced('printerSharingInviteText', {
-      substitutions:
-          [this.invitation_.sender, this.invitation_.destination.displayName]
-    });
-  },
-
-  /** @private */
-  onInvitationAcceptClick_() {
-    this.metrics_.record(Metrics.DestinationSearchBucket.INVITATION_ACCEPTED);
-    this.invitationStore.processInvitation(assert(this.invitation_), true);
-    this.updateInvitations_();
-  },
-
-  /** @private */
-  onInvitationRejectClick_() {
-    this.metrics_.record(Metrics.DestinationSearchBucket.INVITATION_REJECTED);
-    this.invitationStore.processInvitation(assert(this.invitation_), false);
-    this.updateInvitations_();
-  },
-
   /** @private */
   onUserChange_() {
     const select = this.$$('select');

chrome/browser/resources/print_preview/ui/invitation_promo.html

+<style include="print-preview-shared action-link md-select cr-hidden-style throbber">
+  :host {
+    align-items: center;
+    background: rgb(248, 249, 250);
+    color: var(--cr-primary-text-color);
+    display: flex;
+    flex-direction: column;
+    padding: 16px 20px;
+    text-align: center;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      background: rgb(50, 54, 57);
+    }
+  }
+
+  :host([is-hidden_]) {
+    display: none;
+  }
+
+  #buttons {
+    display: flex;
+    padding: 12px 0;
+  }
+
+  cr-button {
+    margin: 0 4px;
+  }
+
+  @media (prefers-color-scheme: light) {
+    cr-button {
+      background-color: white;
+    }
+  }
+
+  #details {
+    color: var(--cr-secondary-text-color);
+    font-size: calc(10 / 13 * 1em);
+    font-weight: 500;
+  }
+</style>
+<div inner-h-t-m-l="[[getInvitationText_(invitation_)]]"></div>
+<div id="buttons">
+  <cr-button on-click="onAcceptClick_">
+    [[getAcceptButtonText_(invitation_)]]
+  </cr-button>
+  <cr-button on-click="onRejectClick_">$i18n{reject}</cr-button>
+  <div id="invitation-process-throbber" class="throbber" hidden></div>
+</div>
+<div id="details">$i18nRaw{registerPrinterInformationMessage}</div>

chrome/browser/resources/print_preview/ui/invitation_promo.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/hidden_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/js/action_link.js';
+import 'chrome://resources/cr_elements/action_link_css.m.js';
+import './print_preview_shared_css.js';
+import './print_preview_vars_css.js';
+import './throbber_css.js';
+import '../strings.m.js';
+
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {Invitation} from '../data/invitation.js';
+import {InvitationStore} from '../data/invitation_store.js';
+import {Metrics, MetricsContext} from '../metrics.js';
+
+Polymer({
+  is: 'print-preview-invitation-promo',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    activeUser: {
+      type: String,
+      observer: 'onActiveUserChanged_',
+    },
+
+    /** @type {?InvitationStore} */
+    invitationStore: Object,
+
+    /** @type {!MetricsContext} */
+    metrics: Object,
+
+    /** @private {?Invitation} */
+    invitation_: {
+      type: Object,
+      value: null,
+    },
+
+    /** @private {boolean} */
+    isHidden_: {
+      type: Boolean,
+      reflectToAttribute: true,
+      computed: 'computeIsHidden_(invitation_)',
+    }
+  },
+
+  /** @private {!EventTracker} */
+  tracker_: new EventTracker(),
+
+  /** @private */
+  attached() {
+    const invitationStore = assert(this.invitationStore);
+    this.tracker_.add(
+        invitationStore, InvitationStore.EventType.INVITATION_SEARCH_DONE,
+        this.updateInvitations_.bind(this));
+    this.tracker_.add(
+        invitationStore, InvitationStore.EventType.INVITATION_PROCESSED,
+        this.updateInvitations_.bind(this));
+    this.updateInvitations_();
+  },
+
+  /** @override */
+  detached() {
+    this.tracker_.removeAll();
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeIsHidden_() {
+    return !this.invitation_;
+  },
+
+  /** @private */
+  onActiveUserChanged_() {
+    if (!this.activeUser) {
+      return;
+    }
+
+    this.invitationStore.startLoadingInvitations(this.activeUser);
+  },
+
+  /**
+   * Updates printer sharing invitations UI.
+   * @private
+   */
+  updateInvitations_() {
+    const invitations = this.activeUser ?
+        this.invitationStore.invitations(this.activeUser) :
+        [];
+    if (this.invitation_ !== invitations[0]) {
+      this.metrics.record(Metrics.DestinationSearchBucket.INVITATION_AVAILABLE);
+    }
+    this.invitation_ = invitations.length > 0 ? invitations[0] : null;
+  },
+
+  /**
+   * @return {string} The text show show on the "accept" button in the
+   *     invitation promo. 'Accept', 'Accept for group', or empty if there is no
+   *     invitation.
+   * @private
+   */
+  getAcceptButtonText_() {
+    if (!this.invitation_) {
+      return '';
+    }
+
+    return this.invitation_.asGroupManager ? this.i18n('acceptForGroup') :
+                                             this.i18n('accept');
+  },
+
+  /**
+   * @return {string} The formatted text to show for the invitation promo.
+   * @private
+   */
+  getInvitationText_() {
+    if (!this.invitation_) {
+      return '';
+    }
+
+    if (this.invitation_.asGroupManager) {
+      return this.i18nAdvanced('groupPrinterSharingInviteText', {
+        substitutions: [
+          this.invitation_.sender, this.invitation_.destination.displayName,
+          this.invitation_.receiver
+        ]
+      });
+    }
+
+    return this.i18nAdvanced('printerSharingInviteText', {
+      substitutions:
+          [this.invitation_.sender, this.invitation_.destination.displayName]
+    });
+  },
+
+  /** @private */
+  onAcceptClick_() {
+    this.metrics.record(Metrics.DestinationSearchBucket.INVITATION_ACCEPTED);
+    this.invitationStore.processInvitation(assert(this.invitation_), true);
+    this.updateInvitations_();
+  },
+
+  /** @private */
+  onRejectClick_() {
+    this.metrics.record(Metrics.DestinationSearchBucket.INVITATION_REJECTED);
+    this.invitationStore.processInvitation(assert(this.invitation_), false);
+    this.updateInvitations_();
+  },
+});