1421652 - Update "browser_style":true to Photon

Status: RESOLVED WONTFIX

(WebExtensions :: Frontend, defect, P3)

Description

[flying sheep]

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 1

[Tim Nguyen :ntim]

Attachment: Bug 1421652 - Update browser_style to use photon styles.

Review commit: https://reviewboard.mozilla.org/r/209762/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/209762/

Comment 2

[Blake Winton (:bwinton) (:☕️)]

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 3

[Andrew Swan [:aswan]]

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 4

[Kris Maglione [:kmag]]

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 6

[ExE Boss]

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.

Comment 7

[Tim Nguyen :ntim]

Unassigning to reflect real status.

Comment 8

[Martin Giger [:freaktechnik]]

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

Comment 9

[Rob Wu [:robwu]]

Closing bug because support for browser_style feature is going to be removed (at least in MV3), see bug 1827910.