Use vector images for ClickToCall illustration.

This replaces the png versions with vector images. In a local debug
build this saves about 15kb. Both vector images have the same content
except their colors. This could potentially be further optimized using
alpha blending so we only need the image once and it blends onto the
background.

Bug: 1013099,999976
Change-Id: Ic56b40c87dc5011a9babba787a3545b42df5d459
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1863025Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Mitsuru Oshima (slow) <oshima@chromium.org>
Commit-Queue: Richard Knoll <knollr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#709399}

chrome/app/theme/theme_resources.grd

@@ -79,8 +79,6 @@
         <structure type="chrome_scaled_image" name="IDR_BUTTON_USER_IMAGE_TAKE_PHOTO" file="cros/take_photo.png" />
       </if>
       <if expr="not is_android">
-        <structure type="chrome_scaled_image" name="IDR_CLICK_TO_CALL_ILLUSTRATION_LIGHT" file="common/click_to_call_illustration_light.png" />
-        <structure type="chrome_scaled_image" name="IDR_CLICK_TO_CALL_ILLUSTRATION_DARK" file="common/click_to_call_illustration_dark.png" />
       <!-- Note: Tab close buttons are not traditional buttons.  Tab close buttons
            fill a background with a color from the theme and tile IDR_CLOSE_1 over it.
            See chrome/browser/ui/views/tabs/tab.cc -->

chrome/app/vector_icons/BUILD.gn

@@ -28,6 +28,8 @@ aggregate_vector_icons("chrome_vector_icons") {
     "caret_down.icon",
     "caret_up.icon",
     "certificate.icon",
+    "click_to_call_illustration.icon",
+    "click_to_call_illustration_dark.icon",
     "close_all.icon",
     "code.icon",
 

chrome/browser/sharing/click_to_call/click_to_call_ui_controller.cc

@@ -8,13 +8,13 @@
 
 #include "base/callback.h"
 #include "base/strings/utf_string_conversions.h"
+#include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/browser/external_protocol/external_protocol_handler.h"
 #include "chrome/browser/sharing/click_to_call/click_to_call_utils.h"
 #include "chrome/browser/sharing/sharing_constants.h"
 #include "chrome/browser/sharing/sharing_dialog.h"
 #include "chrome/browser/shell_integration.h"
 #include "chrome/browser/ui/browser.h"
-#include "chrome/grit/theme_resources.h"
 #include "components/sync_device_info/device_info.h"
 #include "components/vector_icons/vector_icons.h"
 #include "content/public/browser/web_contents.h"
@@ -173,8 +173,8 @@ SharingDialogData ClickToCallUiController::CreateDialogData(
 
   // Do not add the header image for error dialogs.
   if (dialog_type != SharingDialogType::kErrorDialog) {
-    data.header_image_light = IDR_CLICK_TO_CALL_ILLUSTRATION_LIGHT;
-    data.header_image_dark = IDR_CLICK_TO_CALL_ILLUSTRATION_DARK;
+    data.header_image_light = &kClickToCallIllustrationIcon;
+    data.header_image_dark = &kClickToCallIllustrationDarkIcon;
   }
 
   data.help_text_id =

chrome/browser/sharing/sharing_dialog_data.h

@@ -18,6 +18,10 @@
 
 class SharingDialog;
 
+namespace gfx {
+struct VectorIcon;
+}  // namespace gfx
+
 // All data required to display a SharingDialog.
 struct SharingDialogData {
  public:
@@ -36,8 +40,8 @@ struct SharingDialogData {
   base::string16 error_text;
   int help_text_id = 0;
   int help_link_text_id = 0;
-  int header_image_light = 0;
-  int header_image_dark = 0;
+  const gfx::VectorIcon* header_image_light = nullptr;
+  const gfx::VectorIcon* header_image_dark = nullptr;
   int origin_text_id = 0;
   base::Optional<url::Origin> initiating_origin;
 

chrome/browser/ui/views/sharing/sharing_dialog_view.cc

@@ -111,20 +111,17 @@ std::unique_ptr<views::View> CreateOriginView(const SharingDialogData& data) {
   return label;
 }
 
-std::unique_ptr<views::View> MaybeCreateImageView(int image_id) {
-  if (!image_id)
+std::unique_ptr<views::View> MaybeCreateImageView(
+    const gfx::VectorIcon* image) {
+  if (!image)
     return nullptr;
 
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-  const gfx::ImageSkia* image = rb.GetNativeImageNamed(image_id).ToImageSkia();
-  gfx::Size image_size(image->width(), image->height());
-  constexpr int kHeaderImageHeight = 100;
-  const int image_width = image->width() * kHeaderImageHeight / image->height();
-  image_size.SetToMin(gfx::Size(image_width, kHeaderImageHeight));
+  constexpr gfx::Size kHeaderImageSize(320, 100);
 
   auto image_view = std::make_unique<NonAccessibleImageView>();
-  image_view->SetImageSize(image_size);
-  image_view->SetImage(*image);
+  image_view->SetPreferredSize(kHeaderImageSize);
+  image_view->SetImage(gfx::CreateVectorIcon(*image, gfx::kPlaceholderColor));
+  image_view->SetVerticalAlignment(views::ImageView::Alignment::kLeading);
   return image_view;
 }
 
@@ -227,11 +224,14 @@ void SharingDialogView::MaybeShowHeaderImage() {
   if (!frame_view)
     return;
 
-  int image_id = color_utils::IsDark(frame_view->GetBackgroundColor())
-                     ? data_.header_image_dark
-                     : data_.header_image_light;
+  // TODO(crbug.com/1013099): Merge both images using alpha blending so they
+  // work on any background color.
+  const gfx::VectorIcon* image =
+      color_utils::IsDark(frame_view->GetBackgroundColor())
+          ? data_.header_image_dark
+          : data_.header_image_light;
 
-  frame_view->SetHeaderView(MaybeCreateImageView(image_id));
+  frame_view->SetHeaderView(MaybeCreateImageView(image));
 }
 
 void SharingDialogView::AddedToWidget() {