1901741 - PWA doesn't work well with toolbar features

Status: VERIFIED FIXED

(Fenix :: PWA, defect)

Description

[jackyzy823]

Attachment: Bug1.png

Steps to reproduce

While trying to fix the bug 1880747 , i found more bugs

0. Prepare: visit "https://community.wanikani.com" and install it as a PWA via "Add to HomeScreen"

1. Bug 1, Top bar of PWA is empty

   1. Set Toolbar to "TOP" and Scroll to hide toolbar to OFF in Settings->Customize
   2. Open "Wanikani" PWA (You could observe clearly if you set "Open links in private tab" to ON in Settings->Private Browsing)
      See screenshot bug1

2. Bug2

   1. Set Toolbar to "TOP" and Scroll to hide toolbar to ON in Settings->Customize
   2. Open "Wanikani" PWA , click "Try wanikani for free" , then when page loaded , click go back
   3. You could observe the top bar is just like bug 1

3. Bug3 , bottom toolbar do not hide when Scroll to hide toolbar enabled

   1. Set Toolbar to "BOTTOM" and Scroll to hide toolbar to ON in Settings->Customize
   2. Open "Wanikani" PWA , click "Try wanikani for free" , then when page loaded , try scroll to the end,
   3. You could observe the toolbar do not hide at all ( and i think this also causes the bug 1880747 ,the bottom of the page is covered by toolbar )

4. Bug 4 , just the same as bug 1880747

   1. Set Toolbar to "BOTTOM" and Scroll to hide toolbar to OFF in Settings->Customize
   2. Open "Wanikani" PWA , click "Try wanikani for free" , then when page loaded , try scroll to the end,
   3. The bottom of the page is covered by toolbar

Expected behavior

PWA works well with toolbar features

Actual behavior

PWA doesn't work well with toolbar features

Device information

• Firefox version: 127.0
• Android device model: Pixel 6
• Android OS version: 14

Any additional information?

Comment 1

[jackyzy823]

With the secret settings "Toolbar redesign incomplete portions" to ON

Prepare: visit "https://community.wanikani.com" and install it as a PWA via "Add to HomeScreen" and Open PWA app

1. Toolbar to "TOP" and Scroll to hide toolbar to OFF

   1. the top bar space is empty
   2. the bottom of the page is covered

2. Toolbar to "BOTTOM" and Scroll to hide toolbar to OFF

   1. the bottom of the page is covered
   2. click "Try wanikani for free" , then when page loaded ,the bottom of the page is covered twice more space (toolbar +navbar)

3. Toolbar to "TOP" and Scroll to hide toolbar to ON

   1. the top bar space is empty
   2. the bottom of the page is covered
      ( After clicking "Try wanikani for free" , then when page loaded , all looks correctly)

4. Toolbar to "BOTTOM" and Scroll to hide toolbar to ON
   All looks correctly

Comment 2

[jackyzy823]

Attachment: Bug 1901741 - Refactor toolbar visibility and margin in WebAppHideToolbarFeature. r=#android-reviewers

Comment 3

[jackyzy823]

For QA to test as much cases as possible:

Cases (combination)

1. Customize -> Toolbar TOP/BOTTOM
2. Customize -> Scroll To Hide ON/off
3. Secret Menu -> Toolbar Redesign incomplete portions OFF/ON
4. PWA / CustomTabs

Preparation

0. Set "Open links in private tab" to ON in Settings->Private Browsing to observe the strange blank clearly in purple color
1. Visit "https://community.wanikani.com" and install it as a PWA via "Add to HomeScreen"
2. Prepare a app can open link in CustomTab or follow steps in bug 1896007

For PWA case:
Step

1. Open PWA , scroll down to the end and up to the top
   1. Observe that toolbar or navbar (if toolbar redesign) is not shown.
   2. No blank margin in the top or bottom
2. Click "Try wanikani for free" and then wait the page loaded, scroll down to the end and up to the top
   1. Observe that toolbar or navbar is shown.
   2. Observe toolbar/navbar hide if config of scroll to hide ON
   3. Observe that the top of the page is not covered by toolbar
   4. Observe that the bottom of the page is not covered by toolbar
   5. No blank margin in the top or bottom
3. Go back, scroll down to the end and up to the top
   1. Observe that toolbar or navbar (if toolbar redesign) is not shown.
   2. No blank margin in the top or bottom
4. Close PWA (for reset)

For CustomTabs case:

1. Open PWA , scroll down to the end and up to the top
   1. Observe that toolbar or navbar is shown.
   2. Observe toolbar/navbar hide if config of scroll to hide ON
   3. Observe that the top of the page is not covered by toolbar
   4. Observe that the bottom of the page is not covered by toolbar
   5. No blank margin in the top or bottom ( or any behaviors in bug 1896007)

---

How to determine if the page is covered by toolbar:
In each page, there's signin/login in top of the page and copyright/company info in the bottom of the page. they should be shown and not be covered.

Comment 4

[Petru-Mugurel Lingurar [:petru]]

Thank you for looking into this!
Could reproduce all issues - edgecases in many layers - would be nice to support these scenarios naturally instead of trying to address each issue separately which could be a never ending battle.

Comment 5

[Petru-Mugurel Lingurar [:petru]]

@jackyzy823 Looks like we are close to land this patch.
Just two tests that need updating.
Do you have time to look into this / need any help?

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/404a061ca5a8
Refactor toolbar visibility and margin in WebAppHideToolbarFeature. r=android-reviewers,petru

Comment 7

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/404a061ca5a8

Comment 8

[miralobontiu]

Verified as fixed on the Fenix Nightly builds from 7/6, and 7/8, with the following devices:

• Oppo Find X3 Lite (Android 11),
• Samsung Galaxy S24 (Android 14), and
• Google Pixel 6 (Android 15).

I have enabled the "Enable Navigation Toolbar" from Secret Settings, and verified that:

• there are no blank margins when scrolling down to the end and up to the top,
• the toolbar or navbar is displayed when expected,
• the top of the page is not covered by the toolbar,
• the bottom of the page is not covered by the toolbar,
• the custom tab of the PWA does not display any blank areas, the navigation bar doesn't obscure the page.