breadcrumbs: Updating WebUI for Material Design > page_name: settings-material-design title: ‘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:
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 . 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,
}
}
});