739364 - [TABLET] Awesomebar Top Sites tab

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Ian Barlow (:ibarlow)]

Attachment: Mockup

Let's get the Awesomebar Top Sites (Frecency list) updated with the new UI.

A mockup is attached. More detailed specs and assets will follow soon.

Comment 1

[Kevin Brosnan [Ex-Mozilla]]

-ing to keep triage lists clean

Comment 2

[Ian Barlow (:ibarlow)]

Attachment: UI Specs

The Top Sites list gives you quick access to sites you visit often, sites you’ve bookmarked, and sites you’ve visited recently. 

Tapping on the URL Bar opens the AwesomeBar and brings up the keyboard. Each AwesomeBar entry is distinguishable by the site’s favicon, the page title, and its URL. Any title and URL text that doesn’t fit in a single line is truncated in the center by an ellipsis (“...”). Tapping on any entry opens the page in the current tab.

More detailed information is included in the attached spec!

Comment 3

[Eitan Isaacson [:eeejay]]

When a user arrows down a list with direction keys, should there be a separate highlight state color or should it visually look like a tap state?

Comment 4

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch

*One deep breathe*
Finally! It's done. I've ensured to change all dependent layouts.
FlowLayout used for search suggestion is having problems on phones. I need to look into the code to fix it. I'll do it as a followup. (Basically it's not honouring minWidth attribute, hence the text might be chopped off at times).

Comment 5

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch 2/2

Being unable to hit reader button on a 3.5" screen, and getting frustrated over and over, I fixed determined to fix it, and fixed it! :D

This basically enlarges the target area to the entire height of the browsertoolbar, and adds padding to keep the icon at the required size.

Comment 6

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch (1/2)

Earlier we wanted a small little border below the "headers" in folders.
Now that's removed. So, I had removed the LinearLayout from awesomebar_header_row.xml.
That was crashing when we tried using Bookmarks. It's fixed in this patch.

Comment 7

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 637596 [details] [diff] [review]
Patch (1/2)

>diff --git a/mobile/android/base/AwesomeBarTabs.java b/mobile/android/base/AwesomeBarTabs.java

>+    private void fixTabIndicator() {
>+        int selIndex = getCurrentTab();
>+        TabWidget tabWidget = getTabWidget();
>+        for (int i = 0; i < tabWidget.getTabCount(); i++) {
>+             if (i == selIndex)
>+                 continue;
>+
>+             if (i == (selIndex - 1))
>+                 tabWidget.getChildTabViewAt(i).getBackground().setLevel(1);
>+             else if (i == (selIndex + 1))
>+                 tabWidget.getChildTabViewAt(i).getBackground().setLevel(2);
>+             else
>+                 tabWidget.getChildTabViewAt(i).getBackground().setLevel(0);
>+        }
>+
>+        if (selIndex == 0)
>+            findViewById(R.id.tab_widget_left).getBackground().setLevel(1);
>+        else
>+            findViewById(R.id.tab_widget_left).getBackground().setLevel(0);
>+
>+        if (selIndex == (tabWidget.getTabCount() - 1))
>+            findViewById(R.id.tab_widget_right).getBackground().setLevel(2);
>+        else
>+            findViewById(R.id.tab_widget_right).getBackground().setLevel(0);
>+    }

If I understand this function, you are styling the selected tab, using the adjacent tabs to show the "curves" if needed.
In that case, lets rename the function to "styleSelectedTab()"

Comment 8

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch (1.5/2): For Inbound

This is same as Patch (1/2). This has been made ready for inbound.

Note: The list styling is still available in styles.xml. However they are not applied properly, as with the changes in Bug 759041, the lists are created in Java, which doesn't take the styles into consideration.

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 638027 [details] [diff] [review]
Patch (1.5/2): For Inbound

This looks fine, but file a bug to fix the styling on trunk.

Comment 10

[Sriram Ramasubramanian [:sriram]]

http://hg.mozilla.org/integration/mozilla-inbound/rev/a92bb4e1842d
http://hg.mozilla.org/integration/mozilla-inbound/rev/28d34d5f50ae

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/a92bb4e1842d
https://hg.mozilla.org/mozilla-central/rev/28d34d5f50ae

Comment 12

[Sriram Ramasubramanian [:sriram]]

Comment on attachment 637567 [details] [diff] [review]
Patch 2/2

[Approval Request Comment]
Bug caused by (feature/regressing bug #): New UI
User impact if declined: The AwesomeScreen will not be tablet optimized.
Testing completed (on m-c, etc.): Landed on m-c on 07/02
Risk to taking this patch (and alternatives if risky): None.
String or UUID changes made by this patch: -

Note: The UI of AwesomeScreen in current m-c feels broken as the styles aren't applied due to a change in AwesomeBar that landed. This patch is for aurora -- which doesn't have the AwesomeBar changes, and tested to work fine.

Comment 13

[Sriram Ramasubramanian [:sriram]]

Comment on attachment 637596 [details] [diff] [review]
Patch (1/2)

[Approval Request Comment]
Bug caused by (feature/regressing bug #): New UI
User impact if declined: The AwesomeScreen will not be tablet optimized.
Testing completed (on m-c, etc.): Landed on m-c on 07/02
Risk to taking this patch (and alternatives if risky): None.
String or UUID changes made by this patch: -

Note: The UI of AwesomeScreen in current m-c feels broken as the styles aren't applied due to a change in AwesomeBar that landed. This patch is for aurora -- which doesn't have the AwesomeBar changes, and tested to work fine.

Comment 14

[Alex Keybl [:akeybl]]

(In reply to Sriram Ramasubramanian [:sriram] from comment #12)
> User impact if declined: The AwesomeScreen will not be tablet optimized.

Does this give us style parity between tablets and phones on Aurora 15? I just want to make sure they won't be visually different when we release.

Comment 15

[Sriram Ramasubramanian [:sriram]]

This is phone and tablet ready -- as per the specifications. They both will be visually similar (with some optimizations based on the form factor).

Comment 16

[Alex Keybl [:akeybl]]

Comment on attachment 637567 [details] [diff] [review]
Patch 2/2

[Triage Comment]
This is the tablet interface that we've been testing on m-c, so we need to uplift. We also want phone UI parity, so we'll take the changes for that form factor as well. Approved for Aurora 15.

Comment 18

[Sriram Ramasubramanian [:sriram]]

Search Suggestions are not in Aurora. Can I just bit-trot the patch and uplift mine?

Comment 19

[Sriram Ramasubramanian [:sriram]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/7971fe51b08d

Comment 20

[Sriram Ramasubramanian [:sriram]]

Landed with "Search suggestions" related code removed.

Comment 21

[Sriram Ramasubramanian [:sriram]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/070c8d0df45b