1048683 - Optimise nine-patches to remove redundant rows/columns

Status: RESOLVED INCOMPLETE

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

Description

[Chris Kitching [:ckitching]]

In a nine-patch image with only a single scalable region along a particular axis, if that region consists entirely of duplicated rows/columns it can safely be collapsed to a single row/column of those pixels without altering appearance (and slightly reducing size).

We have several nine-patches that are susceptible to this optimisation. Let's safe a few kilobytes.

So, at the weekend I wrote an evil hackful program to perform this optimisation, found at:
https://bitbucket.org/ckitching/shrinkninepatch

The concept is pretty simple:

Check if the image has more than one scalable region along the x-axis. If it does, abort.
Check if all the columns in the scalable region along the x-axis are identical. If not, abort.
Replace all these columns with a single column.

Repeat for the y-axis.

Comment 1

[Chris Kitching [:ckitching]]

Attachment: Deduplicate nine-patch scalable regions

Comment 2

[Lucas Rocha (:lucasr)]

Could you send an example of how an image will be changed? It would be easier to understand what you're trying to achieve here with something more visual.

Comment 3

[Chris Kitching [:ckitching]]

Of course.

One of the images that makes this easiest to understand is probably the one used for the URL bar when it's selected (highlighted orange).
Original:

https://www.dropbox.com/s/4hw0iidiyyfvum8/url_bar_entry_pressed_before.9.png?m=
(Dropbox's viewer seems to not respect its transparent pixels, so you will probably want to download both images and open them in gimp or something)

This image has a scalable region in both the X and Y directions. There's a colour gradient along the Y axis, but along the X axis every column in the scalable region is the same, so this image can be reduced to:

https://www.dropbox.com/sm/create/mozilla/ninePatch/url_bar_entry_pressed_after.9.png

Conceptually, the transformation is like taking the scalable region of a ninepatch and flattening it down to one pixel (in cases where this doesn't destroy any data. Doing so along the Y-axis in this example image would destroy the gradient, so it is not done).

Another similar example:
https://www.dropbox.com/s/3xghfy18epfcd81/validation_bg_before.9.png?m=
To...
https://www.dropbox.com/s/ipecij8ccxx2hqh/validation_bg_after.9.png?m=


A more extreme example: this image has large scalable regions in both axes that can be collapsed, reducing the image almost to nothing:
https://www.dropbox.com/s/icjr0vvn67tiow3/autocomplete_list_bg_before.9.png
To...
https://www.dropbox.com/s/qzrdjjwq4modww8/autocomplete_list_bg_after.9.png?m=


If I've understood the nine-patch scaling system properly, these transformations are safe?

Comment 4

[Chris Kitching [:ckitching]]

Apologies, that second hyperlink should be:

https://www.dropbox.com/s/t2kfkrks9fxbmjt/url_bar_entry_pressed_after.9.png

Comment 5

[Lucas Rocha (:lucasr)]

Comment on attachment 8467521 [details] [diff] [review]
Deduplicate nine-patch scalable regions

Got it, makes sense. Are you confident this will not cause regressions? Please double check the update images in the app.

Comment 6

[Chris Kitching [:ckitching]]

https://hg.mozilla.org/integration/fx-team/rev/2468d4ae73b6

Comment 7

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/2468d4ae73b6

Comment 8

[Chris Kitching [:ckitching]]

https://hg.mozilla.org/integration/fx-team/rev/1be6f1487e21

Comment 9

[Chris Kitching [:ckitching]]

Reopening after the backout.

See Bug 1055598.

It seems the script is behaving as described, but that the process of deleting these "redundant" rows isn't generally safe (things start becoming translucent, strangely enough).

Another puzzle for another time, methinks...

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Merge of backout:
https://hg.mozilla.org/mozilla-central/rev/1be6f1487e21

Comment 11

[Richard Newman [:rnewman]]

Saw this today.

http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

Comment 12

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.