1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
# Content Settings UI in Desktop
[TOC]
## Overview
Content Settings are settings pages that live under chrome://settings/content.
They are intended to provide the user with information about the status of
sites' capabilities as well as to allow them to tweak these settings as they see
fit.
Behind the scenes, these are simple "html" pages using the
[polymer](https://www.polymer-project.org/) JavaScript library.
All content settings pages live under this folder and under the
[../site_settings_page](https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/site_settings_page/)
folder. Arguably, the most important pages are:
* [site_settings_page.html](https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/site_settings_page/site_settings_page.html?type=cs&g=0)
is the main settings page (`chrome://settings/content`).
* [all_sites.html](https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/site_settings/all_sites.html)
lists all sites that have any relevant information to the users
(`chrome://settings/content/all`).
* [site_details.html](https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/site_settings/site_details.html?type=cs&g=0)
displays a detailed page for a particular origin.
Here are some common patterns/coding practices/tips that you might find useful:
## Strings
Any and all strings that are displayed to the user need to go through
internationalization (`i18n`) functions to ensure the string is correctly
localized to the language settings of the user. Examples:
```
<site-details-permission
category="{{ContentSettingsTypes.SITE_SETTINGS_SOUND}}"
icon="settings:volume-up" id="siteSettingsSound"
label="$i18n{siteSettingsSound}">
</site-details-permission>
```
```
<option value="[[sortMethods_.STORAGE]]">
$i18n{siteSettingsAllSitesSortMethodStorage}
</option>
```
```
<cr-button class="action-button" on-click="onResetSettings_">
$i18n{siteSettingsSiteResetAll}
</cr-button>
```
```
<div slot="body">
[[i18n('siteSettingsSiteResetConfirmation', pageTitle)]]
</div>
```
The string ids are mapped in
[settings_localized_strings_provider.cc](https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc)
to `IDS_` chrome resource strings ids.
## Updating prefs
If a toggle simply controls a pref there is a built-in control that allows you
to do this easily: `settings-toggle-button`.
Examples:
```
<settings-toggle-button id="toggle" class="two-line"
label="$i18n{siteSettingsPdfDownloadPdfs}"
pref="{{prefs.plugins.always_open_pdf_externally}}">
</settings-toggle-button>
```
or with a dynamically selected pref:
```
<settings-toggle-button id="toggle"
pref="{{controlParams_}}"
label="[[optionLabel_]]" sub-label="[[optionDescription_]]"
disabled$="[[isToggleDisabled_(category)]]">
</settings-toggle-button>
```
If you need something more complicated than a simple true/false pref you can
make use of the `this.browserProxy` object which allows you to communicate with
the browser.
The class is declared in
[site_settings_prefs_browser_proxy.js](https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js)
and the browser implementation resides in
[site_settings_handler.h](https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/settings/site_settings_handler.h?type=cs&g=0).
Make sure to
[register](https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/settings/site_settings_handler.cc?type=cs&g=0&l=341)
your message so that everything is properly bound.
## Hide specific sections
Often a particular section of a page only needs to be displayed only under
specific circumstances. In this case make liberal use of the
[dom-if template](https://polymer-library.polymer-project.org/1.0/api/elements/dom-if).
Examples:
```
// html:
<template is="dom-if" if="[[enableInsecureContentContentSetting_]]">
<site-details-permission category="{{ContentSettingsTypes.MIXEDSCRIPT}}"
icon="settings:insecure-content" id="mixed-script"
label="$i18n{siteSettingsInsecureContent}">
</site-details-permission>
</template>
```
```
// js:
Polymer({
// ...
properties: {
/** @private */ enableInsecureContentContentSetting_: {
type: Boolean,
value() {
return loadTimeData.getBoolean('enableInsecureContentContentSetting');
}
},
// ...
```
## Platform specific elements
You can limit the visibility of an element to a certain platform, by using the
available expressions.
Examples:
```
<if expr="chromeos_ash">
<link rel="import" href="android_info_browser_proxy.html">
</if>
```
```
<if expr="chromeos_ash">
<template is="dom-if" if="[[settingsAppAvailable_]]">
<cr-link-row on-click="onManageAndroidAppsClick_"
label="$i18n{androidAppsManageAppLinks}" external></cr-link-row>
</template>
</if>
```
|
