840346 - [Holo] Flat UI

Status: RESOLVED FIXED

(Firefox for Android :: Theme and Visual Design, defect)

Description

[Sriram Ramasubramanian [:sriram]]

Remove all textures, use solid colors for all the backgrounds.

Comment 1

[Sriram Ramasubramanian [:sriram]]

Attachment: Part 1: Flat URL bar

This removes a whole bunch of stuff in Java, replaces few resources for the rounded rectangle. Only colors are used everywhere.

Comment 2

[Sriram Ramasubramanian [:sriram]]

Attachment: Part 2: Proper persona methods

Ideally its better to combine both the colors into and paint it (earlier one was a texture and the other a color). But I couldn't find a proper filter. So, this just replaces texture with a color.

And few renaming for my OCD. :D

Comment 3

[Sriram Ramasubramanian [:sriram]]

Attachment: Part 3: Unwanted icons

These sync icons were there for no reason. Purged completely.

Comment 4

[Sriram Ramasubramanian [:sriram]]

Attachment: Part 4: Flat about: pages

And flat UI for about:pages. This removes the images and replaces them with colors.

Comment 5

[Sriram Ramasubramanian [:sriram]]

Adding kats to remove the "abouthome_bg" texture used by LayerView, and replaced it with R.color.background_normal.

Comment 6

[Sriram Ramasubramanian [:sriram]]

Attachment: Part 2: Proper persona methods

This fixes the color-filter problem with persona. Now that we are using solid colors (yaay!), we can combine the solid color (like the grey), with a dominant color using a color filter. This when drawn, it's drawn as one single paint operation rather than two. That's a win!

May be, if we find the color filter to be slower, we can combine the two colors ourselves and set it as a single color to paint. But I don't think color filter is slower. Android does it for us for free :D

Also, I find the about:home to scroll a bit faster with personas -- with this change.

Comment 7

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

Comment on attachment 712719 [details] [diff] [review]
Part 1: Flat URL bar

I can't wait to see this in the app. The code cleanup alone is really nice. You might want to double check you removed all the files we no longer need.

Comment 8

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

Comment on attachment 712722 [details] [diff] [review]
Part 3: Unwanted icons

Yay! for more cleanup

Comment 9

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

Comment on attachment 712723 [details] [diff] [review]
Part 4: Flat about: pages

I am slightly worried that add-ons might be using these background images. We can see if anyone reports problems with add-on about: pages.

Comment 10

[Sriram Ramasubramanian [:sriram]]

Inbound:
https://hg.mozilla.org/integration/mozilla-inbound/rev/700ef0823d91
https://hg.mozilla.org/integration/mozilla-inbound/rev/eb2e980741b7
https://hg.mozilla.org/integration/mozilla-inbound/rev/2813cfcfd1c1
https://hg.mozilla.org/integration/mozilla-inbound/rev/6f28814befb7

Comment 11

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Attachment: Part x: Get rid of the background tile layer

Here's a patch that gets rid of the background layer and replaces it with a solid Color.MAGENTA. You can replace that color with whatever you like, or pull it from a resource file or whatever. I'm leaving it without a review request for now since I don't know if you want to make more changes on this, but if you want it reviewed Cwiiis would probably be the best reviewer for this patch.

Comment 12

[Sriram Ramasubramanian [:sriram]]

Comment on attachment 713606 [details] [diff] [review]
Part x: Get rid of the background tile layer

I would like to replace Color.MAGENTA with a | mView.getContext().getResources().getColor(R.color.background_normal) | before pushing.

Comment 13

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/700ef0823d91
https://hg.mozilla.org/mozilla-central/rev/eb2e980741b7
https://hg.mozilla.org/mozilla-central/rev/2813cfcfd1c1
https://hg.mozilla.org/mozilla-central/rev/6f28814befb7

Comment 14

[Chris Lord [:cwiiis]]

Comment on attachment 713606 [details] [diff] [review]
Part x: Get rid of the background tile layer

Review of attachment 713606 [details] [diff] [review]:
-----------------------------------------------------------------

LGTM, assuming the colour will be changed.

::: mobile/android/base/gfx/LayerRenderer.java
@@ +536,5 @@
>  
> +            // Clear the page area to the page background colour.
> +            setScissorRect();
> +            clear(mBackgroundColor);
> +            GLES20.glDisable(GLES20.GL_SCISSOR_TEST);

I'd be interested to know if a clear+scissor is faster or slower than a texture draw... Are there any talos results? Specifically, tpan.

Comment 15

[Sriram Ramasubramanian [:sriram]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/a119a9b9d390

Comment 16

[Sriram Ramasubramanian [:sriram]]

Attachment: Part y: Cleanup the texture folder

Zarro textures found!

Comment 17

[Sriram Ramasubramanian [:sriram]]

We are so clean!
https://hg.mozilla.org/integration/mozilla-inbound/rev/e36402a56225

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/a119a9b9d390
https://hg.mozilla.org/mozilla-central/rev/e36402a56225