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

chrome/app/theme/theme_resources.grd

 <?xml version="1.0" encoding="utf-8"?>
 <!-- This grd file contains images that are pre-scaled for device scale
      factors. The image returned by |base::ResourceBundle::GetImageNamed|
      will contain multiple |gfx:ImageSkiaReps| for each scale factors. The
      |fallback_to_low_resolution| attribute controls behavior when
      an image file is missing for target scale factor. If true, chrome
      will automatically scale the 1x image to the target scale factor.
      If false, build will fail due to missing resources. This is
      currently set to true for all resources, but the default will
      become false in near future.
@@ skipping 948 matching lines @@
       </if>
       <if expr="is_macosx or is_ios">
         <structure type="chrome_scaled_image" name="IDR_TOOLBAR_SHADE_TOP" file="mac/toolbar_shade_top.png" />
       </if>
       <if expr="toolkit_views or is_macosx or is_ios">
         <structure type="chrome_scaled_image" name="IDR_TOOLS" file="common/browser_tools_normal.png" />
         <structure type="chrome_scaled_image" name="IDR_TOOLS_H" file="common/browser_tools_hover.png" />
         <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" />
       <structure type="chrome_scaled_image" name="IDR_TOOLS_BAR_LOW" file="common/browser_tools_bar_low.png" />
       <structure type="chrome_scaled_image" name="IDR_TOOLS_BAR_MEDIUM" file="common/browser_tools_bar_medium.png" />
       <structure type="chrome_scaled_image" name="IDR_TOOLS_BAR_HIGH" file="common/browser_tools_bar_high.png" />
       <structure type="chrome_scaled_image" name="IDR_TRANSLATE" file="translate.png" />
       <structure type="chrome_scaled_image" name="IDR_TRANSLATE_ACTIVE" file="translate_active.png" />
       <structure type="chrome_scaled_image" name="IDR_UP_ARROW" file="common/up_arrow.png" />
       <structure type="chrome_scaled_image" name="IDR_UPDATE_MENU_SEVERITY_LOW" file="common/update_menu_severity_low.png" />
@@ skipping 34 matching lines @@
       <!-- People search images -->
       <structure type="chrome_scaled_image" name="IDR_PEOPLE_SEARCH_ACTION_EMAIL" file="common/mail.png" />
       <structure type="chrome_scaled_image" name="IDR_PEOPLE_SEARCH_ACTION_EMAIL_HOVER" file="common/mail_hover.png" />
       <structure type="chrome_scaled_image" name="IDR_PEOPLE_SEARCH_ACTION_EMAIL_PRESSED" file="common/mail_pressed.png" />
       <structure type="chrome_scaled_image" name="IDR_PEOPLE_SEARCH_ACTION_CHAT" file="common/chat.png" />
       <structure type="chrome_scaled_image" name="IDR_PEOPLE_SEARCH_ACTION_CHAT_HOVER" file="common/chat_hover.png" />
       <structure type="chrome_scaled_image" name="IDR_PEOPLE_SEARCH_ACTION_CHAT_PRESSED" file="common/chat_pressed.png" />
     </structures>
   </release>
 </grit>