PaymentHandler: Implement Content Settings UI for desktop

This adds the content setting page for the new PaymentHandler API and
the UI plumbing. The page is chrome://settings/content/paymentHandler.
This is behind the kServiceWorkerPaymentApps feature flag.

Bug: 665949
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ie388940363c7efda57e66ba16dbf6edcf0f5a31c
Reviewed-on: https://chromium-review.googlesource.com/934741
Commit-Queue: Jinho Bang <jinho.bang@samsung.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rouslan Solomakhin <rouslan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#544102}

chrome/app/settings_strings.grdp

@@ -2455,6 +2455,18 @@
   <message name="IDS_SETTINGS_SITE_SETTINGS_FLASH" desc="Label for the Flash site settings.">
     Flash
   </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER" desc="Label for the payment handler site settings.">
+    Payment Handlers
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER_ALLOW" desc="The allow label for payment handler installation in site settings.">
+    Allow sites to install payment handlers
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER_ALLOW_RECOMMENDED" desc="The allow label for payment handler installation in site settings (with the 'recommended' suffix).">
+    Allow sites to install payment handlers (recommended)
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER_BLOCK" desc="The block label for payment handler installation access in site settings.">
+    Do not allow any site to install payment handlers
+  </message>
   <message name="IDS_SETTINGS_SITE_SETTINGS_PDF_DOCUMENTS" desc="Label for the PDF documents site settings.">
     PDF documents
   </message>

chrome/browser/resources/settings/icons.html

@@ -96,6 +96,7 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="notifications"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></g>
       <g id="pdf"><path d="M7 11.5h1v-1H7v1zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9.5 8.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm10-1H17v1h1.5V13H17v2h-1.5V9h4v1.5zm-5 3c0 .83-.67 1.5-1.5 1.5h-2.5V9H13c.83 0 1.5.67 1.5 1.5v3zm-2.5 0h1v-3h-1v3z"></path><path fill="none" d="M0 0h24v24H0z"></path></g>
       <g id="palette"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></g>
+      <g id="payment-handler"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></g>
       <g id="photo"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></g>
       <g id="power-settings-new"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"></path></g>
       <g id="protocol-handler"><path d="M21.72 11.33l-6.644-7.035a.97.97 0 0 0-1.38-.01l-1.67 1.72-1.617-1.712a.97.97 0 0 0-1.38-.01l-6.737 6.935c-.187.191-.29.447-.292.719-.002.272.099.529.28.722l6.644 7.034a.949.949 0 0 0 1.38.011l1.671-1.718 1.615 1.71a.949.949 0 0 0 1.381.01l6.74-6.935a1.054 1.054 0 0 0 .01-1.44zM6.947 12.464l3.657 3.785-.974.98-5.273-5.456 5.349-5.378.929.962-3.677 3.7a.998.998 0 0 0-.292.702 1 1 0 0 0 .28.705zm7.35 4.768l-.931-.963 3.68-3.7a1.012 1.012 0 0 0 .007-1.407l-3.656-3.784.974-.98 5.273 5.456-5.348 5.378z"></path></g>

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -529,8 +529,7 @@
 </if>
         </settings-subpage>
       </template>
-      <template is="dom-if" if="[[enableClipboardContentSetting_]]"
-          no-search>
+      <template is="dom-if" if="[[enableClipboardContentSetting_]]">
         <template is="dom-if" route-path="/content/clipboard" no-search>
           <settings-subpage page-title="$i18n{siteSettingsClipboard}">
             <category-default-setting
@@ -545,6 +544,21 @@
           </settings-subpage>
        </template>
       </template>
+      <template is="dom-if" if="[[enablePaymentHandlerContentSetting_]]">
+        <template is="dom-if" route-path="/content/paymentHandler" no-search>
+          <settings-subpage page-title="$i18n{siteSettingsPaymentHandler}">
+            <category-default-setting
+                toggle-off-label="$i18n{siteSettingsPaymentHandlerBlock}"
+                toggle-on-label="$i18n{siteSettingsPaymentHandlerAllowRecommended}"
+                category="[[ContentSettingsTypes.PAYMENT_HANDLER]]">
+            </category-default-setting>
+            <category-setting-exceptions
+                category="[[ContentSettingsTypes.PAYMENT_HANDLER]]"
+                block-header="$i18n{siteSettingsBlocked}">
+            </category-setting-exceptions>
+          </settings-subpage>
+       </template>
+      </template>
     </settings-animated-pages>
   </template>
   <script src="privacy_page.js"></script>

chrome/browser/resources/settings/privacy_page/privacy_page.js

@@ -120,6 +120,14 @@ Polymer({
       }
     },
 
+    /** @private */
+    enablePaymentHandlerContentSetting_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('enablePaymentHandlerContentSetting');
+      }
+    },
+
     /** @private */
     enableSensorsContentSetting_: {
       type: Boolean,

chrome/browser/resources/settings/route.js

@@ -80,6 +80,7 @@
  *   SITE_SETTINGS_MICROPHONE: (undefined|!settings.Route),
  *   SITE_SETTINGS_MIDI_DEVICES: (undefined|!settings.Route),
  *   SITE_SETTINGS_NOTIFICATIONS: (undefined|!settings.Route),
+ *   SITE_SETTINGS_PAYMENT_HANDLER: (undefined|!settings.Route),
  *   SITE_SETTINGS_PDF_DOCUMENTS: (undefined|!settings.Route),
  *   SITE_SETTINGS_POPUPS: (undefined|!settings.Route),
  *   SITE_SETTINGS_PROTECTED_CONTENT: (undefined|!settings.Route),
@@ -335,6 +336,10 @@ cr.define('settings', function() {
           r.SITE_SETTINGS.createChild('pdfDocuments');
       r.SITE_SETTINGS_PROTECTED_CONTENT =
           r.SITE_SETTINGS.createChild('protectedContent');
+      if (loadTimeData.getBoolean('enablePaymentHandlerContentSetting')) {
+        r.SITE_SETTINGS_PAYMENT_HANDLER =
+            r.SITE_SETTINGS.createChild('paymentHandler');
+      }
 
       // <if expr="chromeos">
       if (pageVisibility.dateTime !== false) {

chrome/browser/resources/settings/site_settings/category_default_setting.js

@@ -98,6 +98,7 @@ Polymer({
       case settings.ContentSettingsTypes.JAVASCRIPT:
       case settings.ContentSettingsTypes.SOUND:
       case settings.ContentSettingsTypes.SENSORS:
+      case settings.ContentSettingsTypes.PAYMENT_HANDLER:
       case settings.ContentSettingsTypes.POPUPS:
       case settings.ContentSettingsTypes.PROTOCOL_HANDLERS:
 

chrome/browser/resources/settings/site_settings/constants.js

@@ -34,6 +34,7 @@ settings.ContentSettingsTypes = {
   ADS: 'ads',
   CLIPBOARD: 'clipboard',
   SENSORS: 'sensors',
+  PAYMENT_HANDLER: 'payment-handler',
 };
 
 /**

chrome/browser/resources/settings/site_settings/site_details.html

@@ -157,6 +157,12 @@
           label="$i18n{siteSettingsClipboard}"
           hidden$="[[!enableClipboardContentSetting_]]">
       </site-details-permission>
+      <site-details-permission
+          category="{{ContentSettingsTypes.PAYMENT_HANDLER}}"
+          icon="settings:payment-handler" id="paymentHandler"
+          label="$i18n{siteSettingsPaymentHandler}"
+          hidden$="[[!enablePaymentHandlerContentSetting_]]">
+      </site-details-permission>
     </div>
 
     <div id="clearAndReset" class="settings-box"

chrome/browser/resources/settings/site_settings/site_details.js

@@ -83,6 +83,14 @@ Polymer({
       },
     },
 
+    /** @private */
+    enablePaymentHandlerContentSetting_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('enablePaymentHandlerContentSetting');
+      },
+    },
+
     /**
      * The type of storage for the origin.
      * @private

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

@@ -395,9 +395,9 @@
     </div>
     <template is="dom-if" if="[[enableClipboardContentSetting_]]">
       <div id="clipboard" class="settings-box two-line"
-           category$="[[ContentSettingsTypes.CLIPBOARD]]"
-           data-route="SITE_SETTINGS_CLIPBOARD" on-click="onTapNavigate_"
-           actionable>
+          category$="[[ContentSettingsTypes.CLIPBOARD]]"
+          data-route="SITE_SETTINGS_CLIPBOARD" on-click="onTapNavigate_"
+          actionable>
         <iron-icon icon="settings:clipboard"></iron-icon>
         <div class="middle">
           $i18n{siteSettingsClipboard}
@@ -414,6 +414,27 @@
         </paper-icon-button-light>
       </div>
     </template>
+    <template is="dom-if" if="[[enablePaymentHandlerContentSetting_]]">
+      <div id="paymentHandler" class="settings-box two-line"
+           category$="[[ContentSettingsTypes.PAYMENT_HANDLER]]"
+           data-route="SITE_SETTINGS_PAYMENT_HANDLER" on-click="onTapNavigate_"
+           actionable>
+        <iron-icon icon="settings:payment-handler"></iron-icon>
+        <div class="middle">
+          $i18n{siteSettingsPaymentHandler}
+          <div class="secondary" id="paymentHandlerSecondary">
+            [[defaultSettingLabel_(
+                default_.paymentHandler,
+                '$i18nPolymer{siteSettingsPaymentHandlerAllow}',
+                '$i18nPolymer{siteSettingsPaymentHandlerBlock}')]]
+          </div>
+        </div>
+        <paper-icon-button-light class="subpage-arrow">
+          <button aria-label="$i18n{siteSettingsPaymentHandler}"
+              aria-describedby="paymentHandlerSecondary"></button>
+        </paper-icon-button-light>
+      </div>
+    </template>
   </template>
   <script src="site_settings_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/site_settings_page/site_settings_page.js

@@ -76,6 +76,14 @@ Polymer({
       }
     },
 
+    /** @private */
+    enablePaymentHandlerContentSetting_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('enablePaymentHandlerContentSetting');
+      }
+    },
+
     /** @type {!Map<string, string>} */
     focusConfig: {
       type: Object,
@@ -97,25 +105,36 @@ Polymer({
     // element, with additional entries that correspond to subpage trigger
     // elements residing in this element's Shadow DOM.
     const R = settings.routes;
-    [[R.SITE_SETTINGS_COOKIES, 'cookies'],
-     [R.SITE_SETTINGS_LOCATION, 'location'], [R.SITE_SETTINGS_CAMERA, 'camera'],
-     [R.SITE_SETTINGS_MICROPHONE, 'microphone'],
-     [R.SITE_SETTINGS_NOTIFICATIONS, 'notifications'],
-     [R.SITE_SETTINGS_JAVASCRIPT, 'javascript'],
-     [R.SITE_SETTINGS_SOUND, 'sound'], [R.SITE_SETTINGS_FLASH, 'flash'],
-     [R.SITE_SETTINGS_IMAGES, 'images'], [R.SITE_SETTINGS_POPUPS, 'popups'],
-     [R.SITE_SETTINGS_BACKGROUND_SYNC, 'background-sync'],
-     [R.SITE_SETTINGS_AUTOMATIC_DOWNLOADS, 'automatic-downloads'],
-     [R.SITE_SETTINGS_UNSANDBOXED_PLUGINS, 'unsandboxed-plugins'],
-     [R.SITE_SETTINGS_HANDLERS, 'protocol-handlers'],
-     [R.SITE_SETTINGS_MIDI_DEVICES, 'midi-devices'],
-     [R.SITE_SETTINGS_ADS, 'ads'], [R.SITE_SETTINGS_ZOOM_LEVELS, 'zoom-levels'],
-     [R.SITE_SETTINGS_USB_DEVICES, 'usb-devices'],
-     [R.SITE_SETTINGS_PDF_DOCUMENTS, 'pdf-documents'],
-     [R.SITE_SETTINGS_PROTECTED_CONTENT, 'protected-content'],
-     [R.SITE_SETTINGS_CLIPBOARD, 'clipboard'],
-     [R.SITE_SETTINGS_SENSORS, 'sensors'],
-    ].forEach(pair => {
+    const pairs = [
+      [R.SITE_SETTINGS_COOKIES, 'cookies'],
+      [R.SITE_SETTINGS_LOCATION, 'location'],
+      [R.SITE_SETTINGS_CAMERA, 'camera'],
+      [R.SITE_SETTINGS_MICROPHONE, 'microphone'],
+      [R.SITE_SETTINGS_NOTIFICATIONS, 'notifications'],
+      [R.SITE_SETTINGS_JAVASCRIPT, 'javascript'],
+      [R.SITE_SETTINGS_SOUND, 'sound'],
+      [R.SITE_SETTINGS_FLASH, 'flash'],
+      [R.SITE_SETTINGS_IMAGES, 'images'],
+      [R.SITE_SETTINGS_POPUPS, 'popups'],
+      [R.SITE_SETTINGS_BACKGROUND_SYNC, 'background-sync'],
+      [R.SITE_SETTINGS_AUTOMATIC_DOWNLOADS, 'automatic-downloads'],
+      [R.SITE_SETTINGS_UNSANDBOXED_PLUGINS, 'unsandboxed-plugins'],
+      [R.SITE_SETTINGS_HANDLERS, 'protocol-handlers'],
+      [R.SITE_SETTINGS_MIDI_DEVICES, 'midi-devices'],
+      [R.SITE_SETTINGS_ADS, 'ads'],
+      [R.SITE_SETTINGS_ZOOM_LEVELS, 'zoom-levels'],
+      [R.SITE_SETTINGS_USB_DEVICES, 'usb-devices'],
+      [R.SITE_SETTINGS_PDF_DOCUMENTS, 'pdf-documents'],
+      [R.SITE_SETTINGS_PROTECTED_CONTENT, 'protected-content'],
+      [R.SITE_SETTINGS_CLIPBOARD, 'clipboard'],
+      [R.SITE_SETTINGS_SENSORS, 'sensors'],
+    ];
+
+    if (this.enablePaymentHandlerContentSetting_) {
+      pairs.push([R.SITE_SETTINGS_PAYMENT_HANDLER, 'payment-handler']);
+    }
+
+    pairs.forEach(pair => {
       const route = pair[0];
       const id = pair[1];
       this.focusConfig.set(route.path, '* /deep/ #' + id + ' .subpage-arrow');

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -33,6 +33,7 @@
 #include "components/strings/grit/components_strings.h"
 #include "components/subresource_filter/core/browser/subresource_filter_features.h"
 #include "content/public/browser/web_ui_data_source.h"
+#include "content/public/common/content_features.h"
 #include "services/device/public/cpp/device_features.h"
 #include "ui/base/l10n/l10n_util.h"
 
@@ -2187,6 +2188,13 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
     {"siteSettingsAdsBlock", IDS_SETTINGS_SITE_SETTINGS_ADS_BLOCK},
     {"siteSettingsAdsBlockRecommended",
      IDS_SETTINGS_SITE_SETTINGS_ADS_BLOCK_RECOMMENDED},
+    {"siteSettingsPaymentHandler", IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER},
+    {"siteSettingsPaymentHandlerAllow",
+     IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER_ALLOW},
+    {"siteSettingsPaymentHandlerAllowRecommended",
+     IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER_ALLOW_RECOMMENDED},
+    {"siteSettingsPaymentHandlerBlock",
+     IDS_SETTINGS_SITE_SETTINGS_PAYMENT_HANDLER_BLOCK},
   };
   AddLocalizedStringsBulk(html_source, localized_strings,
                           arraysize(localized_strings));
@@ -2211,6 +2219,10 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
       "enableSensorsContentSetting",
       base::FeatureList::IsEnabled(features::kGenericSensorExtraClasses));
 
+  html_source->AddBoolean(
+      "enablePaymentHandlerContentSetting",
+      base::FeatureList::IsEnabled(features::kServiceWorkerPaymentApps));
+
   if (PluginUtils::ShouldPreferHtmlOverPlugins(
           HostContentSettingsMapFactory::GetForProfile(profile))) {
     LocalizedString flash_strings[] = {

chrome/test/data/webui/settings/site_details_tests.js

@@ -83,6 +83,9 @@ suite('SiteDetails', function() {
       test_util.createContentSettingTypeToValuePair(
           settings.ContentSettingsTypes.SENSORS,
           [test_util.createRawSiteException('https://foo.com:443')]),
+      test_util.createContentSettingTypeToValuePair(
+          settings.ContentSettingsTypes.PAYMENT_HANDLER,
+          [test_util.createRawSiteException('https://foo.com:443')]),
     ]);
 
     browserProxy = new TestSiteSettingsPrefsBrowserProxy();
@@ -126,6 +129,9 @@ suite('SiteDetails', function() {
     optionalSiteDetailsContentSettingsTypes[settings.ContentSettingsTypes
                                                 .SENSORS] =
         'enableSensorsContentSetting';
+    optionalSiteDetailsContentSettingsTypes[settings.ContentSettingsTypes
+                                                .PAYMENT_HANDLER] =
+        'enablePaymentHandlerContentSetting';
     browserProxy.setPrefs(prefs);
 
     // First, explicitly set all the optional settings to false.
@@ -195,6 +201,7 @@ suite('SiteDetails', function() {
     loadTimeData.overrideValues({enableSafeBrowsingSubresourceFilter: true});
     loadTimeData.overrideValues({enableClipboardContentSetting: true});
     loadTimeData.overrideValues({enableSensorsContentSetting: true});
+    loadTimeData.overrideValues({enablePaymentHandlerContentSetting: true});
     testElement = createSiteDetails('https://foo.com:443');
 
     return browserProxy.whenCalled('isOriginValid')