Skip to content

GitLab

T
tangled
Commit 9d3b0afa authored by Devlin Cronin's avatar Devlin Cronin Committed by Commit Bot
Browse files
Options

[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: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618678}
parent 93e4e1e6
Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 72 deletions
chrome/app/md_extensions_strings.grdp
View file @ 9d3b0afa
......@@ -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
View file @ 9d3b0afa
......@@ -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
View file @ 9d3b0afa
<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,29 +68,17 @@
$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]]">
</cr-radio-button>
<cr-radio-button name="[[HostAccess_.ON_SPECIFIC_SITES]]"
class="multi-row">
<div>
$i18n{hostAccessOnSpecificSites}
</option>
<option value$="[[HostAccess_.ON_ALL_SITES]]">
$i18n{hostAccessOnAllSites}
</option>
</select>
</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)]]">
......@@ -92,8 +92,19 @@
</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}
</cr-radio-button>
</cr-radio-group>
</div>
<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
View file @ 9d3b0afa
......@@ -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
View file @ 9d3b0afa
......@@ -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
View file @ 9d3b0afa
......@@ -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 = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment