Add chooser-exception-list Polymer element

This change adds the chooser-exception-list Polymer element to site
settings. This element will fetch the chooser exceptions from the C++
site and process them for display. The element uses a
chooser-exception-list-entry to render each chooser exception in the
list.

This change also adds to ability for the paper-tooltip to have its
target set manually. This allows the target to be set on the common
paper-tooltip element used in chooser-exception-list and site-list
without having to access its private `_target` property.

Design doc:
https://docs.google.com/document/d/1MPvsrWiVD_jAC8ELyk8njFpy6j1thfVU5aWT3TCWE8w

Bug: 854329
Change-Id: I3f127d2cf655b2d75157d7174a9bd5e434b583a8
Reviewed-on: https://chromium-review.googlesource.com/c/1357556
Commit-Queue: Ovidio Henriquez <odejesush@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#622059}

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

@@ -20,12 +20,11 @@
 <link rel="import" href="../site_settings/category_default_setting.html">
 <link rel="import" href="../site_settings/category_setting_exceptions.html">
 <!--
-  In order for the browser test for chooser-exception-list-entry to work
+  In order for the browser test for chooser-exception-list to work
   properly, the custom element needs to be a dependency of the settings page.
-  TODO(https://crbug.com/854329): Update this import once
-  chooser-exception-list is implemented.
+  TODO(https://crbug.com/854329): Delete this comment once this element is used.
 -->
-<link rel="import" href="../site_settings/chooser_exception_list_entry.html">
+<link rel="import" href="../site_settings/chooser_exception_list.html">
 <link rel="import" href="../site_settings/constants.html">
 <link rel="import" href="../site_settings/media_picker.html">
 <link rel="import" href="../site_settings/pdf_documents.html">

chrome/browser/resources/settings/settings_resources.grd

@@ -119,6 +119,12 @@
       <structure name="IDR_SETTINGS_CATEGORY_SETTING_EXCEPTIONS_JS"
                  file="site_settings/category_setting_exceptions.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_CHOOSER_EXCEPTION_LIST_HTML"
+                 file="site_settings/chooser_exception_list.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_CHOOSER_EXCEPTION_LIST_JS"
+                 file="site_settings/chooser_exception_list.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_CHOOSER_EXCEPTION_LIST_ENTRY_HTML"
                  file="site_settings/chooser_exception_list_entry.html"
                  type="chrome_html" />

chrome/browser/resources/settings/site_settings/BUILD.gn

@@ -10,6 +10,7 @@ js_type_check("closure_compile") {
     ":all_sites",
     ":category_default_setting",
     ":category_setting_exceptions",
+    ":chooser_exception_list",
     ":chooser_exception_list_entry",
     ":constants",
     ":cookie_info",
@@ -75,6 +76,18 @@ js_library("category_setting_exceptions") {
   externs_list = [ "$externs_path/settings_private.js" ]
 }
 
+js_library("chooser_exception_list") {
+  deps = [
+    ":chooser_exception_list_entry",
+    ":constants",
+    ":site_settings_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js:list_property_update_behavior",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
+  ]
+  externs_list = [ "$externs_path/settings_private.js" ]
+}
+
 js_library("chooser_exception_list_entry") {
   deps = [
     ":constants",

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-tooltip/paper-tooltip.html">
+<link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="constants.html">
+<link rel="import" href="chooser_exception_list_entry.html">
+<link rel="import" href="site_settings_behavior.html">
+<link rel="import" href="site_settings_prefs_browser_proxy.html">
+
+<dom-module id="chooser-exception-list">
+  <template>
+    <style include="settings-shared">
+      paper-tooltip {
+        --paper-tooltip: var(--cr-tooltip);
+      }
+    </style>
+
+    <div class="list-frame" id="empty-list-message"
+        hidden$="[[hasExceptions_(chooserExceptions.*)]]">
+      <div class="list-item secondary">[[emptyListMessage_]]</div>
+    </div>
+
+    <template is="dom-repeat" items="[[chooserExceptions]]">
+      <chooser-exception-list-entry exception="[[item]]"
+          tabindex$="[[tabIndex]]" first$="[[!index]]"
+          iron-list-tab-index="[[tabIndex]]" on-show-tooltip="onShowTooltip_">
+      </chooser-exception-list-entry>
+    </template>
+
+    <paper-tooltip id="tooltip" manual-mode position="top">
+      [[tooltipText_]]
+    </paper-tooltip>
+  </template>
+  <script src="chooser_exception_list.js"></script>
+</dom-module>

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

+// Copyright 2018 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.
+
+/**
+ * @fileoverview
+ * 'chooser-exception-list' shows a list of chooser exceptions for a given
+ * chooser type.
+ */
+Polymer({
+  is: 'chooser-exception-list',
+
+  behaviors: [
+    I18nBehavior,
+    ListPropertyUpdateBehavior,
+    SiteSettingsBehavior,
+    WebUIListenerBehavior,
+  ],
+
+  properties: {
+    /**
+     * Array of chooser exceptions to display in the widget.
+     * @type {!Array<ChooserException>}
+     */
+    chooserExceptions: {
+      type: Array,
+      value: function() {
+        return [];
+      },
+    },
+
+    /**
+     * The string ID of the chooser type that this element is displaying data
+     * for.
+     * See site_settings/constants.js for possible values.
+     * @type {!settings.ChooserType}
+     */
+    chooserType: {
+      observer: 'chooserTypeChanged_',
+      type: String,
+      value: settings.ChooserType.NONE,
+    },
+
+    /** @private */
+    emptyListMessage_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private */
+    tooltipText_: String,
+  },
+
+  /** @override */
+  created: function() {
+    this.browserProxy_ =
+        settings.SiteSettingsPrefsBrowserProxyImpl.getInstance();
+  },
+
+  /** @override */
+  attached: function() {
+    this.addWebUIListener(
+        'contentSettingSitePermissionChanged',
+        this.objectWithinChooserTypeChanged_.bind(this));
+  },
+
+  /**
+   * Called when a chooser exception changes permission.
+   * @param {string} category The category of the exception that changed.
+   * @param {string} site The site that changed.
+   * @private
+   */
+  objectWithinChooserTypeChanged_: function(category, site) {
+    if (category === this.category) {
+      this.chooserTypeChanged_();
+    }
+  },
+
+  /**
+   * Configures the visibility of the widget and shows the list.
+   * @private
+   */
+  chooserTypeChanged_: function() {
+    if (this.chooserType == settings.ChooserType.NONE) {
+      return;
+    }
+
+    // Set the message to display when the exception list is empty.
+    switch (this.chooserType) {
+      case settings.ChooserType.USB_DEVICES:
+        this.emptyListMessage_ = this.i18n('noUsbDevicesFound');
+      default:
+        this.emptyListMessage_ = '';
+    }
+
+    this.populateList_();
+  },
+
+  /**
+   * Returns true if there are any chooser exceptions for this chooser type.
+   * @return {boolean}
+   * @private
+   */
+  hasExceptions_: function() {
+    return this.chooserExceptions.length > 0;
+  },
+
+  /**
+   * Need to use a common tooltip since the tooltip in the entry is cut off from
+   * the iron-list.
+   * @param{!{detail: {target: HTMLElement, text: string}}} e
+   * @private
+   */
+  onShowTooltip_: function(e) {
+    this.tooltipText_ = e.detail.text;
+    const target = e.detail.target;
+    // paper-tooltip normally determines the target from the |for| property,
+    // which is a selector. Here paper-tooltip is being reused by multiple
+    // potential targets.
+    this.$.tooltip.target = target;
+    const hide = () => {
+      this.$.tooltip.hide();
+      target.removeEventListener('mouseleave', hide);
+      target.removeEventListener('blur', hide);
+      target.removeEventListener('tap', hide);
+      this.$.tooltip.removeEventListener('mouseenter', hide);
+    };
+    target.addEventListener('mouseleave', hide);
+    target.addEventListener('blur', hide);
+    target.addEventListener('tap', hide);
+    this.$.tooltip.addEventListener('mouseenter', hide);
+    this.$.tooltip.show();
+  },
+
+  /**
+   * Populate the chooser exception list for display.
+   * @private
+   */
+  populateList_: function() {
+    this.browserProxy_.getChooserExceptionList(this.chooserType)
+        .then(exceptionList => this.processExceptions_(exceptionList));
+  },
+
+  /**
+   * Process the chooser exception list returned from the native layer.
+   * @param {!Array<RawChooserException>} exceptionList
+   * @private
+   */
+  processExceptions_: function(exceptionList) {
+    const exceptions = exceptionList.map(exception => {
+      const sites = exception.sites.map(this.expandSiteException);
+      return Object.assign(exception, {sites});
+    });
+
+    this.updateList('chooserExceptions', x => x.displayName, exceptions);
+  },
+});

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

@@ -255,11 +255,9 @@ Polymer({
     const target = e.detail.target;
     // paper-tooltip normally determines the target from the |for| property,
     // which is a selector. Here paper-tooltip is being reused by multiple
-    // potential targets. Since paper-tooltip does not expose a public property
-    // or method to update the target, the private property |_target| is
-    // updated directly.
+    // potential targets.
     const tooltip = this.$.tooltip;
-    tooltip._target = target;
+    tooltip.target = target;
     /** @type {{updatePosition: Function}} */ (tooltip).updatePosition();
     const hide = () => {
       this.$.tooltip.hide();

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

@@ -72,6 +72,16 @@ let RawSiteException;
  */
 let SiteException;
 
+/**
+ * The chooser exception information passed from the C++ handler.
+ * See also: ChooserException.
+ * @typedef {{chooserType: !settings.ChooserType,
+ *            displayName: string,
+ *            object: Object,
+ *            sites: Array<!RawSiteException>}}
+ */
+let RawChooserException;
+
 /**
  * The chooser exception after it has been converted/filtered for UI use.
  * See also: RawChooserException.
@@ -152,6 +162,14 @@ cr.define('settings', function() {
      */
     getAllSites(contentTypes) {}
 
+    /**
+     * Gets the chooser exceptions for a particular chooser type.
+     * @param {settings.ChooserType} chooserType The chooser type to grab
+     *     exceptions from.
+     * @return {!Promise<!Array<!RawChooserException>>}
+     */
+    getChooserExceptionList(chooserType) {}
+
     /**
      * Converts a given number of bytes into a human-readable format, with data
      * units.
@@ -377,6 +395,11 @@ cr.define('settings', function() {
       return cr.sendWithPromise('getAllSites', contentTypes);
     }
 
+    /** @override */
+    getChooserExceptionList(chooserType) {
+      return cr.sendWithPromise('getChooserExceptionList', chooserType);
+    }
+
     /** @override */
     getFormattedBytes(numBytes) {
       return cr.sendWithPromise('getFormattedBytes', numBytes);

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

@@ -1054,6 +1054,31 @@ TEST_F('CrSettingsSiteDataDetailsTest', 'All', function() {
   mocha.run();
 });
 
+/**
+ * @constructor
+ * @extends {CrSettingsBrowserTest}
+ */
+function CrSettingsChooserExceptionListTest() {}
+
+CrSettingsChooserExceptionListTest.prototype = {
+  __proto__: CrSettingsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://settings/site_settings/chooser_exception_list.html',
+
+  /** @override */
+  extraLibraries: CrSettingsBrowserTest.prototype.extraLibraries.concat([
+    '../test_browser_proxy.js',
+    'test_util.js',
+    'test_site_settings_prefs_browser_proxy.js',
+    'chooser_exception_list_tests.js',
+  ]),
+};
+
+TEST_F('CrSettingsChooserExceptionListTest', 'All', function() {
+  mocha.run();
+});
+
 /**
  * @constructor
  * @extends {CrSettingsBrowserTest}

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

@@ -8,7 +8,9 @@
  * @typedef {{defaults: !Object<settings.ContentSettingsTypes,
  *                             !DefaultContentSetting>,
  *            exceptions: !Object<settings.ContentSettingsTypes,
- *                                !Array<!RawSiteException>>}}
+ *                                !Array<!RawSiteException>>,
+ *            chooserExceptions: !Object<settings.ContentSettingsTypes,
+ *                                       !Array<!RawChooserException>>}}
  */
 let SiteSettingsPref;
 
@@ -23,11 +25,13 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
   constructor() {
     super([
       'clearFlashPref',
+      'fetchBlockAutoplayStatus',
       'fetchUsbDevices',
       'fetchZoomLevels',
       'getAllSites',
-      'getFormattedBytes',
+      'getChooserExceptionList',
       'getDefaultValueForContentType',
+      'getFormattedBytes',
       'getExceptionList',
       'getOriginPermissions',
       'isOriginValid',
@@ -45,14 +49,13 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
       'setOriginPermissions',
       'setProtocolDefault',
       'updateIncognitoStatus',
-      'fetchBlockAutoplayStatus',
     ]);
 
     /** @private {boolean} */
     this.hasIncognito_ = false;
 
     /** @private {!SiteSettingsPref} */
-    this.prefs_ = test_util.createSiteSettingsPrefs([], []);
+    this.prefs_ = test_util.createSiteSettingsPrefs([], [], []);
 
     /** @private {!Array<ZoomLevelEntry>} */
     this.zoomList_ = [];
@@ -267,6 +270,24 @@ class TestSiteSettingsPrefsBrowserProxy extends TestBrowserProxy {
     return Promise.resolve(pref);
   }
 
+  /** @override */
+  getChooserExceptionList(chooserType) {
+    let pref = this.prefs_.chooserExceptions[chooserType];
+    assert(pref != undefined, 'Pref is missing for ' + chooserType);
+
+    if (this.hasIncognito_) {
+      const incognitoElements = [];
+      for (let i = 0; i < pref.length; ++i) {
+        // Copy |pref[i]| to avoid changing the original |pref[i]|.
+        incognitoElements.push(Object.assign({}, pref[i], {incognito: true}));
+      }
+      pref.push(...incognitoElements);
+    }
+
+    this.methodCalled('getChooserExceptionList', chooserType);
+    return Promise.resolve(pref);
+  }
+
   /** @override */
   isOriginValid(origin) {
     this.methodCalled('isOriginValid', origin);

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

@@ -126,6 +126,22 @@ cr.define('test_util', function() {
         override);
   }
 
+  /**
+   * Helper to create a mock RawChooserException.
+   * @param {!settings.ChooserType} chooserType The chooser exception type.
+   * @param {Array<!SiteException>} sites A list of SiteExceptions corresponding
+   *     to the chooser exception.
+   * @param {!Object=} override An object with a subset of the properties of
+   *     RawChooserException. Properties defined in |override| will overwrite
+   *     the defaults in this function's return value.
+   * @return {RawChooserException}
+   */
+  function createRawChooserException(chooserType, sites, override) {
+    return Object.assign(
+        {chooserType: chooserType, displayName: '', object: {}, sites: sites},
+        override || {});
+  }
+
   /**
    * Helper to create a mock SiteSettingsPref.
    * @param {!Array<{setting: settings.ContentSettingsTypes,
@@ -138,9 +154,15 @@ cr.define('test_util', function() {
    *     RawSiteExceptions and the content settings they apply to, which will
    *     overwrite the exceptions in the SiteSettingsPref returned by this
    *     function.
+   * @param {!Array<{setting: settings.ContentSettingsTypes,
+   *                 value: !Array<RawChooserException>}>} chooserExceptionsList
+   *     A list of RawChooserExceptions and the chooser type that they apply to,
+   *     which will overwrite the exceptions in the SiteSettingsPref returned by
+   *     this function.
    * @return {SiteSettingsPref}
    */
-  function createSiteSettingsPrefs(defaultsList, exceptionsList) {
+  function createSiteSettingsPrefs(
+      defaultsList, exceptionsList, chooserExceptionsList = []) {
     // These test defaults reflect the actual defaults assigned to each
     // ContentSettingType, but keeping these in sync shouldn't matter for tests.
     const defaults = {};
@@ -172,15 +194,21 @@ cr.define('test_util', function() {
       defaults[override.setting] = override.value;
     });
 
+    const chooserExceptions = {};
     const exceptions = {};
     for (let type in settings.ContentSettingsTypes) {
+      chooserExceptions[settings.ContentSettingsTypes[type]] = [];
       exceptions[settings.ContentSettingsTypes[type]] = [];
     }
-    exceptionsList.forEach((override) => {
+    exceptionsList.forEach(override => {
       exceptions[override.setting] = override.value;
     });
+    chooserExceptionsList.forEach(override => {
+      chooserExceptions[override.setting] = override.value;
+    });
 
     return {
+      chooserExceptions: chooserExceptions,
       defaults: defaults,
       exceptions: exceptions,
     };
@@ -238,6 +266,7 @@ cr.define('test_util', function() {
     createContentSettingTypeToValuePair: createContentSettingTypeToValuePair,
     createDefaultContentSetting: createDefaultContentSetting,
     createOriginInfo: createOriginInfo,
+    createRawChooserException: createRawChooserException,
     createRawSiteException: createRawSiteException,
     createSiteGroup: createSiteGroup,
     createSiteSettingsPrefs: createSiteSettingsPrefs,

testing/buildbot/filters/webui_polymer2_browser_tests.filter

@@ -111,6 +111,7 @@ CrSettingsCategorySettingExceptionsTest.*
 CrSettingsCertificateManagerTest.*
 CrSettingsChangePasswordPageTest.*
 CrSettingsCheckboxTest.*
+CrSettingsChooserExceptionListTest.*
 CrSettingsChooserExceptionListEntryTest.*
 CrSettingsChromeCleanupPageTest.*
 CrSettingsCrostiniPageTest.*

third_party/polymer/v1_0/chromium.patch

@@ -136,6 +136,45 @@ index 55714942c93c..46fb9adf6a04 100644
          right: 0;
          left: auto;
          transform-origin: right top;
+diff --git a/components-chromium/paper-tooltip/paper-tooltip-extracted.js b/components-chromium/paper-tooltip/paper-tooltip-extracted.js
+index 2830d229760c..2116f616a93b 100644
+--- a/components-chromium/paper-tooltip/paper-tooltip-extracted.js
++++ b/components-chromium/paper-tooltip/paper-tooltip-extracted.js
+@@ -123,12 +123,16 @@ Polymer({
+       },
+       /**
+        * Returns the target element that this tooltip is anchored to. It is
+-       * either the element given by the `for` attribute, or the immediate parent
+-       * of the tooltip.
++       * either the element given by the `for` attribute, the element manually
++       * specified through the `target` attribute, or the immediate parent of
++       * the tooltip.
+        *
+        * @type {Node}
+        */
+       get target() {
++        if (this._manualTarget)
++          return this._manualTarget;
++
+         var parentNode = Polymer.dom(this).parentNode;
+         // If the parentNode is a document fragment, then we need to use the host.
+         var ownerRoot = Polymer.dom(this).getOwnerRoot();
+@@ -142,6 +146,15 @@ Polymer({
+         return target;
+       },
+
++      /**
++       * Sets the target element that this tooltip will be anchored to.
++       * @param {Node} target
++       */
++      set target(target) {
++        this._manualTarget = target;
++        this._findTarget();
++      },
++
+       /**
+        * @return {void}
+        */
 diff --git a/components-chromium/polymer2/lib/legacy/legacy-element-mixin.html b/components-chromium/polymer2/lib/legacy/legacy-element-mixin.html
 index 7306c651407e..9c88699a3924 100644
 --- a/components-chromium/polymer2/lib/legacy/legacy-element-mixin.html

third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip-extracted.js

@@ -123,12 +123,16 @@ Polymer({
       },
       /**
        * Returns the target element that this tooltip is anchored to. It is
-       * either the element given by the `for` attribute, or the immediate parent
-       * of the tooltip.
+       * either the element given by the `for` attribute, the element manually
+       * specified through the `target` attribute, or the immediate parent of
+       * the tooltip.
        *
        * @type {Node}
        */
       get target() {
+        if (this._manualTarget)
+          return this._manualTarget;
+
         var parentNode = Polymer.dom(this).parentNode;
         // If the parentNode is a document fragment, then we need to use the host.
         var ownerRoot = Polymer.dom(this).getOwnerRoot();
@@ -142,6 +146,15 @@ Polymer({
         return target;
       },
 
+      /**
+       * Sets the target element that this tooltip will be anchored to.
+       * @param {Node} target
+       */
+      set target(target) {
+        this._manualTarget = target;
+        this._findTarget();
+      },
+
       /**
        * @return {void}
        */