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 JavaScript library.
All content settings pages live under this folder and under the ../site_settings_page folder. Arguably, the most important pages are:
chrome://settings/content
).chrome://settings/content/all
).Here are some common patterns/coding practices/tips that you might find useful:
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 to IDS_
chrome resource strings ids.
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 and the browser implementation resides in site_settings_handler.h. Make sure to register your message so that everything is properly bound.
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.
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'); } }, // ...
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>