1091241 - Make add-on detail page look more like a detail page

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Add-on Manager, defect)

Description

[:Margaret Leibovic]

Right now, when you tap on an add-on to view more details, if there aren't any add-on options, the detail view still looks like a row item, which can be confusing. We should make it look more like a detail page, perhaps by making sure the disable/uninstall buttons are always at the bottom of the screen.

Comment 1

[Ray Lin[:ralin]]

It's a good idea to do that, also perhaps animation could let users feel like entering to a new page. Some tricks could be placed during the add-on list is hiding. 

I could give a first version which put button at the bottom, then see if we need more than that.

Comment 2

[Ray Lin[:ralin]]

Attachment: MozReview Request: Bug 1091241 - Make add-on details look like a page. r?Margaret

Review commit: https://reviewboard.mozilla.org/r/52125/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/52125/

Comment 3

[:Margaret Leibovic]

Comment on attachment 8751598 [details]
MozReview Request: Bug 1091241 - Make add-on details look like a page. r?Margaret

https://reviewboard.mozilla.org/r/52125/#review49876

From the screenshot, it looks like the button is missing a border on the right side. Do you notice that?

::: mobile/android/chrome/content/aboutAddons.js:139
(Diff revision 1)
>    // Hide the detail page and show the list
>    let details = document.querySelector("#addons-details");
>    details.style.display = "none";
>    let list = document.querySelector("#addons-list");
>    list.style.display = "block";
> +  document.documentElement.style.backgroundColor = "";

It seems like it would be better to set these styles in CSS, and then use attribute or class selectors to toggle them on/off.

However, given this is a pre-existing problem, I don't think that needs to block landing this patch.

::: mobile/android/themes/core/aboutAddons.css:72
(Diff revision 1)
>  .addon-item[optionsURL=""] .options-box {
>    display: none;
>  }
>  
> +#addons-details > .list-item {
> +  margin-bottom: 45px;

Why 45px?

Comment 4

[Ray Lin[:ralin]]

Comment on attachment 8751598 [details]
MozReview Request: Bug 1091241 - Make add-on details look like a page. r?Margaret

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/52125/diff/1-2/

Comment 5

[Ray Lin[:ralin]]

https://reviewboard.mozilla.org/r/52125/#review49876

The problem is fixed, thanks!

> Why 45px?

Since the bottons are fixed at bottom with position:fixed. To avoid overlapping on content, I set a number close to buttons' height(42px).

Comment 6

[:Margaret Leibovic]

Comment on attachment 8751598 [details]
MozReview Request: Bug 1091241 - Make add-on details look like a page. r?Margaret

https://reviewboard.mozilla.org/r/52125/#review51652

Looks fine to me!

Comment 7

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/8df26f4aab26

Comment 8

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/8df26f4aab26

Comment 9

[Teodora Vermesan (:TeoVermesan)]

Attachment: Screenshot_2016-05-26-14-37-43.png

Verified as fixed using:
Device: Galaxy note 5 (Android 5.1.1)
Build: Firefox for Android 49.0a1 (2016-05-26)