the Chromium logo

The Chromium Projects

Settings: Material Design

Eng: dbeam@, dpapad@, dschuyler@, hcarmona@, michaelpg@, stevenjb@, tommycli@

PM: tbuckley@

UX: bettes@

Code Location: chrome/browser/resources/settings, chrome/browser/ui/webui/settings


To create a new Settings experience for Chromium/Chromium OS which will implement the material design spec, using web components as a maintainable and modular implementation.


Visit chrome://md-settings, or use #enable-md-settings in chrome://flags. This is still a work in progress; do not expect all settings to work until launch.


The Settings UI is composed of many Polymer elements, which use two-way data binding to update a local prefs model. A Polymer element observing this prefs model persists changes back to the pref store via a set of granular JS APIs.

Design Documents

Design documents can be found here. The following are a few major docs:

Individual settings pages

Each category of settings will now reside in its own page. Each page will be represented by its own custom element, to be encapsulated within a variant of <neon-animated-pages>. We split the HTML and JS such that the HTML for a given page only contains the layout, and the JS defines the <settings-foo-page> element.

Also, each individual page element will have a reference to a shared prefs property. This prefs property will contain the shared model for all settings, which in turn will be kept in sync with the Chrome pref store.

Example page code:


<dom-module id="settings-a11y-page"> <template> <div class="layout vertical"> ` <settings-checkbox checked="">` $i18n{a11yHighContrastMode} ` </settings-checkbox>` ` <settings-checkbox checked="">` $i18n{a11yScreenMagnifier} ` </settings-checkbox>` </div> </template> <script src="a11y_page.js"></script> </dom-module>




properties: {


* Preferences state.


prefs: {

type: Object,

notify: true,