Skip to content
This repository has been archived by the owner on Oct 2, 2018. It is now read-only.

[desktop] Toolbar discussion #195

Closed
twiss opened this issue Nov 2, 2014 · 22 comments · Fixed by #201
Closed

[desktop] Toolbar discussion #195

twiss opened this issue Nov 2, 2014 · 22 comments · Fixed by #201

Comments

@twiss
Copy link
Collaborator

twiss commented Nov 2, 2014

In Firefox desktop, when moving the mouse out of the editor and in again (which happens easily because the toolbar button is close to the edge), the editor gets focused (https://github.com/codexa/firetext/blob/0f43b6a6/scripts/firetext.js#L124 since 26f97ba) which causes the toolbar to hide, which is a bit annoying. (#231)

This issue is now for general discussion about the toolbar on the desktop.

@ferndot
Copy link
Member

ferndot commented Nov 3, 2014

@twiss: thank you for catching this! It is definitely a bad user experience.

A possible fix is to change https://github.com/codexa/firetext/blob/develop/scripts/firetext.js#L1139-L1152 to only run when deviceType === 'mobile' (defined in https://github.com/codexa/firetext/blob/develop/scripts/firetext.js#L1278).

I would be delighted to provide guidance if you would like to solve the issue =)

@twiss
Copy link
Collaborator Author

twiss commented Nov 3, 2014

Yes, that's probably the best solution. The only question is, do you want that in zen mode as well? Some people might like the reduced clutter, and for some reason this bug doesn't happen in full screen in Firefox, but it's a lot of mouse moving on a 1080p screen, which you could partially solve by moving the button to the left. What do you think/prefer?

@twiss
Copy link
Collaborator Author

twiss commented Nov 4, 2014

... the downside of which is that it obstructs the text you're typing more. So, unless you disagree, I'll send a PR with your original proposal tomorrow.

@ferndot
Copy link
Member

ferndot commented Nov 4, 2014

@twiss: sorry for the delay. Which button are you referring to? The hide keyboard button? Also, does the editor show/hide on mouseenter/mouseleave events, or focus/blur. (Both are bad, but the former are unexpected, and shouldn't happen).

@ferndot
Copy link
Member

ferndot commented Nov 4, 2014

@twiss: IMO the "hide-keyboard" button does not make sense in the desktop form factor. Although, zen mode is supposed to be distraction-free, so it may apply there.

How does this sound?

In zen mode:

  • Toolbar is hidden on editor focus.
  • Show-toolbar (hide-keyboard) button is shown on editor focus.

In regular mode:

  • Toolbar is always shown.
  • Show-toolbar button is always hidden.

You can tell if the document is in zen mode by checking to see if the <html> element includes the fullscreen class (added in https://github.com/codexa/firetext/blob/develop/scripts/firetext.js#L1330).

Thank you for being willing to fix this 👍!

@twiss
Copy link
Collaborator Author

twiss commented Nov 4, 2014

How does this sound?

Yes, that's actually what I was talking about, sorry for being unclear. The main reason not to do that would be that on a large screen, moving your mouse from top-left (where your text is) to bottom-right (show-toolbar/hide-keyboard) to bottom-left (toolbar) to top-left is not fun.

Possible solutions (I'm only talking about zen mode now):

  1. Do it anyway and assume that zen mode users would use keyboard shortcuts instead (ctrl-b etc). Except... those don't work in Firefox. That's probably fixable though.
  2. Always show the toolbar.
  3. As I mentioned above, move the show-toolbar button to bottom-left to reduce mouse movement. The drawback is that it covers the bottom text as you're typing it (i.e. if you do type type type enter enter type type type, the button covers that). It's probably possible to work around this in javascript, but not easy.
  4. Move the show-toolbar button to top-right. The drawback is that on mobile, you lose the intuitive hide-keyboard button (even if that's still what the button does). Another possibility would be to make two buttons, hide-keyboard (bottom-right) and show-toolbar (top-right) and figure out a way to not hide the keyboard on show-toolbar. If you like this idea, could you investigate, e.g., calling editor.focus() on show-toolbar.click? I don't have a real Firefox OS device around.

@ferndot
Copy link
Member

ferndot commented Nov 4, 2014

Another possibility would be to make two buttons, hide-keyboard (bottom-right) and show-toolbar (top-right) and figure out a way to not hide the keyboard on show-toolbar.

I like this idea! We could hide the hide-keyboard button on desktop, and hide the show-toolbar button on mobile.

This does not fall within the scope of this issue, but I have been considering auto-hiding the header on mobile (possibly using http://wicky.nillia.ms/headroom.js/). In the zen mode desktop interface, we could use the show-toolbar button instead.

@twiss
Copy link
Collaborator Author

twiss commented Nov 4, 2014

We could hide the hide-keyboard button on desktop, and hide the show-toolbar button on mobile.

Right, that's also a possibility. Where would you place hide-keyboard and the toolbar on mobile? If you place them top-right, it's a strange place for a hide-keyboard button, and if bottom-right, the place of the toolbar is then different between mobile and desktop (which I guess is not a disaster).

The nice thing about a separate show-toolbar button which doesn't hide the keyboard (at least in my theory) is that you can continue working without having the keyboard dis- and reappear. Although this might be influenced by my experience on my Android, where the keyboard is very slow to come up. How's that in practice on Firefox OS?

@ferndot
Copy link
Member

ferndot commented Nov 5, 2014

Here are some screenshots of Firetext on mobile. I would not recommend that we change placement of the toolbar/hide-keyboard button:

On the desktop form factor, however, toolbar-on-the-top is a popular design pattern. I don't believe that there will be a problem with placing the toolbar in a different location for desktop.

A visible show-toolbar button might be useful on mobile. It could be placed on the left of the hide-keyboard button. Do you think that the feature is worth the space it would occupy?

@twiss
Copy link
Collaborator Author

twiss commented Nov 5, 2014

Thanks for the screenshots, that's helpful.

A visible show-toolbar button might be useful on mobile. It could be placed on the left of the hide-keyboard button. Do you think that the feature is worth the space it would occupy?

IMO it depends on how smooth and fast the select text, show toolbar, tap button, continue typing cycle is. If you can make that smoother or faster by not hiding the keyboard, I think it's worth it. I'd have to try it out to tell if that's the case, though.

Also, two unrelated questions based on your screenshots:

  1. There's an icon on the space bar which looks like it could mean hold to hide keyboard. Is that what it does?
  2. On the right screenshot you're in zen mode but not fullscreen. On the desktop this also happens immediately after opening a document. (You go in to fullscreen when opening and closing settings.) Is this the same bug? (It can also happen by manually exiting fullscreen.)

@ferndot
Copy link
Member

ferndot commented Nov 5, 2014

It is definitely a balance between interaction speed and the conservation of display real-estate. Have you tried testing on the Firefox OS simulator (explained here: https://github.com/codexa/firetext/wiki/Get-Coding#using-the-simulator)?

  1. The space bar does perform that function. However, it is not easy to discover, and I doubt that many users utilize it.
  2. This is a similar bug, but it is actually caused by a platform issue: Firefox OS exits full-screen when the keyboard comes up. The zen mode code does need to be rewritten to avoid the bug you pointed out.

@twiss
Copy link
Collaborator Author

twiss commented Nov 5, 2014

Yes, it doesn't work (Issue #177), I should get a device. In the meantime, I'll leave it like it is.

@Ryuno-Ki
Copy link

Ryuno-Ki commented Nov 5, 2014

As of which version does the spacebar hide the keyboard?

I couldn't discover it on my Alcatel OneTouch Fire running Firefox OS v1.3. Instead I can see the currently selected language on top of the key.

@ferndot
Copy link
Member

ferndot commented Nov 5, 2014

@Ryuno-Ki: I am not completely sure, but it is probably a 2.0/2.1 feature.

@ferndot
Copy link
Member

ferndot commented Nov 7, 2014

@twiss how do you feel about me creating a new issue to address the hiding of the toolbar on editor focus and mouseover, and leaving this as a strategy discussion for zen mode on mobile?

@twiss
Copy link
Collaborator Author

twiss commented Nov 7, 2014

Are there any statistics on Firefox OS version usage or feature usage?

FWIW, apparently you can also swipe down to hide the keyboard (mozilla-b2g/gaia#10669)

@ferndot
Copy link
Member

ferndot commented Nov 7, 2014

I don't know about statistics, but the latest release version of Firefox OS is 1.4. Some users are on the beta-nightly branches (2.0-2.2).

apparently you can also swipe down to hide the keyboard

That is a useful feature! I tested it, and it works in some parts of the system. It doesn't work inside Firetext though...

@twiss
Copy link
Collaborator Author

twiss commented Nov 7, 2014

@twiss how do you feel about me creating a new issue to address the hiding of the toolbar on editor focus and mouseover, and leaving this as a strategy discussion for zen mode on mobile?

Go ahead. Maybe you could quote the first comments made here. (Edit: #231)

I don't know about statistics, but the latest release version of Firefox OS is 1.4.

You're definitely right then to want to keep the hide-keyboard button. So my opinion is:

  1. Add some padding-top and padding-bottom (Allow scrolling past document end #205)
  2. Keep the hide-keyboard button on the bottom-right
  3. Add a show-toolbar button which is inside the editor, on the top-right, and don't hide the keyboard when you press it ([Strategize] Editors #204)

The only problem with that is that you may want to show/hide the toolbar based on zen mode. So maybe we should just not do that, or maybe notify the editor that we're in zen mode.

@Ryuno-Ki
Copy link

I don't know about statistics, but the latest release version of Firefox OS is 1.4. Some users are on the beta-nightly branches (2.0-2.2).

Passed the question over to Gaia Mailinglist

@Ryuno-Ki
Copy link

FYI stats for october 2014 are available now. Extracted from Firefox Marketplace.

I'll look after reaching out to the marketplace folks and look into the API when I'm at home (about an hour from now).

@ferndot
Copy link
Member

ferndot commented Nov 27, 2014

Thank you @Ryuno-Ki!

@Ryuno-Ki
Copy link

Right, there was a task for me …

Well, looking at the stats API for Marketplace it looks like for now, the distribution over versions cannot be requested.

I filled a ticket against Mozilla: bug #1105940

@twiss twiss changed the title Toolbar gets hidden on mouseenter in Firefox desktop Toolbar on the desktop Nov 29, 2014
@ferndot ferndot changed the title Toolbar on the desktop [desktop] Toolbar discussion Nov 29, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants