[Extensions UI] Highlight toolbar extensions when the redesign bubble is active

chrome/app/theme/theme_resources.grd

Index: chrome/app/theme/theme_resources.grd
diff --git a/chrome/app/theme/theme_resources.grd b/chrome/app/theme/theme_resources.grd
index 1963645154f351e752631df74b5cd88c8d3da2f2..b71e7fac7fee62f3e93b593b4bf4db9f3070466f 100644
--- a/chrome/app/theme/theme_resources.grd
+++ b/chrome/app/theme/theme_resources.grd
@@ -966,6 +966,16 @@
         <structure type="chrome_scaled_image" name="IDR_TOOLS_P" file="common/browser_tools_pressed.png" />
       </if>
 
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_BOTTOM_LEFT" file="common/toolbar_action_highlight_bottom_left.png" />

[Peter Kasting, 2015/07/23 00:00:11]

Instead of adding 9 images at each scale size, can we add one image and then
split it in code?  I believe NineImagePainter, for example, can take a single
image and split it.

This should not only be briefer, but result in lower total image sizes and seek
requests.

[Devlin, 2015/07/23 02:43:30]

Good question, and one that I'm not really an authority on.  The nine-grid-style
here is what's been used for the very-similar developer mode highlight, and for
other highlights.  I'd be a little concerned that taking a single image would
result in having some funny scaling issues, but I'm not sure one way or the
other.

For concrete reasons to do it this way:
- It's consistent, so if we change one, we can change both.
- Doing a single image requires new UI assets, and with UI designers being a
scarce resource, I don't think it's (yet) worth going back to them.

Fewer seek requests is good, but this highlight is pretty rare, so it's not
performance-sensitive.

[Peter Kasting, 2015/07/23 05:40:53]

We used to use nine images everywhere.  The code to use one is fairly recent, so
most of our assets aren't converted, but it's what we want to use in the future.

The two have equivalent behavior -- the one-image path effectively divides the
image into nine pieces and from there they're painted/tiled/scaled in the same
way the nine would be.  It's just a matter of the input image being smaller and
simpler, easier to maintain, and easier for the designers to work with (because
they start from a single image and manually divide it anyway).

[Devlin, 2015/07/23 15:30:13]

Ah, thanks for the explanation - a single image then is definitely preferable. 
Would you be okay with this patch landing, and then me updating the images in a
follow-up, just so this isn't gated on getting different UI assets (which can
take quite awhile)?

+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_BOTTOM" file="common/toolbar_action_highlight_bottom.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_BOTTOM_RIGHT" file="common/toolbar_action_highlight_bottom_right.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_CENTER" file="common/toolbar_action_highlight_center.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_LEFT" file="common/toolbar_action_highlight_left.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_RIGHT" file="common/toolbar_action_highlight_right.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_TOP_LEFT" file="common/toolbar_action_highlight_top_left.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_TOP" file="common/toolbar_action_highlight_top.png" />
+      <structure type="chrome_scaled_image" name="IDR_TOOLBAR_ACTION_HIGHLIGHT_TOP_RIGHT" file="common/toolbar_action_highlight_top_right.png" />
+
       <structure type="chrome_scaled_image" name="IDR_TOOLBAR_BEZEL_HOVER" file="common/browser_toolbar_bezel_hover.png" />
       <structure type="chrome_scaled_image" name="IDR_TOOLBAR_BEZEL_PRESSED" file="common/browser_toolbar_bezel_pressed.png" />
       <structure type="chrome_scaled_image" name="IDR_TOOLS_BAR" file="common/browser_tools_bar.png" />