Commit 2de5c134 authored by Tymofii Chudakov's avatar Tymofii Chudakov Committed by Commit Bot

WebUI Settings: exceptions section redesign

Implemented exceptions section redesign of the content settings pages.
This CL includes redesign of the following content setting categories:
- ADS                              - MIDI_DEVICES
- AR                               - MIXEDSCRIPT
- AUTOMATIC_DOWNLOADS              - MOTION_SENSORS
- BACKGROUND_SYNC                  - PAYMENT_HANDLER
- CAMERA                           - PLUGINS
- CLIPBOARD                        - POPUPS
- FILE_SYSTEM_WRITE                - PROTECTED_CONTENT
- GEOLOCATION                      - SOUND
- IMAGES                           - UNSANDBOXED_PLUGINS
- JAVASCRIPT                       - VR
- MIC

Bug: 1113642
Change-Id: I843de142fa297323b795480cecc9ecaaafc18fe5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2403280
Commit-Queue: Tymofii Chudakov <tchudakov@chromium.org>
Reviewed-by: default avatarTheodore Olsauskas-Warren <sauski@google.com>
Reviewed-by: default avatardpapad <dpapad@chromium.org>
Reviewed-by: default avatarSean Harrison <harrisonsean@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814639}
parent 937a7c66
This diff is collapsed.
193d685b80082e541b503afa0ed38a856379ec1c
\ No newline at end of file
193d685b80082e541b503afa0ed38a856379ec1c
\ No newline at end of file
85f577f64a6ab589365606c8806128c739a3bcea
\ No newline at end of file
85f577f64a6ab589365606c8806128c739a3bcea
\ No newline at end of file
1d65fa8ef567fb449b3500ad771859af40163ebd
\ No newline at end of file
1d65fa8ef567fb449b3500ad771859af40163ebd
\ No newline at end of file
3220bd231c6f721c1f3ba5b6dafe42a2378205ea
\ No newline at end of file
3220bd231c6f721c1f3ba5b6dafe42a2378205ea
\ No newline at end of file
870a67f6210d9924d8bb8419727e2e3696fe2f30
\ No newline at end of file
3b3ed455d5b4575a47a2b8320eed38d78f2585fd
\ No newline at end of file
3b3ed455d5b4575a47a2b8320eed38d78f2585fd
\ No newline at end of file
229ccefd8d8e84d5fada4f21d65f53de794ae81f
\ No newline at end of file
229ccefd8d8e84d5fada4f21d65f53de794ae81f
\ No newline at end of file
b203f05e2c681401cc1a3e12ef5350c0f36a2cfb
\ No newline at end of file
b203f05e2c681401cc1a3e12ef5350c0f36a2cfb
\ No newline at end of file
21024716de448062c3499f0df53b4ee300dd7f2d
\ No newline at end of file
21024716de448062c3499f0df53b4ee300dd7f2d
\ No newline at end of file
b83854ecb12e1febc59de9bb2d65a5f205fb3223
\ No newline at end of file
b83854ecb12e1febc59de9bb2d65a5f205fb3223
\ No newline at end of file
8fa010440ef4e5c899d944ff00ef5ac0ecfdfc98
\ No newline at end of file
8fa010440ef4e5c899d944ff00ef5ac0ecfdfc98
\ No newline at end of file
22e77bf3527ceacfa58abc65ed89aafa0836d218
\ No newline at end of file
22e77bf3527ceacfa58abc65ed89aafa0836d218
\ No newline at end of file
f71ba65aa5540bd4f45139dd77621181747a8c2f
\ No newline at end of file
f71ba65aa5540bd4f45139dd77621181747a8c2f
\ No newline at end of file
1dc8f04745d691c01bdd755ac38e33333cc26159
\ No newline at end of file
1dc8f04745d691c01bdd755ac38e33333cc26159
\ No newline at end of file
...@@ -32,6 +32,10 @@ ...@@ -32,6 +32,10 @@
settings-collapse-radio-button .bullet-line:last-child { settings-collapse-radio-button .bullet-line:last-child {
padding-bottom: 12px; padding-bottom: 12px;
} }
#exceptionHeader {
padding: 0 var(--cr-section-padding);
}
</style> </style>
<picture> <picture>
<source <source
...@@ -136,6 +140,9 @@ ...@@ -136,6 +140,9 @@
<cr-link-row id="site-data-trigger" class="hr" <cr-link-row id="site-data-trigger" class="hr"
on-click="onSiteDataClick_" label="$i18n{siteSettingsCookieLink}"> on-click="onSiteDataClick_" label="$i18n{siteSettingsCookieLink}">
</cr-link-row> </cr-link-row>
<div id="exceptionHeader" hidden="[[!enableContentSettingsRedesign_]]">
<h2>$i18n{siteSettingsCustomizedBehaviors}</h2>
</div>
<site-list id="allowExceptionsList" <site-list id="allowExceptionsList"
category="[[cookiesContentSettingType_]]" category="[[cookiesContentSettingType_]]"
category-subtype="[[contentSetting_.ALLOW]]" category-subtype="[[contentSetting_.ALLOW]]"
......
...@@ -90,6 +90,14 @@ Polymer({ ...@@ -90,6 +90,14 @@ Polymer({
value: CookiePrimarySetting, value: CookiePrimarySetting,
}, },
/** @private */
enableContentSettingsRedesign_: {
type: Boolean,
value() {
return loadTimeData.getBoolean('enableContentSettingsRedesign');
}
},
/** /**
* Used for HTML bindings. This is defined as a property rather than * Used for HTML bindings. This is defined as a property rather than
* within the ready callback, because the value needs to be available * within the ready callback, because the value needs to be available
......
<style include="settings-shared">
#exceptionHeader {
padding: 0 var(--cr-section-padding);
}
</style>
<div id="exceptionHeader" hidden="[[!enableContentSettingsRedesign_]]">
<h2>$i18n{siteSettingsCustomizedBehaviors}</h2>
</div>
<site-list <site-list
has-discarded-exceptions="{{blockSiteListHasDiscardedExceptions_}}" has-discarded-exceptions="{{blockSiteListHasDiscardedExceptions_}}"
category="[[category]]" category="[[category]]"
...@@ -18,7 +26,7 @@ ...@@ -18,7 +26,7 @@
has-discarded-exceptions="{{allowSiteListHasDiscardedExceptions_}}" has-discarded-exceptions="{{allowSiteListHasDiscardedExceptions_}}"
category="[[category]]" category="[[category]]"
category-subtype="[[ContentSetting.ALLOW]]" category-subtype="[[ContentSetting.ALLOW]]"
category-header="$i18n{siteSettingsAllow}" category-header="[[allowHeader]]"
read-only-list="[[getReadOnlyList_(readOnlyList, defaultManaged_)]]" read-only-list="[[getReadOnlyList_(readOnlyList, defaultManaged_)]]"
search-filter="[[searchFilter]]" search-filter="[[searchFilter]]"
hidden$="[[!showAllowSiteList_]]"> hidden$="[[!showAllowSiteList_]]">
......
...@@ -12,6 +12,7 @@ import './site_list.js'; ...@@ -12,6 +12,7 @@ import './site_list.js';
import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js'; import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {loadTimeData} from '../i18n_setup.js';
import {ContentSetting, ContentSettingsTypes, SiteSettingSource} from './constants.js'; import {ContentSetting, ContentSettingsTypes, SiteSettingSource} from './constants.js';
import {SiteSettingsBehavior} from './site_settings_behavior.js'; import {SiteSettingsBehavior} from './site_settings_behavior.js';
...@@ -52,6 +53,19 @@ Polymer({ ...@@ -52,6 +53,19 @@ Polymer({
*/ */
blockHeader: String, blockHeader: String,
/** @private */
enableContentSettingsRedesign_: {
type: Boolean,
value() {
return loadTimeData.getBoolean('enableContentSettingsRedesign');
}
},
/**
* The heading text for the allowed exception list.
*/
allowHeader: String,
searchFilter: String, searchFilter: String,
/** /**
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
</style> </style>
<div id="category"> <div id="category">
<div class="cr-row first"> <div class="cr-row first">
<h2 class="flex">[[categoryHeader]]</h2> <h2 class$="flex [[getCssClass_(enableContentSettingsRedesign_)]]">
[[categoryHeader]]
</h2>
<cr-button id="addSite" class="header-aligned-button" <cr-button id="addSite" class="header-aligned-button"
hidden$="[[!showAddSiteButton_]]" on-click="onAddSiteTap_"> hidden$="[[!showAddSiteButton_]]" on-click="onAddSiteTap_">
$i18n{add} $i18n{add}
......
...@@ -59,6 +59,14 @@ Polymer({ ...@@ -59,6 +59,14 @@ Polymer({
categoryHeader: String, categoryHeader: String,
/** @private */
enableContentSettingsRedesign_: {
type: Boolean,
value() {
return loadTimeData.getBoolean('enableContentSettingsRedesign');
}
},
/** /**
* The site serving as the model for the currently open action menu. * The site serving as the model for the currently open action menu.
* @private {?SiteException} * @private {?SiteException}
...@@ -538,4 +546,12 @@ Polymer({ ...@@ -538,4 +546,12 @@ Polymer({
computeHasDiscardedExceptions_() { computeHasDiscardedExceptions_() {
return this.sites.some(exception => exception.isDiscarded); return this.sites.some(exception => exception.isDiscarded);
}, },
/**
* @return {string}
* @private
*/
getCssClass_() {
return this.enableContentSettingsRedesign_ ? 'secondary' : '';
}
}); });
...@@ -3,10 +3,12 @@ ...@@ -3,10 +3,12 @@
// found in the LICENSE file. // found in the LICENSE file.
// clang-format off // clang-format off
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {ContentSetting,ContentSettingProvider,ContentSettingsTypes,SiteSettingSource,SiteSettingsPrefsBrowserProxyImpl} from 'chrome://settings/lazy_load.js'; import {ContentSetting,ContentSettingProvider,ContentSettingsTypes,SiteSettingSource,SiteSettingsPrefsBrowserProxyImpl} from 'chrome://settings/lazy_load.js';
import {TestSiteSettingsPrefsBrowserProxy} from 'chrome://test/settings/test_site_settings_prefs_browser_proxy.js'; import {TestSiteSettingsPrefsBrowserProxy} from 'chrome://test/settings/test_site_settings_prefs_browser_proxy.js';
import {createContentSettingTypeToValuePair,createDefaultContentSetting,createSiteSettingsPrefs} from 'chrome://test/settings/test_util.js'; import {createContentSettingTypeToValuePair,createDefaultContentSetting,createSiteSettingsPrefs} from 'chrome://test/settings/test_util.js';
import {isChildVisible} from 'chrome://test/test_util.m.js';
// clang-format on // clang-format on
/** @fileoverview Suite of tests for category-setting-exceptions. */ /** @fileoverview Suite of tests for category-setting-exceptions. */
...@@ -23,6 +25,12 @@ suite('CategorySettingExceptions', function() { ...@@ -23,6 +25,12 @@ suite('CategorySettingExceptions', function() {
*/ */
let browserProxy = null; let browserProxy = null;
suiteSetup(function() {
loadTimeData.overrideValues({
enableContentSettingsRedesign: false,
});
});
// Initialize a category-setting-exceptions before each test. // Initialize a category-setting-exceptions before each test.
setup(function() { setup(function() {
browserProxy = new TestSiteSettingsPrefsBrowserProxy(); browserProxy = new TestSiteSettingsPrefsBrowserProxy();
...@@ -38,6 +46,10 @@ suite('CategorySettingExceptions', function() { ...@@ -38,6 +46,10 @@ suite('CategorySettingExceptions', function() {
assertTrue(!!testElement); assertTrue(!!testElement);
}); });
test('header visibility', function() {
assertFalse(isChildVisible(testElement, '#exceptionHeader'));
});
test( test(
'allow site list is hidden when showAllowSiteList_ is false', function() { 'allow site list is hidden when showAllowSiteList_ is false', function() {
testElement.showAllowSiteList_ = false; testElement.showAllowSiteList_ = false;
...@@ -182,3 +194,28 @@ suite('CategorySettingExceptions', function() { ...@@ -182,3 +194,28 @@ suite('CategorySettingExceptions', function() {
return Promise.all([initializationTest, updateTest]); return Promise.all([initializationTest, updateTest]);
}); });
}); });
suite('ContentSettingsRedesign', function() {
/**
* A site settings exceptions created before each test.
* @type {SiteSettingsExceptionsElement}
*/
let testElement;
suiteSetup(function() {
loadTimeData.overrideValues({
enableContentSettingsRedesign: true,
});
});
// Initialize a category-setting-exceptions before each test.
setup(function() {
PolymerTest.clearBody();
testElement = document.createElement('category-setting-exceptions');
document.body.appendChild(testElement);
});
test('header visibility', function() {
assertTrue(isChildVisible(testElement, '#exceptionHeader'));
});
});
...@@ -27,6 +27,12 @@ suite('CrSettingsCookiesPageTest', function() { ...@@ -27,6 +27,12 @@ suite('CrSettingsCookiesPageTest', function() {
/** @type {!SettingsCookiesPageElement} */ /** @type {!SettingsCookiesPageElement} */
let page; let page;
suiteSetup(function() {
loadTimeData.overrideValues({
enableContentSettingsRedesign: false,
});
});
setup(function() { setup(function() {
testMetricsBrowserProxy = new TestMetricsBrowserProxy(); testMetricsBrowserProxy = new TestMetricsBrowserProxy();
MetricsBrowserProxyImpl.instance_ = testMetricsBrowserProxy; MetricsBrowserProxyImpl.instance_ = testMetricsBrowserProxy;
...@@ -52,6 +58,7 @@ suite('CrSettingsCookiesPageTest', function() { ...@@ -52,6 +58,7 @@ suite('CrSettingsCookiesPageTest', function() {
test('ElementVisibility', async function() { test('ElementVisibility', async function() {
await flushTasks(); await flushTasks();
assertFalse(isChildVisible(page, '#exceptionHeader'));
assertTrue(isChildVisible(page, '#clearOnExit')); assertTrue(isChildVisible(page, '#clearOnExit'));
assertTrue(isChildVisible(page, '#doNotTrack')); assertTrue(isChildVisible(page, '#doNotTrack'));
assertTrue(isChildVisible(page, '#networkPrediction')); assertTrue(isChildVisible(page, '#networkPrediction'));
...@@ -193,3 +200,31 @@ suite('CrSettingsCookiesPageTest', function() { ...@@ -193,3 +200,31 @@ suite('CrSettingsCookiesPageTest', function() {
}); });
}); });
suite('ContentSettingsRedesign', function() {
/** @type {!SettingsCookiesPageElement} */
let page;
suiteSetup(function() {
loadTimeData.overrideValues({
enableContentSettingsRedesign: true,
});
});
setup(function() {
document.body.innerHTML = '';
page = /** @type {!SettingsCookiesPageElement} */ (
document.createElement('settings-cookies-page'));
page.prefs = {
generated: {
cookie_session_only: {value: false},
cookie_primary_setting:
{type: chrome.settingsPrivate.PrefType.NUMBER, value: 0},
},
};
document.body.appendChild(page);
});
test('HeaderVisibility', async function() {
assertTrue(isChildVisible(page, '#exceptionHeader'));
});
});
\ No newline at end of file
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