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">
    <div class="layout vertical">
      <settings-checkbox checked="{{prefs.settings.a11y.highContrastEnabled}}">

      <settings-checkbox checked="{{prefs.settings.a11y.screenMagnifierEnabled}}">

  <script src="a11y_page.js"></script>


  is: 'settings-a11y-page', 
  properties: {
    * Preferences state.
    prefs: {
      type: Object,
      notify: true,