Closed Bug 841511 Opened 7 years ago Closed 7 years ago

Change - Use Headline Style for titles on the Options flyout

Categories

(Tracking Graveyard :: Metro Operations, defect, P1)

x86
Windows 8.1
defect

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: ywang, Assigned: jimm)

References

Details

(Whiteboard: feature=change c=Settings_pane_options_and_about u=metro_firefox_user p=1 status=verified)

Attachments

(4 files, 7 obsolete files)

For titles, like "Always show tabs", "Clear Private Data", etc, let's capitalize the titles. 

We should also apply headline style to labels on action buttons and context menu items, such as "Pair a Device", "Open Link in New Tab". 


Just FYI, according to most style guides that use title case, the basic rules are as follows:

- Capitalize the first and last word in a title, regardless of part of speech
- Capitalize all nouns (baby, country, picture), pronouns (you, she, it), verbs (walk, think, dream), adjectives (sweet, large, perfect), adverbs (immediately, quietly), and subordinating conjunctions (as, because, although)
- Lowercase “to” as part of an infinitive
- Lowercase all articles (a, the), prepositions (to, at, in, with), and coordinating conjunctions (and, but, or)
Product: Firefox → Firefox for Metro
Whiteboard: [metro-mvp?]
Blocks: 831958
No longer blocks: metrov1triage
Whiteboard: [metro-mvp?] → feature=change
Blocks: metrov1it3
No longer blocks: 831958
Priority: -- → P1
Blocks: 831958
Whiteboard: feature=change → feature=change c=Settings_pane_options_and_about u=metro_firefox_user p=0
Assignee: nobody → jmathies
Status: NEW → ASSIGNED
Whiteboard: feature=change c=Settings_pane_options_and_about u=metro_firefox_user p=0 → feature=change c=Settings_pane_options_and_about u=metro_firefox_user p=1
(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #0)
> We should also apply headline style to labels on action buttons and context
> menu items, such as "Pair a Device", "Open Link in New Tab". 

Microsoft's guidelines for context menus in Windows Store ("Metro") apps specifically say "Use sentence capitalization for each command name":
http://msdn.microsoft.com/en-us/library/windows/apps/hh465308.aspx
Correction on Comment 1:

"We should also apply headline style to labels on action buttons and context menu items, such as "Pair a Device", "Open Link in New Tab"."

Context menu in Windows 8 apps should use sentence case, not Headline style.
Attached image options flyout (obsolete) —
Attachment #718124 - Flags: ui-review?(ywang)
Attached image about flyout
Not sure about that link string, it looks weird to me in all caps.
Attachment #718134 - Flags: review?(ywang)
Attached image permissions (obsolete) —
This is just for reference, win8 generates this panel.
Attached patch patch v.1 (obsolete) — Splinter Review
Attached patch patch v.1 (obsolete) — Splinter Review
Attachment #718138 - Attachment is obsolete: true
(In reply to Jim Mathies [:jimm] from comment #7)
> Created attachment 718139 [details] [diff] [review]
> patch v.1

Yuan, if you would like to edit any of the dialog sync strings, please let me know. We might as well add those too.
Attachment #718134 - Flags: review?(ywang) → review+
Attached patch patch v.2 (obsolete) — Splinter Review
Attachment #718139 - Attachment is obsolete: true
Attached image options flyout (obsolete) —
updated tabs section. also filed bug 845120 on the flyout not scrolling via touch.
Attachment #718124 - Attachment is obsolete: true
Attachment #718124 - Flags: ui-review?(ywang)
Attachment #718165 - Flags: ui-review?(ywang)
Attached image solitare (obsolete) —
Comment on attachment 718165 [details]
options flyout

Metro apps don't have a consistent approach on this. 
So this decision: "Title case for bold titles, sentence case for description" is based upon guides for good typography and readability. 

My suggestions for changes: 
1. Use sentence case for description, such as "When nightly starts, show start page/tabs from last time"

2. Remove "Privacy & Security"

3. Apply bold title case for "Remember Passwords", "Clear Private Data", "Use Master Password"(we will eventually remove this, I believe)

4. Add a bold title "Tracking" on top of "Tell sites not to track me"

Thanks Jim!
Attachment #718165 - Flags: ui-review?(ywang)
Attached image options v.3
A few issues remaining - 

- there are stylistic nits, button background, height of drop downs, button theming, that aren't addressed here (in a strings bug).

- there should be a bug on adding clear site permissions. I didn't insert that here.

- not sure what to do with sync options or "Use Master Password"
Attachment #718137 - Attachment is obsolete: true
Attachment #718159 - Attachment is obsolete: true
Attachment #718165 - Attachment is obsolete: true
Attachment #718170 - Attachment is obsolete: true
Attachment #718445 - Flags: review?(ywang)
According to mbrubeck, character encoding auto-detect does not need an option. So I've removed that.
Comment on attachment 718445 [details]
options v.3

Looks good to me. Thanks Jim!
Attachment #718445 - Flags: review?(ywang) → review+
(In reply to Jim Mathies [:jimm] from comment #14)
> Created attachment 718445 [details]
> options v.3
> 
> A few issues remaining - 
> 
> - there are stylistic nits, button background, height of drop downs, button
> theming, that aren't addressed here (in a strings bug).
> 
> - there should be a bug on adding clear site permissions. I didn't insert
> that here.
> 
> - not sure what to do with sync options or "Use Master Password"

I will file the styling things in separate bugs, and provide specs as detailed as I can. And also a bug for implementing "Clear Site Permissions". 

Sync will be promoted to the top level. And the flow will be inside a flyout. No info bar. I will also file one and attach with the flow mockup.
Attachment #718617 - Flags: review?(fyan)
Comment on attachment 718617 [details] [diff] [review]
flyout changes v.1

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

Looks good to me.

::: browser/metro/theme/browser.css
@@ +768,5 @@
>  }
>  
> +/* don't add a margin to the very top settings entry in Options */
> +#prefs-startup {
> +  margin-top: 0px;

If this would be true for whichever setting goes on top, you could use the following as the selector instead:
#prefs-flyoutpanel > settings:first-child

If this is going to be true for all flyout panels that have settings, you could use the following as the selector instead:
flyoutpanel > settings:first-child

I'll leave it up to you, whether you want to change the selector.

@@ +782,5 @@
>    -moz-box-align: center;
>  }
>  
> +#prefs-homepage-options, #prefs-homepage-popup {
> +  min-width: 200px;

I wonder if there's a more elegant solution here, but looking for one shouldn't block this. :)
Attachment #718617 - Flags: review?(fyan) → review+
Note from Jim:  Development complete - landing on inbound.
https://hg.mozilla.org/mozilla-central/rev/9718c678cdde
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Component: General → Metro Operations
Product: Firefox for Metro → Tracking
Version: Trunk → ---
Flags: needinfo?(jbecerra)
Tested on 2013-02-28 with a nightly build from http://hg.mozilla.org/mozilla-central/rev/c65d59d33aa8
- All titles seemed consistent throughout Options, Sync, About, Help, and Permissions
- Titles also seemed consistent in dialogs that appeared when flipping a switch like the "use master password" or "connect" to Sync.
Status: RESOLVED → VERIFIED
Flags: needinfo?(jbecerra)
Whiteboard: feature=change c=Settings_pane_options_and_about u=metro_firefox_user p=1 → feature=change c=Settings_pane_options_and_about u=metro_firefox_user p=1 status=verified
Depends on: 876191
Went through the following "Change" and found a "Defect" when going through iteration #7 testing. Attached the "Defect" to the following ticket. Used the following build:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-05-25-06-25-25-mozilla-central/

- Added a "Defect" that was found in the "About" flyout as the "styling" is inconsistent with the other flyouts.
Went through the following "Change" for iteration #8 testing without any issues. Used the following build:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-06-16-03-11-39-mozilla-central/

- Went through the "Options" flyout and everything looked consistent
- went through the Syc" flyout and everything looked consistent
- Went through the "About" flyout and everything looked consistent
- Went through the "Permissions" flyout and everything looked consistent
- Ensured that titles have are bold & using proper capitalization
- Ensured that there was no incorrect spelling throughout the flyout menu's
- Ensured that all the flyout menu's appeared correctly under "Filled View"
Went through the following "Change" for iteration #9 testing without any issues. Used the following build:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-07-02-11-03-00-mozilla-central/

- Went through information in comment 0 and ensured everything matched
- Went through the test cases added in comment 23 and ensured everything appeared correctly
- Went through the test cases added in comment 25 and ensured everything appeared correctly
OS: Windows 8 Metro → Windows 8.1
Product: Tracking → Tracking Graveyard
You need to log in before you can comment on or make changes to this bug.