974547 - Visual redesign for about:config in Metro Firefox

Status: RESOLVED INCOMPLETE

(Firefox for Metro Graveyard :: Theme, defect, P4)

Description

[Tim Nguyen :ntim]

Right now, about:config has the android UI (modified) in Metro Firefox. It should have a visual redesign to integrate with the platform.

Comment 1

[Jim Mathies [:jimm]]

Love to see this, but not top of the priority list. We can mentor if you're interested in tackling this yourself tim.

Comment 2

[Tim Nguyen :ntim]

Attachment: Changes in config.css

Note that this is not a patch, since I somehow screwed up the steps in http://codefirefox.com .

This is just a edited version of config.css that makes some design changes :
- Removes the huge margin in the toolbar and the container
- Restyles a bit the searchbox
- Uses Segoe UI font

I used remote debugging to edit the file and get a live preview.

It would be nice if someone could turn this into a patch somehow.

Comment 3

[Tim Nguyen :ntim]

How about this : http://ntim.altervista.org/FirefoxUX/aboutconfig ? for how it could work and look.

Comment 4

[Tim Nguyen :ntim]

Note that there is an appbar in the live mockup.

Comment 5

[Sam Foster [:sfoster] (he/him)]

Attachment: config.css changes to implement about:config visual redesign

Took the liberty of creating a patch from your changes :ntim.

Comment 6

[Tim Nguyen :ntim]

(In reply to Sam Foster [:sfoster] from comment #5)
> Created attachment 8378602 [details] [diff] [review]
> config.css changes to implement about:config visual redesign
> 
> Took the liberty of creating a patch from your changes :ntim.

Thanks :) Note that this is just some small design changes, not the complete redesign.

Comment 7

[Jim Mathies [:jimm]]

Comment on attachment 8378602 [details] [diff] [review]
config.css changes to implement about:config visual redesign

I like where this is headed.

On thing I noticed, if you use a mouse for input, the hover scroll bar overlaps the controls on the right. You might want to add back a little bit of horizontal margin.

Feel free to update the theme colors, fennec is pretty washed out color wise. Metro on the other is much more bold.

Comment 8

[Jim Mathies [:jimm]]

(In reply to Tim Nguyen [:ntim] from comment #3)
> How about this : http://ntim.altervista.org/FirefoxUX/aboutconfig ? for how
> it could work and look.

I think this is neat! But I wonder how easy it will be to use when you have hundreds of prefs? I do like the touch/tile centric look though.

Comment 9

[Jim Mathies [:jimm]]

(In reply to Tim Nguyen [:ntim] from comment #4)
> Note that there is an appbar in the live mockup.

I didn't notice this the first time, awesome!

Comment 10

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8378602 [details] [diff] [review]
config.css changes to implement about:config visual redesign

Review of attachment 8378602 [details] [diff] [review]:
-----------------------------------------------------------------

See comments inline.

::: browser/metro/theme/config.css
@@ +45,5 @@
>      flex-direction: row;
>  }
>  
> +#filter-input:focus {
> +    border-color: #ff8000

this is in our defines.inc as @selected_color@
but actually I'm not seeing this rule get applied. Haven't looked into why.

@@ +119,4 @@
>      position: relative;
>      margin: 0;
>      margin-left: auto;
>      margin-right: auto;

margin: 0 auto; shorthand expresses this better, if we're touching this rule anyway

@@ +122,5 @@
>      margin-right: auto;
>      padding-top: 3em;
>      padding-left: 0;
>      padding-right: 0;
>      min-height: 100%;

I think we want to keep some margin on left and right. At least enough to typically clear the <-/+ overlay. A max-width makes sense, otherwise with a wide display the controls associated with a preference get too detached. That means you have to fill the left/right space with something. I would be inclined to go back to #F4F4F4 for the background-color, make the .pref-items transparent and the .pref-item.selected white. That starts to bring us inline with the (emerging) in-content design guidelines. See for an example (error page) comp: https://bug962787.bugzilla.mozilla.org/attachment.cgi?id=8363958

You could needinfo mmaslaney (visual design for metrofx) for his input.

Comment 11

[Firefox Bug Husbandry Bot]

Mass close of bugs in obsolete product https://bugzilla.mozilla.org/show_bug.cgi?id=1350354