Open Bug 1421652 Opened 2 years ago Updated 2 years ago

Update "browser_style":true to Photon

Categories

(WebExtensions :: Frontend, defect, P3)

57 Branch
defect

Tracking

(Not tracked)

People

(Reporter: flying-sheep, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

59 bytes, text/x-review-board-request
bwinton
: review+
bwinton
: review?
shorlander
kmag
: review+
Details
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)
Component: Untriaged → Theme
Component: Theme → WebExtensions: Frontend
Product: Firefox → Toolkit
Priority: -- → P3
Assignee: nobody → ntim.bugs
Status: UNCONFIRMED → NEW
Ever confirmed: true
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…
Attachment #8939439 - Flags: review?(bwinton) → review+
Attachment #8939439 - Flags: review?(shorlander)
Attachment #8939439 - Flags: review?(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.
Attachment #8939439 - Flags: review?(aswan)
Attachment #8939439 - Flags: review?(kmaglione+bmo)
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?
Attachment #8939439 - Flags: review?(kmaglione+bmo) → review+
Depends on: 1371951
Blocks: 1391464
Duplicate of this bug: 1398606
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.
Assignee: ntim.bugs → nobody
More recent work has been done at https://github.com/FirefoxUX/photon-extension-kit from what I understand.
No longer blocks: 1391464
See Also: → 1391464
Product: Toolkit → WebExtensions
See Also: 1391464
You need to log in before you can comment on or make changes to this bug.