Visual redesign for about:config in Metro Firefox

RESOLVED INCOMPLETE

Status

defect
P4
normal
RESOLVED INCOMPLETE
6 years ago
2 years ago

People

(Reporter: ntim, Unassigned)

Tracking

Trunk
x86_64
Windows 8.1
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [triage], )

Attachments

(1 attachment, 1 obsolete attachment)

Right now, about:config has the android UI (modified) in Metro Firefox. It should have a visual redesign to integrate with the platform.
Love to see this, but not top of the priority list. We can mentor if you're interested in tackling this yourself tim.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Component: Components → Theme
Priority: -- → P4
Version: unspecified → Trunk
Blocks: metrobacklog
Whiteboard: [triage]
Posted file Changes in config.css (obsolete) —
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.
Attachment #8378506 - Flags: feedback?(jmathies)
How about this : http://ntim.altervista.org/FirefoxUX/aboutconfig ? for how it could work and look.
Flags: needinfo?(jmathies)
Note that there is an appbar in the live mockup.
Took the liberty of creating a patch from your changes :ntim.
Attachment #8378506 - Attachment is obsolete: true
Attachment #8378506 - Flags: feedback?(jmathies)
Attachment #8378602 - Flags: feedback?(jmathies)
(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 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.
Attachment #8378602 - Flags: feedback?(jmathies) → feedback+
Flags: needinfo?(jmathies)
(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.
(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 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.
Flags: needinfo?(mmaslaney)
Flags: needinfo?(mmaslaney)
Mass close of bugs in obsolete product https://bugzilla.mozilla.org/show_bug.cgi?id=1350354
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.