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

Objective

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.

Using

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.

Model

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:

a11y_page.html:

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

a11y_page.js:

Polymer({
  is: 'settings-a11y-page', 
  properties: {
    /**
    * Preferences state.
    */
    prefs: {
      type: Object,
      notify: true,
    }
  }
});

Comments