Commit 3d8adf8d authored by dschuyler's avatar dschuyler Committed by Commit bot

[MD settings] content settings add site button; layout fixes

This CL moves the 'Add site exception' button to an 'Add' button on the
header line of the site exceptions. The filter for the site data has
been moved into the list of sites. The remove all local cookie and
storage button has been removed from the list of cookies (it's still
available in the dialog).

Also, the misalignment of .secondary text in checkboxes and content
settings has been fixed.

BUG=654875, 655036
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://chromiumcodereview.appspot.com/2429973003
Cr-Commit-Position: refs/heads/master@{#426536}
parent 8e0c4af8
......@@ -1787,9 +1787,6 @@
<message name="IDS_SETTINGS_SITE_SETTINGS_EXCEPTIONS" desc="Label for exception sites in site settings.">
Exceptions
</message>
<message name="IDS_SETTINGS_SITE_SETTINGS_ADD_SITE" desc="Label for add site button in site settings.">
Add Site
</message>
<message name="IDS_SETTINGS_SITE_SETTINGS_SITE_URL" desc="Label for site URL text entry in site settings.">
Site URL
</message>
......@@ -1841,9 +1838,6 @@
<message name="IDS_SETTINGS_SITE_SETTINGS_SITE_REMOVE_DIALOG_TITLE" desc="Title of the dialog that warns about deleting all site data and resetting permissions.">
Clear and reset site
</message>
<message name="IDS_SETTINGS_SITE_SETTINGS_COOKIE_REMOVE_CONFIRMATION" desc="Text for the dialog that warns about deleting all site data.">
This will delete any data <ph name="SITE">$1<ex>www.example.com</ex></ph> stored on your device. Do you want to continue?
</message>
<message name="IDS_SETTINGS_SITE_SETTINGS_SITE_REMOVE_CONFIRMATION" desc="Text for the dialog that warns about deleting all site data and permissions.">
This will delete any data <ph name="SITE">$1<ex>www.example.com</ex></ph> stored on your device, and reset any permissions you granted to run. Do you want to continue?
</message>
......
......@@ -19,10 +19,6 @@
min-height: var(--settings-row-min-height);
}
.secondary:not(:empty) {
@apply(--settings-secondary);
}
paper-checkbox:not([disabled]) {
width: 100%;
}
......
......@@ -163,8 +163,9 @@
.secondary-button {
--paper-button: {
color: var(--paper-grey-600);
text-decoration: none;
font-weight: 500;
min-width: 1em; /* A tighter fit than 5.14em for short buttons. */
text-decoration: none;
};
--paper-button-flat-keyboard-focus: {
background: rgba(0, 0, 0, .12);
......@@ -229,11 +230,6 @@
display: block;
}
.list-frame .secondary,
.list-item .secondary {
@apply(--settings-secondary);
}
/* A list-item is intended to be contained within a list-frame. The list
* frame will setup the initial start margin. */
.list-item {
......@@ -324,6 +320,15 @@
@apply(--settings-secondary);
}
/* The |:empty| CSS selector only works when there is no whitespace.
* E.g. <div>[[foo]]</div> will be |:empty| when foo == ""; and
* <div> [[foo]] </div> will not be |:empty| when foo == "". Ensure there
* is no extra whitespace when the contents of .secondary may be "".
*/
.secondary:empty {
margin: 0;
}
/* The middle part (horizontally) of a row. */
.settings-box .middle {
-webkit-padding-start: 16px;
......
......@@ -3,6 +3,7 @@
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="/settings_page/settings_subpage_search.html">
<link rel="import" href="/settings_shared_css.html">
<link rel="import" href="/site_settings/site_data_details_dialog.html">
......@@ -11,30 +12,37 @@
<dom-module id="site-data">
<template>
<style include="settings-shared">
:host {
display: block;
margin-top: 18px;
width: 100%;
}
.list-frame {
-webkit-margin-end: -29px;
-webkit-padding-start: 36px;
margin-top: 10px;
}
.site-header {
margin-top: 10px;
.secondary-button {
margin-top: 12px; /* Align with <h2>. */
}
</style>
<div class="settings-box first">
<h2 class="start">$i18n{siteSettingsCookieHeader}</h2>
<paper-button class="secondary-button"
on-tap="onConfirmDeleteMultipleSites_"
hidden$="[[!isRemoveButtonVisible_(sites, renderedItemCount)]]">
[[computeRemoveLabel_(filterString_)]]
</paper-button>
</div>
.site {
margin-top: 7px;
}
<div class="list-frame vertical-list">
<settings-subpage-search id="filter" on-search-changed="onSearchChanged_"
label="$i18n{siteSettingsCookieSearch}">
</settings-subpage-search>
<template is="dom-repeat" id="list" items="[[sites]]" filter="showItem_"
rendered-item-count="{{renderedItemCount}}">
<div class="list-item two-line" on-tap="onSiteTap_" actionable>
<div class="favicon-image" style$="[[computeSiteIcon(item.site)]]">
</div>
<div class="middle">
[[item.site]]
<div class="secondary">[[item.localData]]</div>
</div>
<button class="subpage-arrow" is="paper-icon-button-light"></button>
</div>
</template>
</div>
#filter {
margin-top: -4px;
}
</style>
<!-- Confirm Delete dialog -->
<dialog is="cr-dialog" id="confirmDeleteDialog">
<div class="title">$i18n{siteSettingsCookieRemoveDialogTitle}</div>
......@@ -48,37 +56,6 @@
</paper-button>
</div>
</dialog>
<div class="layout horizontal">
<div class="flex site-header">$i18n{siteSettingsCookieHeader}</div>
<div class="secondary-action"
hidden$="[[!isRemoveButtonVisible_(sites, renderedItemCount)]]">
<paper-button on-tap="onConfirmDeleteMultipleSites_"
class="secondary-button">
[[computeRemoveLabel_(filterString_)]]
</paper-button>
</div>
<settings-subpage-search id="filter" on-search-changed="onSearchChanged_"
label="$i18n{siteSettingsCookieSearch}">
</settings-subpage-search>
</div>
<div class="list-frame vertical-list">
<template is="dom-repeat" id="list" items="[[sites]]" filter="showItem_"
rendered-item-count="{{renderedItemCount}}">
<div class="list-item layout horizontal">
<div class="layout horizontal flex" on-tap="onSiteTap_" actionable>
<div class="favicon-image site"
style$="[[computeSiteIcon(item.site)]]">
</div>
<div class="flex middle">[[item.site]]</div>
<div class="site">[[item.localData]]</div>
</div>
<paper-icon-button on-tap="onConfirmDeleteSite_"
icon="cr:delete"></paper-icon-button>
</div>
</template>
</div>
</template>
<script src="cookie_info.js"></script>
<script src="cookie_tree_node.js"></script>
......
......@@ -71,7 +71,7 @@ Polymer({
/**
* A filter function for the list.
* @param {!CookieDataSummaryItem} item The item to possibly filter out.
* @return {!boolean} Whether to show the item.
* @return {boolean} Whether to show the item.
* @private
*/
showItem_: function(item) {
......@@ -93,7 +93,7 @@ Polymer({
/**
* Returns the string to use for the Remove label.
* @return {!string} filterString The current filter string.
* @return {string} filterString The current filter string.
* @private
*/
computeRemoveLabel_: function(filterString) {
......@@ -156,18 +156,6 @@ Polymer({
this.$.confirmDeleteDialog.close();
},
/**
* Shows a dialog to confirm the deletion of a site.
* @param {!{model: !{item: CookieDataSummaryItem}}} event
* @private
*/
onConfirmDeleteSite_: function(event) {
this.idToDelete_ = event.model.item.id;
this.confirmationDeleteMsg_ = loadTimeData.getStringF(
'siteSettingsCookieRemoveConfirmation', event.model.item.site);
this.$.confirmDeleteDialog.showModal();
},
/**
* Shows a dialog to confirm the deletion of multiple sites.
* @private
......
......@@ -4,7 +4,6 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/icons.html">
<link rel="import" href="/route.html">
......@@ -17,6 +16,10 @@
<dom-module id="site-list">
<template>
<style include="settings-shared">
paper-button {
margin-top: 12px; /* Align with <h2>. */
}
paper-icon-button {
left: 8px;
right: 8px;
......@@ -26,11 +29,12 @@
-webkit-user-select: text;
}
</style>
<paper-submenu id="category" hidden
on-paper-submenu-open="onToggle_" on-paper-submenu-close="onToggle_">
<div class="menu-trigger settings-box" hidden$="[[allSites]]" actionable>
<div class="flex" id="header">[[categoryHeader]]</div>
<iron-icon id="icon" icon="cr:expand-more"></iron-icon>
<div id="category" hidden>
<div class="settings-box first" hidden$="[[allSites]]">
<h2 class="start">[[categoryHeader]]</h2>
<paper-button class="secondary-button" id="icon" on-tap="onAddSiteTap_">
$i18n{add}
</paper-button>
</div>
<div class="list-frame menu-content vertical-list" id="listContainer">
......@@ -43,9 +47,10 @@
</div>
<div class="middle">
<div class="selectable">[[item.originForDisplay]]</div>
<div class="selectable secondary">
[[computeSiteDescription_(item)]]
</div>
<!-- This div must not contain extra whitespace. -->
<div class="selectable secondary"
>[[computeSiteDescription_(item)]]</div>
</div>
</div>
......@@ -89,14 +94,8 @@
</template>
</div>
</template>
<template is="dom-if" if="[[!allSites]]">
<div class="list-item list-button" on-tap="onAddSiteTap_">
$i18n{addSiteLink}
</div>
</template>
</div>
</paper-submenu>
</div>
</template>
<script src="site_list.js"></script>
</dom-module>
......@@ -169,42 +169,9 @@ Polymer({
}
this.setUpActionMenu_();
this.ensureOpened_();
this.populateList_();
},
/**
* Ensures the widget is |opened| when needed when displayed initially.
* @private
*/
ensureOpened_: function() {
// Allowed list and Clear on Exit lists are always shown opened by default
// and All Sites is presented all in one list (nothing closed by default).
if (this.allSites ||
this.categorySubtype == settings.PermissionValues.ALLOW ||
this.categorySubtype == settings.PermissionValues.SESSION_ONLY) {
this.$.category.opened = true;
return;
}
// Block list should only be shown opened if there is nothing to show in
// the other lists.
if (this.category != settings.INVALID_CATEGORY_SUBTYPE) {
this.browserProxy_.getExceptionList(this.category).then(
function(exceptionList) {
var othersExists = exceptionList.some(function(exception) {
return exception.setting == settings.PermissionValues.ALLOW ||
exception.setting == settings.PermissionValues.SESSION_ONLY;
});
if (othersExists)
return;
this.$.category.opened = true;
}.bind(this));
} else {
this.$.category.opened = true;
}
},
/**
* Returns which icon, if any, should represent the fact that this exception
* is controlled.
......@@ -252,17 +219,6 @@ Polymer({
});
},
/**
* Handles the expanding and collapsing of the sites list.
* @private
*/
onToggle_: function(e) {
if (this.$.category.opened)
this.$.icon.icon = 'cr:expand-less';
else
this.$.icon.icon = 'cr:expand-more';
},
/**
* Populate the sites list for display.
* @private
......
......@@ -103,9 +103,7 @@
selected-site="{{selectedSite}}">
</site-list>
<div class="settings-box">
<content select=".site-data"></content>
</div>
<content select=".site-data"></content>
</template>
<script src="site_settings_category.js"></script>
</dom-module>
......@@ -1460,7 +1460,6 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
{"siteSettingsBlockedRecommended",
IDS_SETTINGS_SITE_SETTINGS_BLOCKED_RECOMMENDED},
{"siteSettingsExceptions", IDS_SETTINGS_SITE_SETTINGS_EXCEPTIONS},
{"siteSettingsAddSite", IDS_SETTINGS_SITE_SETTINGS_ADD_SITE},
{"siteSettingsSiteUrl", IDS_SETTINGS_SITE_SETTINGS_SITE_URL},
{"siteSettingsActionAllow", IDS_SETTINGS_SITE_SETTINGS_ALLOW_MENU},
{"siteSettingsActionBlock", IDS_SETTINGS_SITE_SETTINGS_BLOCK_MENU},
......@@ -1478,8 +1477,6 @@ void AddSiteSettingsStrings(content::WebUIDataSource* html_source,
IDS_SETTINGS_SITE_SETTINGS_COOKIE_REMOVE_ALL},
{"siteSettingsCookieRemoveAllShown",
IDS_SETTINGS_SITE_SETTINGS_COOKIE_REMOVE_ALL_SHOWN},
{"siteSettingsCookieRemoveConfirmation",
IDS_SETTINGS_SITE_SETTINGS_COOKIE_REMOVE_CONFIRMATION},
{"siteSettingsCookieRemoveDialogTitle",
IDS_SETTINGS_SITE_SETTINGS_COOKIE_REMOVE_DIALOG_TITLE},
{"siteSettingsCookieRemoveMultipleConfirmation",
......
......@@ -600,9 +600,7 @@ cr.define('site_list', function() {
function(contentType) {
assertEquals(
settings.ContentSettingsTypes.GEOLOCATION, contentType);
assertFalse(testElement.$.category.hidden);
assertTrue(testElement.$.category.opened);
}).then(function() {
assertNotEquals(0, testElement.$.listContainer.offsetHeight);
});
......@@ -616,9 +614,7 @@ cr.define('site_list', function() {
function(contentType) {
assertEquals(
settings.ContentSettingsTypes.GEOLOCATION, contentType);
assertFalse(testElement.$.category.hidden);
assertFalse(testElement.$.category.opened);
assertEquals(0, testElement.$.listContainer.offsetHeight);
});
});
......@@ -633,7 +629,6 @@ cr.define('site_list', function() {
settings.ContentSettingsTypes.GEOLOCATION, contentType);
assertFalse(testElement.$.category.hidden);
assertTrue(testElement.$.category.opened);
}).then(function() {
assertNotEquals(0, testElement.$.listContainer.offsetHeight);
});
......@@ -647,9 +642,7 @@ cr.define('site_list', function() {
function(contentType) {
assertEquals(
settings.ContentSettingsTypes.GEOLOCATION, contentType);
assertFalse(testElement.$.category.hidden);
assertTrue(testElement.$.category.opened);
}).then(function() {
assertNotEquals(0, testElement.$.listContainer.offsetHeight);
});
......@@ -663,7 +656,6 @@ cr.define('site_list', function() {
function(contentType) {
assertEquals(
settings.ContentSettingsTypes.GEOLOCATION, contentType);
assertFalse(testElement.$.category.hidden);
});
});
......@@ -676,7 +668,6 @@ cr.define('site_list', function() {
function(contentType) {
assertEquals(
settings.ContentSettingsTypes.GEOLOCATION, contentType);
assertFalse(testElement.$.category.hidden);
});
});
......@@ -701,7 +692,6 @@ cr.define('site_list', function() {
// Required for firstItem to be found below.
Polymer.dom.flush();
assertTrue(testElement.$.category.opened);
assertFalse(testElement.$.category.hidden);
// Validate that the sites gets populated from pre-canned prefs.
assertEquals(3, testElement.sites.length,
......@@ -746,7 +736,6 @@ cr.define('site_list', function() {
// Required for firstItem to be found below.
Polymer.dom.flush();
assertTrue(testElement.$.category.opened);
assertFalse(testElement.$.category.hidden);
// Validate that the sites gets populated from pre-canned prefs.
assertEquals(1, testElement.sites.length,
......
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