User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0 Build ID: 20171121103731 Steps to reproduce: My WebExtension has "options_ui": { "page": ..., "browser_style": true } Actual results: Checkboxes have sharp corners and checked ones have a blue background and a white checkmark. Expected results: Checkboxes should look like on about:preferences (slightly rounded corners, checked and unchecked boxes have a gray background)

Comment on attachment 8939439 [details] Bug 1421652 - Update browser_style to use photon styles. https://reviewboard.mozilla.org/r/209762/#review217100 It looks good to me, but it should really get a review by someone on the webextensions team (I picked aswan at random), and a ui-review by one of our designers (I picked shorlander at random). ;) aswan might also kick it over to someone in Firefox Front-End, perhaps Gijs or Dao, for a more in-depth review…

Comment on attachment 8939439 [details] Bug 1421652 - Update browser_style to use photon styles. https://reviewboard.mozilla.org/r/209762/#review217520 Sorry for the hot potato but I think Kris is better equipped to review this than me.

Comment on attachment 8939439 [details] Bug 1421652 - Update browser_style to use photon styles. https://reviewboard.mozilla.org/r/209762/#review219414 r=me with issues addressed or explained, and with UI review from an appropriate peer. Also, before and after screenshots showing the changes would be helpful. Thanks! ::: browser/components/extensions/extension.css (Diff revision 1) > /* stylelint-disable property-no-vendor-prefix */ > > /* Global */ > html, > body { > - background: transparent; Why this change? I think we generally still want the popup background to show through by default. ::: browser/components/extensions/extension.css:35 (Diff revision 1) > /* stylelint-disable property-no-vendor-prefix */ > /* Buttons */ > button.browser-style, > select.browser-style { > - background-color: #fbfbfb; > - border: 1px solid #b1b1b1; > + background-color: #ededf0; > + border: 1px solid transparent; Why a transparent border? It seems like a margin would be more appropriate. ::: browser/components/extensions/extension.css:470 (Diff revision 1) > margin-bottom: -1px; > padding: 0; > } > > .panel-section-tabs-button { > + -moz-appearance: none; Is this necessary?

Comment on attachment 8939439 [details] Bug 1421652 - Update browser_style to use photon styles. https://reviewboard.mozilla.org/r/209762/#review219414 > Why a transparent border? It seems like a margin would be more appropriate. The issue is that a [`<button>` element](https://developer.mozilla.org/docs/Web/HTML/Element/button) and [`<select>` element](https://developer.mozilla.org/docs/Web/HTML/Element/select) with [`-moz-appearance: none;`](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance#Values) have the default border set to `border: 2px outset ThreeDLightShadow;` in the [resource://gre-resources/forms.css](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/forms.css#l628) stylesheet. > Is this necessary? If you add the `.panel-section-tabs-button` class to a [`<button>` element](https://developer.mozilla.org/docs/Web/HTML/Element/button) instead of say, a [`<div>` element](https://developer.mozilla.org/docs/Web/HTML/Element/div) like the [legacy Australis style guide suggests](https://firefoxux.github.io/StyleGuide/#/navigation), then yes.

Unassigning to reflect real status.

More recent work has been done at https://github.com/FirefoxUX/photon-extension-kit from what I understand.