1312922 - On iOS 10 the Today Widget should support Compact and Expanded display

Status: RESOLVED FIXED

(Firefox for iOS :: General, defect, P1)

Description

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

So this is interesting. On iOS 10 Today Widgets are a fixed height. For ours, it is just tall enough to hold the New Tab buttons. But the Go To Copied Link button does not fit in it.

But, a widget can ask the to be 'Expanded', which means a 'Show More' or 'Show Less' button appears in its title bar. When the user taps that button, the widget can grow bigger to show additional content.

I have a (bad) patch ready that takes advantage of this and does the following:

* If the today widget is shown and there is no link on the pasteboard, the widget size is Compact. It just shows the two New Tab buttons and no Show More button in the title bar.

* If the today widget is shown and we do have a link on the pasteboard, then the widget opens by default in Compact mode, but the user can tap Show More to show the Go To Copied Link button.

There is one caveat: only a user interaction (tap on Show More/Less) can change the size of the widget. They start Compact. But once you have chosen to show Expanded, it stays that way. In our case that means once the user has tapped Show more, the widget will always correctly size based on what is on the pasteboard.

Movie attached with how this currently looks.

Comment 1

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Movie of new behaviour at https://youtu.be/AnQ2ZFDF6Pc

Comment 2

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Attachment: PR: https://github.com/mozilla-mobile/firefox-ios/pull/2195

Very rough initial patch that only works well on iOS 10 for now.

Comment 4

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Comment on attachment 8804521 [details] [review]
PR: https://github.com/mozilla-mobile/firefox-ios/pull/2195

Farhan, you most recently worked with the Today Widget code. Can you take a look at my patch and see if it is going the right way?

Comment 5

[Farhan Patel [:farhan]]

Attachment: widget without expand

Hey Robin. So I can get this working without the "show more/less". I've attached a screenshot of how it looks. 

The original reason this patch was written was because the spacing between the new tab buttons and the copied link button was missing. Things are still a bit tight but we have the advantage of not having to hide functionality. 

If you want to take the time now to update anything in the Today Widget I can do that now too.

Comment 6

[Robin Andersen [:tecgirl]]

(In reply to Farhan Patel from comment #5)
> Created attachment 8805895 [details]
> widget without expand
> 
> Hey Robin. So I can get this working without the "show more/less". I've
> attached a screenshot of how it looks. 
> 
> The original reason this patch was written was because the spacing between
> the new tab buttons and the copied link button was missing. Things are still
> a bit tight but we have the advantage of not having to hide functionality. 
> 
> If you want to take the time now to update anything in the Today Widget I
> can do that now too.

I'd still like to pin down why our release version still has the (preferred) darker background. See http://c.tecgirl.com/hxe0 

Instead of re-working the palette to better serve the contrast ratio, can we at least get the background dark again (on both lock/notif screen and homescreen) and open up the line-height to match?

Comment 7

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

(In reply to Robin Andersen [:tecgirl] from comment #6)
> (In reply to Farhan Patel from comment #5)
> > Created attachment 8805895 [details]
> > widget without expand
> > 
> > Hey Robin. So I can get this working without the "show more/less". I've
> > attached a screenshot of how it looks. 
> > 
> > The original reason this patch was written was because the spacing between
> > the new tab buttons and the copied link button was missing. Things are still
> > a bit tight but we have the advantage of not having to hide functionality. 
> > 
> > If you want to take the time now to update anything in the Today Widget I
> > can do that now too.
> 
> I'd still like to pin down why our release version still has the (preferred)
> darker background. See http://c.tecgirl.com/hxe0 

Apple renders the widget differently based on what SDK the app is linked against. The release version is linked against the iOS 9 SDK while Nightly is linked against the iOS 10 SDK.

> Instead of re-working the palette to better serve the contrast ratio, can we
> at least get the background dark again (on both lock/notif screen and
> homescreen) and open up the line-height to match?

I don't think this is the right thing to do. On iOS 10 the widgets have a different style and we should follow that.

If we use the vibrancy APIs, iOS will actually give us the right colors to use for text. Without us having to know if iOS will render the widget with Dark or Light style vibrancy.

Comment 8

[Farhan Patel [:farhan]]

Yea, Stefan has it right. I'll make sure that the color of the text matches the widget on both ios9/10

Comment 9

[Farhan Patel [:farhan]]

Attachment: finaltoday.jpg

Let me know what you think of the colors/alignment in this one. 
I've included both iOS9/iOS10 in the screenshot.

Comment 10

[Farhan Patel [:farhan]]

Woops. Don't mind the  "Show more" thats appearing. I've disabled that and it wont appear in the actual widget anymore.

Comment 11

[Farhan Patel [:farhan]]

Attachment: Pull Request

I changed the widget to use the tint color property more to set the desired colors. This allows UIVibrancyEffect to work correctly on iOS10. On iOS9 I just set the tintColor to white manually.

I also added some spacing between the copied link button and the rest of the extension.

Comment 12

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Comment on attachment 8806277 [details] [review]
Pull Request

LGTM

Comment 13

[Farhan Patel [:farhan]]

master https://github.com/mozilla-mobile/firefox-ios/commit/47703eb25c99389197b291d431543b3abce14c87

Comment 14

[Stephan Leroux [:sleroux]]

v6.x b5b1093