tree: 7057a34766697925b4c7717d8947c7e40553d77e [path history] [tgz]
  1. add_site_dialog.html
  2. add_site_dialog.js
  3. all_sites.html
  4. all_sites.js
  5. all_sites_icons.html
  6. all_sites_icons.js
  7. android_info_browser_proxy.js
  9. category_default_setting.html
  10. category_default_setting.js
  11. category_setting_exceptions.html
  12. category_setting_exceptions.js
  13. chooser_exception_list.html
  14. chooser_exception_list.js
  15. chooser_exception_list_entry.html
  16. chooser_exception_list_entry.js
  17. clear_storage_dialog_css.html
  18. clear_storage_dialog_css.js
  19. constants.js
  20. cookie_info.js
  21. edit_exception_dialog.html
  22. edit_exception_dialog.js
  23. local_data_browser_proxy.js
  24. media_picker.html
  25. media_picker.js
  26. OWNERS
  27. pdf_documents.html
  28. pdf_documents.js
  29. protocol_handlers.html
  30. protocol_handlers.js
  32. settings_category_default_radio_group.html
  33. settings_category_default_radio_group.js
  34. site_data.html
  35. site_data.js
  36. site_data_details_subpage.html
  37. site_data_details_subpage.js
  38. site_data_entry.html
  39. site_data_entry.js
  40. site_details.html
  41. site_details.js
  42. site_details_permission.html
  43. site_details_permission.js
  44. site_entry.html
  45. site_entry.js
  46. site_list.html
  47. site_list.js
  48. site_list_entry.html
  49. site_list_entry.js
  50. site_settings_mixin.js
  51. site_settings_prefs_browser_proxy.js
  52. website_usage_browser_proxy.js
  53. zoom_levels.html
  54. zoom_levels.js

Content Settings UI in Desktop


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:

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:

  icon="settings:volume-up" id="siteSettingsSound"
<option value="[[sortMethods_.STORAGE]]">
<cr-button class="action-button" on-click="onResetSettings_">
<div slot="body">
  [[i18n('siteSettingsSiteResetConfirmation', pageTitle)]]

The string ids are mapped in 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.


<settings-toggle-button id="toggle" class="two-line"

or with a dynamically selected pref:

<settings-toggle-button id="toggle"
  label="[[optionLabel_]]" sub-label="[[optionDescription_]]"

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.

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.


// html:

<template is="dom-if" if="[[enableInsecureContentContentSetting_]]">
  <site-details-permission category="{{ContentSettingsTypes.MIXEDSCRIPT}}"
    icon="settings:insecure-content" id="mixed-script"
// js:


// ...

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.


<if expr="chromeos">
  <link rel="import" href="android_info_browser_proxy.html">
<if expr="chromeos">
  <template is="dom-if" if="[[settingsAppAvailable_]]">
    <cr-link-row on-click="onManageAndroidAppsClick_"
        label="$i18n{androidAppsManageAppLinks}" external></cr-link-row>