chromium/src
0
Fork 0
Code Activity

WebUI: Update the styleguide to discourage new paper-/iron- dependencies

Browse Source 
Bug: 40943652
Change-Id: If5748cd9e2d0b07442c429e8aaa9698641cf6f78
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5502592
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1294609}
This commit is contained in:
rbpotter
2024-04-30 21:41:24 +00:00
committed by Chromium LUCI CQ
parent 7281713043
commit ba80c8475d
2 changed files with 20 additions and 2 deletions
docs
webui_in_chrome.md
styleguide/web
web.md

2
docs/webui_in_chrome.md

@ -13,7 +13,7 @@
# Creating WebUI Interfaces
[TOC]
A WebUI page is made of a Polymer single-page application, which communicates
A WebUI page is made of a single-page application, which communicates
with a C++ UI controller, as explained [here](webui_explainer.md).
WebUI pages live in `chrome/browser/resources` and their native counterpart in

20
styleguide/web/web.md

@ -130,7 +130,7 @@ amount of addressing (adding an ID just to wire up event handling).
```
* Element IDs use `dash-form`
* Exception: `camelCase` is allowed in Polymer code for easier
* Exception: `camelCase` is allowed in Polymer and Lit code for easier
`this.$.idName` access.
* Localize all strings using $i18n{}
@ -492,6 +492,24 @@ https://www.polymer-project.org/2.0/docs/devguide/templates#dom-if):
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
yields better performance, than adding a custom `dom-if` element.
* Do not add new dependencies on `iron-` or `paper-` Polymer elements, styles,
and behaviors. These are being removed from Chromium. In many cases, Lit-based
equivalents already exist in `ui/webui/resources/cr_elements` (e.g.
`cr-collapse` should be used instead of `iron-collapse`). In other cases,
there is a native solution which should be used instead of the Polymer
solution (e.g. use `window.matchMedia()` instead of `iron-media-query`).
Contact the WebUI OWNERS if you are unsure what to use instead of a specific
Polymer feature. Exceptions:
* Polymer UIs can use Polymer's `iron-iconset-svg` to avoid adding a
dependency on Lit, which is required for using `cr-iconset`. Note that
Polymer UIs can and should use `cr-icon` instead of `iron-icon`, as
`cr-icon` can be used with icons provided in either an `iron-iconset-svg`
or a `cr-iconset`.
* UIs with a compelling use case (i.e. extremely long list of items) may use
`iron-list`, as a native/Lit equivalent has not yet been developed. Do not
use `iron-list` for relatively short lists (~20 or fewer items); use
`dom-repeat` in Polymer code or `items.map(...)` in Lit HTML.
* Do not add iron-icons dependency to third_party/polymer/.
* Polymer provides icons via the `iron-icons` library, but importing each of the iconsets means importing hundreds of SVGs, which is unnecessary because Chrome uses only a small subset.
* Alternatives: