Closed Bug 1238530 Opened 8 years ago Closed 8 years ago

Clicker UI top bar

Categories

(Hello (Loop) :: Client, defect, P2)

defect

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: RT, Assigned: mancas)

References

()

Details

User Story

Implement clicker UI top bar per visual spec (see URL):
- Currently active context page title displayed with favicon on the far left
- The "?" button is (for now) placed where in the mocks show the gear button will be.
- "Audio mute", "Face mute" and Leave" functionalities moved to the top bar
- Prior to room join, Links to privacy notice and ToS are displayed in the top bar

Approximate tech checklist:

X create StandaloneInfoBar component by hoisting .hello-logo and GeneralSupportUrl out of StandaloneOverlay wrapper
X style info bar, keeping GeneralSupportUrl on far right
- factor hangup, face mute, and audio mute buttons from ConversationToolbar to own trivial components
- add hangup, face mute, and audio mute buttons to the StandaloneInfoBar
- create StandaloneInfo component containing favicon, title, and ToSView
- style remaining pieces
- remove old invocation of ToSView
- remove any standalone specific-code left ie the ConversationToolbar code and CSS
- convert GeneralSupport URL to item in new gear menu (in followup bug)
? pull toolbar on both sides out of the media view DOM and leave it absolute on desktop side

Attachments

(6 files, 1 obsolete file)

      No description provided.
Rank: 18
Priority: -- → P1
Assignee: nobody → dmose
(Commenting on User Story)
> Implement clicker UI top bar per visual spec (see URL):
> - Currently active context URL displayed with favicon on the far left

From looking at the mock, I assume "context URL" is intended to be "context page title".

> - Firefox Hello logo points to the SUMO page (replaces the "?" link)

That seems fairly non-discoverable, particularly since the logo as shown in the mock is not obviously an affordance.  Do we expect that users having problems will somehow infer that that they can get help by clicking on the logo?
Flags: needinfo?(rtestard)
> - Prior to room join, Links to privacy notice and ToS are displayed in the
> top bar

It would seem reasonable to do this with the existing string with embedded links:

By using Firefox Hello you agree to the (Terms of use) and (Privacy notice).
User Story: (updated)
User Story: (updated)
Sevaan: Please can we get the UX designs attached to this bug for this? (or whatever we decided the process would be!).
Flags: needinfo?(sfranks)
User Story: (updated)
Flags: needinfo?(rtestard)
(In reply to Dan Mosedale (:dmose) from comment #1)
> (Commenting on User Story)
> > Implement clicker UI top bar per visual spec (see URL):
> > - Currently active context URL displayed with favicon on the far left
> 
> From looking at the mock, I assume "context URL" is intended to be "context
> page title".

Yes, User story now updated
> 
> > - Firefox Hello logo points to the SUMO page (replaces the "?" link)
> 
> That seems fairly non-discoverable, particularly since the logo as shown in
> the mock is not obviously an affordance.  Do we expect that users having
> problems will somehow infer that that they can get help by clicking on the
> logo?

Fair point, Pau what do you think, is there a way to make it more understandable that the Hello logo is actually a link to the SUMO page?
Flags: needinfo?(b.pmm)
(In reply to Romain Testard [:RT] from comment #4)
> Fair point, Pau what do you think, is there a way to make it more
> understandable that the Hello logo is actually a link to the SUMO page?

Coming out of a conversation today, we also realize we may want to have a way for users to restart the FTU tour. Maybe it would be better to leave the logo as branding and add a gear icon somewhere with a menu that has the following options:

- Tour
- Help
- Download Firefox (for non-Fx browsers)

Apart from the tour, which is an overlay, the other links should open in a new tab.

(In reply to Mark Banner (:standard8) from comment #3)
> Sevaan: Please can we get the UX designs attached to this bug for this? (or
> whatever we decided the process would be!).

Pau, do you mind attaching the latest visual spec for the Link Clicker?
Flags: needinfo?(sfranks)
(In reply to Sevaan Franks [:sevaan] from comment #5)
> (In reply to Romain Testard [:RT] from comment #4)
> > Fair point, Pau what do you think, is there a way to make it more
> > understandable that the Hello logo is actually a link to the SUMO page?
> 
> Coming out of a conversation today, we also realize we may want to have a
> way for users to restart the FTU tour. Maybe it would be better to leave the
> logo as branding and add a gear icon somewhere with a menu that has the
> following options:
> 
> - Tour
> - Help
> - Download Firefox (for non-Fx browsers)
> 
> Apart from the tour, which is an overlay, the other links should open in a
> new tab.
> 
Sounds good to me, could you please update the visual spec with that and I'll create the bug to follow this up? (unless it's part of the top bar and we can do it as part of this bug)
Flags: needinfo?(b.pmm)
Visual Spec for Link Clickers
I've updated the tech checklist.  RT, believe that the acceptance criteria now wants to look like this: 
I'll leave it to you to update the user

- Currently active context page title displayed with favicon on the far left
- The "?" button is (for now) placed where in the mocks show the gear button will be.
Firefox Hello logo points to the SUMO page (replaces the "?" link)
- "Audio mute", "Face mute" and Leave" functionalities moved to the top bar
User Story: (updated)
RT, I'll leave it to you to confirm that by updating the user story either with my comments or whatever you think is better.
Flags: needinfo?(rtestard)
(In reply to Dan Mosedale (:dmose) from comment #9)
> RT, I'll leave it to you to confirm that by updating the user story either
> with my comments or whatever you think is better.

Your comments look good! Now updated US with it.
User Story: (updated)
Flags: needinfo?(rtestard)
Summary: [meta] Clicker UI top bar → Clicker UI top bar
User Story: (updated)
User Story: (updated)
We need a new SVG asset for the hangup button (the old one is round and with a border).  Needinfo-ing a few folks who might be able to help...
Flags: needinfo?(sfranks)
Flags: needinfo?(b.pmm)
Actually, it looks like I'll probably be able to make one of our existing assets works.  I'll needinfo again if that proves not to be true.
Flags: needinfo?(sfranks)
Flags: needinfo?(b.pmm)
In the UI triage meeting earlier this week, we talked about stapling some color changes to this infobar work.  Sevaan, Pau, can you let me know what you would like on that front?

Also, I notice that in the second visual spec diagram, the white buttons in the toolbar have a hover effect of a light grey color.  Do you also want the red exist button to have some kind of hover effect?
Flags: needinfo?(b.pmm)
I'm sorry Dan, I don't recall this color changes you mention...Can you refresh my memory here, please?

On the other hand, yes I do want a hover effect for that leave button as well. It should be applied the same type of hover that is specified in the spec. #333333 10% Opacity that goes above the red color of the button.
Flags: needinfo?(b.pmm)
Rank: 16 → 25
Priority: P1 → P2
Giving back to nobody@, as I'll be taking the FTU changes.  I have a bunch of context and code here; please ping me if/when you want to pick this up.
Assignee: dmose → nobody
Hey Dan, could you upload a new branch with all of your code of your work here? I'll like to pick this up.

Thanks
Flags: needinfo?(dmose)
WIP PR (against my own loop repo) contains the appropriate branch:

https://github.com/dmose/loop/pull/1

Here's my most recent notes/todo list, which complements (and needs to be resolved with) the tech checklist in the user story portion of this bug.

- change AudioMuteButton property name to “muted” rather than “enabled” to lessen confusion

- look at publishStream history, find out why we don’t just dispatch the actions directly; maybe collapse
- review unit tests
    - check that entire support button is click target (standalone only?)
- clean up code
- rebase into one commit
- split out leave image from sprite for chrome compete

- go back to bug tech checklist
- tweak top margin/bgcolor on chatbox column?
Flags: needinfo?(dmose)
At the beginning of today's UX triage meeting, there was some question about whether to move this forward or instead try to figure out what bugs we're missing and work on quality stuff.  My understanding of the intent was for that to be worked later in the meeting, and for Pau to communicate that decision with you.
Assignee: nobody → b.mcb
Status: NEW → ASSIGNED
Attached image top_bar_ltr_room_ready
Attachment #8716256 - Flags: ui-review?(b.pmm)
Attached image top_bar_ltr_room_joined
Attachment #8716258 - Flags: ui-review?(b.pmm)
Attached image top_bar_rtl_room_joined (obsolete) —
Attachment #8716259 - Flags: ui-review?(b.pmm)
Attachment #8716257 - Flags: ui-review?(b.pmm)
Attachment #8716258 - Flags: ui-review?(b.pmm) → ui-review+
Comment on attachment 8716259 [details]
top_bar_rtl_room_joined

Could we flip horizontally the "Leave" icon so it keeps the same direction as reading?
Attachment #8716259 - Flags: ui-review?(b.pmm) → ui-review-
Attachment #8716256 - Flags: ui-review?(b.pmm) → ui-review+
Attachment #8716257 - Flags: ui-review?(b.pmm) → ui-review+
Comment on attachment 8716872 [details] [review]
[loop] mancas:bug1238530 > mozilla:master

Hey Dan can you review the final patch? Feel free to delegate the task to another reviewer if you're too busy

Thank you!
Attachment #8716872 - Flags: review?(dmose)
Attached image top_bar_rtl_room_joined
Attachment #8716257 - Attachment is obsolete: true
Attachment #8716873 - Flags: ui-review?(b.pmm)
Attachment #8716873 - Flags: ui-review?(b.pmm) → ui-review+
I don't expect to get to this before the bugs in today's spreadsheet are addressed.  Sorry.  :-(
Comment on attachment 8716872 [details] [review]
[loop] mancas:bug1238530 > mozilla:master

Mike, feel free to pick this up...
Attachment #8716872 - Flags: review?(dmose) → review?(mdeboer)
Attachment #8716872 - Flags: review?(fernando.campo)
Comments addressed guys
Comment on attachment 8716872 [details] [review]
[loop] mancas:bug1238530 > mozilla:master

It looks great, no issues found. Good work!
Attachment #8716872 - Flags: review?(mdeboer)
Attachment #8716872 - Flags: review?(fernando.campo)
Attachment #8716872 - Flags: review+
Attachment #8716257 - Attachment is obsolete: false
Attachment #8716259 - Attachment is obsolete: true
Landed in master: https://github.com/mozilla/loop/commit/e71a2f9aa02c754dad00a5ba2b67eec452557fc6
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Blocks: 1248530
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: