552526 - fennec UI - style for site menu

Status: RESOLVED FIXED

(Mozilla Labs :: Design, defect)

Description

[Madhava Enros [:madhava]]

We're building out the site menu (aka "Extended Site Menu") for fennec 1.1.

Here's a diagram of what it's meant to be:
http://www.flickr.com/photos/madhava_work/4351405309/

And here's a screenshot of the WIP:
https://bug456077.bugzilla.mozilla.org/attachment.cgi?id=432555

Generally, I we're going for a lighter look than buttons -- a fairly flat list or grid, I think.

Comment 1

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Question: When an item will not work for a defined page (Save as PDF for XUL document as example) do we want to hide it or just to disabled it?

Comment 3

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Copying Mark Finkle comment from the dup:

> Remember:
> * Flip the search engine strings in the UI: "Add Search Engine" should be the
> top stirng and the name of the engine should be the small string
> * Remove support for favicons in any page command (JS and XBL? or just in JS)
> * Add the "type" attribute for easier clearing of preference page actions

Comment 4

[Madhava Enros [:madhava]]

(In reply to comment #1)
> Question: When an item will not work for a defined page (Save as PDF for XUL
> document as example) do we want to hide it or just to disabled it?

Hide it, I'd say.

Comment 5

[Sean Martell]

Mockup for site menu:
http://mozilla.seanmartell.com/fennec/site-menu-2.png

Comment 6

[Sean Martell]

http://mozilla.seanmartell.com/fennec/MenuUI/

Unsure how this will be built out in the end so that it is dynamic based on # of items + landscape/portrait, but the styles within the CSS should guide the look n' feel.

Comment 7

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: dirty wip

This wip add a basic style for the menu based on the mockup. It is a very first draft.

It did:
 * support hildon
 * switch the strings for adding a new search engine

It did not:
 * implement the "type" things
 * support winmo

Comment 8

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 434945 [details] [diff] [review]
dirty wip


>-      <arrowscrollbox id="pageactions-container" orient="vertical" class="window-width" hidden="true"/>
>+      <hbox id="pageactions-container" orient="vertical" class="window-width" hidden="true"/>

Thinking that we won't need the scrollbox for now? Probably a safe decision.

>diff -r 7e1b6d5168fe themes/hildon/browser.css

> #identity-container {
>   background-image: url("chrome://browser/skin/images/panel-shadow.png");
>   background-repeat: repeat-x;
>   -moz-box-shadow: black 0 2px 2px;
>+  -moz-border-radius-bottomleft: 0.5em;
>+  -moz-border-radius-bottomright: 0.5em;

I don't like using "em" here. Let's reuse one of the pixel radii we already use

(personally I don't like the rounded bottom corners at all)


> #pageactions-container {
>-  border: 2px solid transparent;
>+  border: none;
>+  border-top: 2px solid transparent;
>   -moz-border-top-colors: #212429 #52555a;
>-  padding: 0 8px;
>+  padding: 0;
>   -moz-user-focus: ignore;
>+  background: transparent -moz-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(235,235,235,1) 70%, rgba(215,215,215,1) 90%) !important;
>+  -moz-border-radius-bottomleft: 0.5em;
>+  -moz-border-radius-bottomright: 0.5em;

Same


>+pageaction:nth-last-child(2) {
>+  border-bottom: 2px solid white;
>+  -moz-border-radius-bottomleft: 0.5em;

Same

>+pageaction:last-child {
>+  border-bottom: 2px solid white;
>+  -moz-border-radius-bottomright: 0.5em;

Same

Comment 9

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: dirty wip v0.2

This patch missed add too much css property when the larry panel is alone.

Comment 10

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: wip

This wip implement mostly all of the mockup but it stays one little bug with the :hover:active and it needs some cleanup

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #10)

> This wip implement mostly all of the mockup but it stays one little bug with
> the :hover:active and it needs some cleanup

What's the bug?

Comment 12

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to comment #11)
> (In reply to comment #10)
> 
> > This wip implement mostly all of the mockup but it stays one little bug with
> > the :hover:active and it needs some cleanup
> 
> What's the bug?

I'm not sure why but :active rule did not work at all on pageaction:active. Which is strange because it was working in some of the previous wip.
I guess I have one rule that prevent it to work but I'm not really sure of which one. I'll investigate (quickly) on that tomorrow morning.

Comment 13

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch

The bug was coming because I've add an attribute name "menu" on identity-container which was preventing :active to work, which was a big mistake because this is a reserved word... :(
Renaming menu to hasmenu made things works.

Comment 14

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 435497 [details] [diff] [review]
Patch

* Don't use 3mm for radius on hildon. Use 8px, unless this is too small.

* Use the "blue highlight" for the :active state (no gradient)

Comment 15

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch v0.2

Address comments.

Comment 16

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed:
http://hg.mozilla.org/mobile-browser/rev/b1626444d0d8