1497965 - Make toast views stretch all the way to the bottom of the screen

Status: RESOLVED INACTIVE

(Firefox for iOS :: General, enhancement)

Description

[Justin D'Arcangelo [:justindarc]]

As a follow-up to Bug 1497441, let's extend the bottom of the toast to reach the bottom of the screen so that the web content is not visible below it when the bottom toolbar is not on-screen.

Comment 2

[:garvan]

Attachment: image.png

Comment 3

[Rahul Ranjan]

Hi @justindarc, I can work on it. I think it is a good starter bug for me. You can assign it to me.

Also, if you have more code context then please share unless I will try my best.

Comment 4

[Justin D'Arcangelo [:justindarc]]

Great! Thanks!

I believe this is the base Toast class that the others extend:

https://github.com/mozilla-mobile/firefox-ios/blob/master/Client/Frontend/Browser/Toast.swift

There is one other SimpleToast class for toasts that don't have a button or anything:

https://github.com/mozilla-mobile/firefox-ios/blob/master/Client/Frontend/Browser/SimpleToast.swift

However, in the case of this bug, I believe the toasts in question that need fixed all extend from the base Toast class. The easiest way to test this is to long-press a link and "Open in New Tab" to see the toast you see in Comment 2.

Comment 5

[Rahul Ranjan]

Thanks, Justin for detailed context, I have started working on it.

Comment 6

[Rahul Ranjan]

Attachment: Simulator Screen Shot - iPhone XR - 2019-04-04 at 22.45.59.png

Zero constraints cover the TabToolBar.

Comment 7

[Rahul Ranjan]

Justin, I have looked into the code. We have several cases to handle here.

Case 1: Existing one.
Currently, toast bottom anchor has a constraint to webViewContainer safeArea and that's why we see the text below it.

self.webViewContainer?.safeArea.bottom 

Case 2: Removing the above constraint and making it to zero

If I make the bottom constraint to zero then it overlaps on the TabToolBar before scrolling and style also change like the side corner.
I don't know what is the correct design here.

make.bottom.equalTo(self.webViewContainer?.safeArea.bottom)

Case 3: Scroll View
In this case, while TabToolBar is there then we can show the toast above it and once it is not present while scrolling then we can show a toast with zero constraints like the above image. In this scenario, we have to little bit fiddle with ScrollViewDelegate.

Comment 8

[Justin D'Arcangelo [:justindarc]]

Sorry if this has turned into a bit of a rabbit-hole.

So, I believe the desired behavior here is for the bottom of the toast to behave exactly the same as it does currently in all cases except for when the bottom tab toolbar is hidden. In that case, the problem is that there's a gap between the bottom of the toast and the bottom of the screen. What we'd like to do is extend the background blue area of the toast to go all the way to the bottom. This may require tweaking the view hierarchy within the toast view itself. In cases where the bottom tab toolbar is visible, the current behavior of the toast bottom touching the top of the toolbar is correct and no additional padding seems to be needed.

In my naïve way of looking at this problem, I would try and see if there's a way to place the toast view behind the bottom tab toolbar, but above the webview. In that case, you could simply build in some permanent bottom padding to the toast view so that it will always extend to the bottom of the screen and just adjust the vertical positioning of the toast depending on whether or not the bottom tab toolbar is visible.

Comment 9

[Rahul Ranjan]

Sounds good now. I think we stumbled upon corner cases only when we are fixing and so it is OK (no rabbit-hole).

One more question, so let say I fix this. After this, do we have units test also or just UI tests to write?

Comment 10

[Farhan Patel [:farhan]]

Bug has been migrated to Github. Closing.
To add additional comments please find the bug in Github.

https://github.com/mozilla-mobile/firefox-ios/issues