857437 - Defect - On-screen keyboard (OSK) overlapping app bars and find bar

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: App Bar, defect, P2)

Description

[Kamil Jozwiak [:kjozwiak]]

When using the "Find" feature through the app bar, tapping in the search area will display the OSK and overlap the "Find" app bar making it very difficult to see what is being typed in. There was an earlier ticket that suggested placing the app bar at the top but it seems like the idea has been scrapped.

Steps to reproduce the issue:

1) Open Firefox Metro
2) Go to wikipedia.org
3) Swipe in the app bar (Windows + Z)
4) Select "Settings" and then "Find in page"
5) Tap in the "Search" box (You will notice the OSK will overlap the App Bar)

Current Behavior:

- OSK overlaps the "Find" app bar making it very difficult to search for terms/words

Expected Behavior:

- OSK should not be overlapping the "Find" app bar

Comment 1

[Kamil Jozwiak [:kjozwiak]]

consideration in Iteration #6

Comment 2

[Marco Mucci [:MarcoM]]

For consideration in Iteration #6.

Comment 3

[Jim Mathies [:jimm]]

We might want to wait on this until after the unified navbar lands. I'm not sure how these lower "bars" are going to latch into that, or how it will handle keyboard display.

Comment 4

[Marco Mucci [:MarcoM]]

No problem.  I will move it to the 'planning backlog' until it is ready to be worked on.

Comment 5

[Brian R. Bondy [:bbondy]]

p=3

Comment 7

[Marco Mucci [:MarcoM]]

Hi Frank, can you let me know if Bug 857437 will be landing today?

Comment 8

[Frank Yan (:fryn)]

It won't be landing today, but I'll have a patch up this week.

Comment 9

[Jim Mathies [:jimm]]

Attachment: navbar reposition v.1

Comment 10

[Frank Yan (:fryn)]

Comment on attachment 754853 [details] [diff] [review]
navbar reposition v.1

Does the find bar not need to be fixed too?

Comment 11

[Jim Mathies [:jimm]]

(In reply to Frank Yan (:fryn) from comment #10)
> Comment on attachment 754853 [details] [diff] [review]
> fix
> 
> Does the find bar not need to be fixed too?

Yes it does. (I was curious why we left that orange band around.) Is there anything else lurking under here I should know about?

Comment 12

[Jim Mathies [:jimm]]

Attachment: remove old fennec form-helper css

Noticed this gunk still hanging around.

Comment 13

[Jim Mathies [:jimm]]

Attachment: app bar v.1

Comment 14

[Jim Mathies [:jimm]]

Attachment: find bar v.1

This is a bit more involved, I cleaned out the old way this was being positioned and switched to using css properties instead, so we get all our positioning automatically. Also added the same transition the navbar has for uniformity.

Comment 15

[Jim Mathies [:jimm]]

Attachment: nav buttons v.1

Lastly, hide the nav overlay buttons when the keyboard is up. They get clipped and they overlay the nav/find bars, so it looks pretty nasty.

Comment 16

[Frank Yan (:fryn)]

Comment on attachment 754939 [details] [diff] [review]
find bar v.1

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

Just one thing to tweak:

::: browser/metro/theme/forms.css
@@ +19,5 @@
> +              bottom @metro_animation_duration@ @metro_animation_easing@;
> +}
> +
> +#content-navigator[type] {
> +  height: 59px;

Could we use the transform: translateY(100%) technique to hide this that we use to hide the app bar?
It's better to avoid hard-coding dimensions when possible.

Comment 17

[Frank Yan (:fryn)]

Comment on attachment 754941 [details] [diff] [review]
nav buttons v.1

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

::: browser/metro/base/content/browser-ui.js
@@ +616,5 @@
>    },
>  
>    _updateButtons: function _updateButtons() {
>      let browser = Browser.selectedBrowser;
> +    if (browser.canGoBack && !ContentAreaObserver.isKeyboardOpened) {

Rather than change these branch conditions, please set an attribute somewhere in the document that we can use in metro/theme/browser.css.

There's a somewhat ugly block that I wrote for this that has selectors like `#stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr)`. You can add to that block to hide the overlay buttons while the keyboard is open.

Comment 18

[Jim Mathies [:jimm]]

(In reply to Frank Yan (:fryn) from comment #16)
> Could we use the transform: translateY(100%) technique to hide this that we
> use to hide the app bar?
> It's better to avoid hard-coding dimensions when possible.

Got this working. However in the process I was trying to fix the layout of the bar which is a bit jumbled. I can't seem to get the text edit to position right next to the buttons. Will attach a screenshot. This seems to have something to do with the use of xbl and the children element which includes the text edit, which is defined in browser.xml. If I add padding or margin to the bottom of the edit, it pushes up the buttons. Negative values don't have any effect, and I can't figure out where the big gap above the edit is coming from Curious if anyone has any ideas.

I'll post the patch as is, if we can't come up with something here I'll file a follow up polish bug on this.

Comment 19

[Jim Mathies [:jimm]]

Attachment: find bar edit screen shot

Comment 20

[Jim Mathies [:jimm]]

Attachment: find bar v.2

Comment 21

[Jim Mathies [:jimm]]

Attachment: nav buttons v.2

Comment 22

[Jim Mathies [:jimm]]

Attachment: context bar v.1

One more bar to reposition, the context bar with the buttons.

Comment 23

[Jim Mathies [:jimm]]

Attachment: clip contextappbar v.1

This is an improvement on top of these patches that fixes a problem with the context app bar peeking through when the keyboard moves around. Since the context app bar is just below the navbar, sometimes when the keyboard moves up or down, you see a little sliver of orange between the navbar and the top of the keyboard if the two don't animate at the same rate. This patch sets visibility: hidden on the context app bar once it's hidden and the transition is complete so you can't see it.

Comment 24

[Jim Mathies [:jimm]]

Comment on attachment 755525 [details] [diff] [review]
clip contextappbar v.1

I found that the find bar has the same issue. I'm going to kick this out to a new transition tweak bug because I'd like to change up how these transitions work a bit.

Comment 25

[Rodrigo Silveira [:rsilveira] [:rodms]]

Just a heads up that there are a couple of conflicts with the patch I landed for Bug 867641.

Comment 26

[Jim Mathies [:jimm]]

(In reply to Rodrigo Silveira [:rsilveira] from comment #25)
> Just a heads up that there are a couple of conflicts with the patch I landed
> for Bug 867641.

Wasn't a big deal. Curious though what is the margin-bottom on the find bar compensating for?

Comment 27

[Jim Mathies [:jimm]]

(In reply to Jim Mathies [:jimm] from comment #26)
> (In reply to Rodrigo Silveira [:rsilveira] from comment #25)
> > Just a heads up that there are a couple of conflicts with the patch I landed
> > for Bug 867641.
> 
> Wasn't a big deal. Curious though what is the margin-bottom on the find bar
> compensating for?

Oh nm, that's the same thing I was doing with translateY. We both started off with the same basic fix but then mine went through the fryn css machine. :)

Comment 28

[Rodrigo Silveira [:rsilveira] [:rodms]]

Oh, at some point while I was working on that patch the find bar was an element that would push #browsers up, so I couldn't use translateY. I changed back to position fixed and now translateY would be better, but don't tell fryn! :)

Comment 29

[Jim Mathies [:jimm]]

Attachment: find bar v.2

merged to mc tip.

Comment 30

[Frank Yan (:fryn)]

Comment on attachment 755881 [details] [diff] [review]
find bar v.2

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

Since several bugs are depending on this, let's just land this and fix internal positioning issues of the find bar in a followup.

Comment 31

[Jim Mathies [:jimm]]

remote:   https://hg.mozilla.org/integration/mozilla-inbound/rev/953423b6d479
remote:   https://hg.mozilla.org/integration/mozilla-inbound/rev/865169e56c6a
remote:   https://hg.mozilla.org/integration/mozilla-inbound/rev/a270e48eb63b
remote:   https://hg.mozilla.org/integration/mozilla-inbound/rev/9457da2d1eed
remote:   https://hg.mozilla.org/integration/mozilla-inbound/rev/eb4a27783b6b

Comment 32

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/953423b6d479
https://hg.mozilla.org/mozilla-central/rev/865169e56c6a
https://hg.mozilla.org/mozilla-central/rev/a270e48eb63b
https://hg.mozilla.org/mozilla-central/rev/9457da2d1eed
https://hg.mozilla.org/mozilla-central/rev/eb4a27783b6b

Comment 33

[juan becerra [:juanb]]

Tested on 2013-06-14 using latest nightly

- I used the steps in comment #0 to check that the soft keyboard no longer overlaps the find bar.
- I checked this by: tapping in the search box in the find bar, which brings up the soft keyboard; swiping from the right to bring up the Settings/Keyboard; ctrl-f and then tapping on the search box; and trying switching between soft keyboard and hardware keyboard.

Comment 34

[Samvedana (:Samvedana)]

Tested this for iteration 9.
WFM for latest nightly from ftp://ftp.mozilla.org/pub/firefox/nightly/2013-07-01-mozilla-central-debug

Comment 35

[Samvedana (:Samvedana)]

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:26.0) Gecko/20100101 Firefox/26.0
Build ID: 20130807030216
Built from http://hg.mozilla.org/mozilla-central/rev/1fb5d14e8348

WFM
Tested on windows 8 using latest nightly  for iteration-11. Followed steps provided in comment0 and got expected result.

Comment 36

[Samvedana (:Samvedana)]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Build ID: 20130819030205
Built from http://hg.mozilla.org/mozilla-central/rev/c8c9bd74cc40

WFM
Tested on windows 8 using latest nightly for iteration-12. Followed steps provided in comment0 and got expected result.

Comment 37

[Kamil Jozwiak [:kjozwiak]]

Went through the following "Defect" for iteration #15 without any issues. Used the following build:
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-10-02-03-02-01-mozilla-central/

- Went through the original test case(s) described in comment #0 without any issues
- Ensured that pressing "CTRL + F" and then tapping on the "search field" would slide in the OSK without overlapping the "Find" app bar
- Ensured that the OSK doesn't overlap the "Find Bar App" when going through the "Settings" under the "Navigation App Bar"
- Ensured that the OSK sliding/retracting animation was smooth and worked without issues
- Ensured that you can slide in and retract the OSK several times without it overlapping the "Find" app bar
- Ensured that all of the above test cases worked using full & filled views

Comment 38

[Kamil Jozwiak [:kjozwiak]]

Went through the following defect for iteration #20 without any issues. Used the following build:
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-12-23-03-02-03-mozilla-central/

- Went through the original test case in comment #0 without any issues
- Went through the test cases added in comment #37 without any issues
- Ensured that when the OSK slides in, the overlay buttons are removed smoothly without any jank as per comment # 15
- Ensured that when the OSK is dismissed, the overlay buttons return to the screen smoothly without any jank as per comment # 15
- Ensured that pressing "CTRL + F" slides in the Find App Bar without any issue
- Ensured that going through the "Settings" menu under the Navigation App Bar slides in the Find App Bar without any issues
- Ensured that taping on the text box in the Find App Bar slides in the OSK and places the app bar above the OSK
- Ensured that you can search through the different instances of the word while the OSK is visible
- Ensured that pressing "ESC" dismisses Find App Bar including the OSK if it's visible at the time
- Ensured that taping on the website dismisses the OSK but leaves the Find App Bar visible at the bottom of Firefox Metro
- Ensured that pressing the "X" button under the Find App Bar closes the Find App Bar including the OSK if it's visible at the time