[Extensions Click-to-Script] Update site access section

Update the Site Access section to meet the new mocks. Instead of a drop
down, include a radio button group to support selection of site access
options. Incorporate the list of allowed sites, if the "specific sites"
option is selected, into the radio group item.

This is a purely aesthetic change and has no functional difference. Test
changes are only to update identifiers.

Screenshots: https://imgur.com/a/SgAhyJu

Bug: 914523

Change-Id: Ib9521f1a4196c8030babb9041560c573e146b39b
Reviewed-on: https://chromium-review.googlesource.com/c/1385483
Commit-Queue: Devlin <rdevlin.cronin@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618678}

chrome/app/md_extensions_strings.grdp

@@ -199,6 +199,9 @@
   <message name="IDS_MD_EXTENSIONS_ITEM_SITE_ACCESS" desc="The label above the list of the websites that the extension can access.">
     Site access
   </message>
+  <message name="IDS_MD_EXTENSIONS_ITEM_SITE_ACCESS_ADD_HOST" desc="The label of the option to add a new site that the extension should be allowed to access.">
+    Add a new page
+  </message>
   <message name="IDS_MD_EXTENSIONS_ITEM_SITE_ACCESS_EMPTY" desc="The text to indicate that an extension does not have any site access.">
     This extension has no additional site access.
   </message>

chrome/browser/resources/md_extensions/BUILD.gn

@@ -317,6 +317,8 @@ js_library("runtime_host_permissions") {
   deps = [
     ":item",
     ":runtime_hosts_dialog",
+    "//ui/webui/resources/cr_elements/cr_radio_button:cr_radio_button",
+    "//ui/webui/resources/cr_elements/cr_radio_group:cr_radio_group",
   ]
   externs_list = [ "$externs_path/developer_private.js" ]
 }

chrome/browser/resources/md_extensions/runtime_host_permissions.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/action_link.html">
+<link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
@@ -13,33 +17,41 @@
 
 <dom-module id="extensions-runtime-host-permissions">
   <template>
-    <style include="cr-shared-style md-select paper-button-style">
-      #add-hosts-section {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        margin-top: 10px;
+    <style include="cr-shared-style action-link md-select paper-button-style">
+      #host-access {
+        margin-inline-start: 20px;
+        width: 100%;
+      }
+
+      #hosts {
+        margin-bottom: 0;
+        padding: 0;
       }
 
       #hosts li {
         align-items: center;
+        border-bottom: var(--cr-separator-line);
         display: flex;
+        height: var(--cr-section-min-height);
         justify-content: space-between;
       }
 
-      .mid-section-header {
-        color: var(--cr-primary-text-color);
-        margin-top: 12px;
+      #hosts li:last-child {
+        border-bottom: none;
+      }
+
+      #add-host {
+        font-weight: 500;
+        width: 100%;
       }
 
       #permissions-mode {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+        color: var(--cr-primary-text-color);
+        margin-top: 12px;
       }
 
-      #host-access {
-        margin-inline-start: 20px;
+      cr-radio-button.multi-row {
+        align-items: normal;
       }
 
       a[href] {
@@ -47,7 +59,7 @@
         text-decoration: none;
       }
     </style>
-    <div id="permissions-mode" class="mid-section-header">
+    <div id="permissions-mode">
       <div>
         <div>
           $i18n{hostPermissionsHeading}
@@ -56,44 +68,43 @@
           $i18nRaw{hostPermissionsLearnMoreLink}
         </div>
       </div>
-      <select id="host-access" class="md-select"
-          value="[[permissions.hostAccess]]"
-          on-change="onHostAccessChange_">
-        <option value$="[[HostAccess_.ON_CLICK]]">
+      <cr-radio-group id="host-access" selected="[[permissions.hostAccess]]"
+          on-selected-changed="onHostAccessChange_">
+        <cr-radio-button name="[[HostAccess_.ON_CLICK]]">
           $i18n{hostAccessOnClick}
-        </option>
-        <option value$="[[HostAccess_.ON_SPECIFIC_SITES]]">
-          $i18n{hostAccessOnSpecificSites}
-        </option>
-        <option value$="[[HostAccess_.ON_ALL_SITES]]">
+        </cr-radio-button>
+        <cr-radio-button name="[[HostAccess_.ON_SPECIFIC_SITES]]"
+            class="multi-row">
+          <div>
+            $i18n{hostAccessOnSpecificSites}
+          </div>
+          <template is="dom-if" if="[[showSpecificSites_(permissions.*)]]">
+            <ul id="hosts">
+              <template is="dom-repeat"
+                  items="[[getRuntimeHosts_(permissions.hosts)]]">
+                <li>
+                  <div>[[item]]</div>
+                  <paper-icon-button-light class="icon-more-vert">
+                    <button class="edit-host"
+                        on-click="onEditHostClick_"
+                        title="$i18n{hostPermissionsEdit}">
+                    </button>
+                  </paper-icon-button-light>
+                </li>
+              </template>
+              <li>
+                <a id="add-host" is="action-link" on-click="onAddHostClick_">
+                  $i18n{itemSiteAccessAddHost}
+                </a>
+              </li>
+            </ul>
+          </template>
+        </cr-radio-button>
+        <cr-radio-button name="[[HostAccess_.ON_ALL_SITES]]">
           $i18n{hostAccessOnAllSites}
-        </option>
-      </select>
+        </cr-radio-button>
+      </cr-radio-group>
     </div>
-    <template is="dom-if" if="[[showSpecificSites_(permissions.*)]]">
-      <div id="add-hosts-section">
-        <div class="mid-section-header">
-          $i18n{hostAllowedHosts}
-        </div>
-        <paper-button id="add-host" on-click="onAddHostClick_">
-          $i18n{add}
-        </paper-button>
-      </div>
-      <ul id="hosts">
-        <template is="dom-repeat"
-            items="[[getRuntimeHosts_(permissions.hosts)]]">
-          <li>
-            <div>[[item]]</div>
-            <paper-icon-button-light class="icon-more-vert">
-              <button class="edit-host"
-                  on-click="onEditHostClick_"
-                  title="$i18n{hostPermissionsEdit}">
-              </button>
-            </paper-icon-button-light>
-          </li>
-        </template>
-      </ul>
-    </template>
     <cr-action-menu id="hostActionMenu"
         on-close="onActionMenuClose_">
       <button class="dropdown-item" id="action-menu-edit"

chrome/browser/resources/md_extensions/runtime_host_permissions.js

@@ -96,9 +96,8 @@ cr.define('extensions', function() {
      * @private
      */
     onHostAccessChange_: function(event) {
-      const select = /** @type {!HTMLSelectElement} */ (event.target);
-      const access =
-          /** @type {chrome.developerPrivate.HostAccess} */ (select.value);
+      const group = this.$['host-access'];
+      const access = group.selected;
 
       if (access == chrome.developerPrivate.HostAccess.ON_SPECIFIC_SITES &&
           this.permissions.hostAccess !=
@@ -112,7 +111,7 @@ cr.define('extensions', function() {
         //   This ensures there will be at least one, so that the host access
         //   is properly calculated.
         this.oldHostAccess_ = this.permissions.hostAccess;
-        this.doShowHostDialog_(select, null);
+        this.doShowHostDialog_(group, null);
       } else {
         this.delegate.setItemHostAccess(this.itemId, access);
       }
@@ -182,7 +181,7 @@ cr.define('extensions', function() {
       // if the dialog was shown when just transitioning to a new state.
       if (this.oldHostAccess_) {
         assert(this.permissions.hostAccess == this.oldHostAccess_);
-        this.$['host-access'].value = this.oldHostAccess_;
+        this.$['host-access'].selected = this.oldHostAccess_;
         this.oldHostAccess_ = null;
       }
     },

chrome/browser/ui/webui/extensions/extensions_ui.cc

@@ -200,6 +200,7 @@ content::WebUIDataSource* CreateMdExtensionsSource(Profile* profile,
     {"itemPermissionsEmpty", IDS_MD_EXTENSIONS_ITEM_PERMISSIONS_EMPTY},
     {"itemRemoveExtension", IDS_MD_EXTENSIONS_ITEM_REMOVE_EXTENSION},
     {"itemSiteAccess", IDS_MD_EXTENSIONS_ITEM_SITE_ACCESS},
+    {"itemSiteAccessAddHost", IDS_MD_EXTENSIONS_ITEM_SITE_ACCESS_ADD_HOST},
     {"itemSiteAccessEmpty", IDS_MD_EXTENSIONS_ITEM_SITE_ACCESS_EMPTY},
     {"itemSource", IDS_MD_EXTENSIONS_ITEM_SOURCE},
     {"itemSourcePolicy", IDS_MD_EXTENSIONS_ITEM_SOURCE_POLICY},

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

@@ -37,17 +37,15 @@ suite('RuntimeHostPermissions', function() {
     expectTrue(testIsVisible('#host-access'));
 
     const selectHostAccess = element.$$('#host-access');
-    expectEquals(HostAccess.ON_CLICK, selectHostAccess.value);
+    expectEquals(HostAccess.ON_CLICK, selectHostAccess.selected);
     // For on-click mode, there should be no runtime hosts listed.
     expectFalse(testIsVisible('#hosts'));
-    expectFalse(testIsVisible('#add-hosts-section'));
 
     // Changing the data's access should change the UI appropriately.
     element.set('permissions.hostAccess', HostAccess.ON_ALL_SITES);
     Polymer.dom.flush();
-    expectEquals(HostAccess.ON_ALL_SITES, selectHostAccess.value);
+    expectEquals(HostAccess.ON_ALL_SITES, selectHostAccess.selected);
     expectFalse(testIsVisible('#hosts'));
-    expectFalse(testIsVisible('#add-hosts-section'));
 
     // Setting the mode to on specific sites should display the runtime hosts
     // list.
@@ -57,10 +55,11 @@ suite('RuntimeHostPermissions', function() {
       {host: 'https://chromium.org', granted: true}
     ]);
     Polymer.dom.flush();
-    expectEquals(HostAccess.ON_SPECIFIC_SITES, selectHostAccess.value);
+    expectEquals(HostAccess.ON_SPECIFIC_SITES, selectHostAccess.selected);
     expectTrue(testIsVisible('#hosts'));
-    expectTrue(testIsVisible('#add-hosts-section'));
-    expectEquals(2, element.$$('#hosts').getElementsByTagName('li').length);
+    // Expect three entries in the list: the two hosts + the add-host button.
+    expectEquals(3, element.$$('#hosts').getElementsByTagName('li').length);
+    expectTrue(testIsVisible('#add-host'));
   });
 
   test('permissions selection', function() {
@@ -80,9 +79,7 @@ suite('RuntimeHostPermissions', function() {
     // event, then verifies that the delegate was called with the correct
     // value.
     function expectDelegateCallOnAccessChange(newValue) {
-      selectHostAccess.value = newValue;
-      selectHostAccess.dispatchEvent(
-          new CustomEvent('change', {target: selectHostAccess}));
+      selectHostAccess.selected = newValue;
       return delegate.whenCalled('setItemHostAccess').then((args) => {
         expectEquals(ITEM_ID, args[0] /* id */);
         expectEquals(newValue, args[1] /* access */);
@@ -110,8 +107,7 @@ suite('RuntimeHostPermissions', function() {
     const selectHostAccess = element.$$('#host-access');
     assertTrue(!!selectHostAccess);
 
-    selectHostAccess.value = HostAccess.ON_SPECIFIC_SITES;
-    selectHostAccess.dispatchEvent(new CustomEvent('change'));
+    selectHostAccess.selected = HostAccess.ON_SPECIFIC_SITES;
 
     Polymer.dom.flush();
     const dialog = element.$$('extensions-runtime-hosts-dialog');
@@ -126,7 +122,7 @@ suite('RuntimeHostPermissions', function() {
     dialog.$$('.cancel-button').click();
     return whenClosed.then(() => {
       Polymer.dom.flush();
-      expectEquals(HostAccess.ON_CLICK, selectHostAccess.value);
+      expectEquals(HostAccess.ON_CLICK, selectHostAccess.selected);
     });
   });
 
@@ -143,9 +139,7 @@ suite('RuntimeHostPermissions', function() {
     const selectHostAccess = element.$$('#host-access');
     assertTrue(!!selectHostAccess);
 
-    selectHostAccess.value = HostAccess.ON_SPECIFIC_SITES;
-    selectHostAccess.dispatchEvent(
-        new CustomEvent('change', {target: selectHostAccess}));
+    selectHostAccess.selected = HostAccess.ON_SPECIFIC_SITES;
 
     Polymer.dom.flush();
     const dialog = element.$$('extensions-runtime-hosts-dialog');
@@ -165,7 +159,7 @@ suite('RuntimeHostPermissions', function() {
     dialog.$$('.action-button').click();
     return whenClosed.then(() => {
       Polymer.dom.flush();
-      expectEquals(HostAccess.ON_SPECIFIC_SITES, selectHostAccess.value);
+      expectEquals(HostAccess.ON_SPECIFIC_SITES, selectHostAccess.selected);
 
       // Simulate the new host being added.
       const updatedPermissions = {