Adjust HaTS UI with new spec

This CL contains the following adjustments:
-- Remove Chrome logo from bubble UI;
-- Change bubble UI title to "Help us improve Chrome/Chromium";
-- Hide Chrome logo in survey content;
-- Add auto dismiss survey dialog after two seconds;
-- Change bubble to NOT close on deactivation so it won't be closed
by other bubbles such as extension popup;

BUG=979530

Change-Id: Ie4020d0b0f07d1cb0aa488e1cd02895542a40dfe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1695162Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Allen Bauer <kylixrd@chromium.org>
Commit-Queue: Wei Li <weili@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676178}

chrome/app/chromium_strings.grd

@@ -1270,6 +1270,12 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@example.com</
       <message name="IDS_DESKTOP_MEDIA_PICKER_TITLE_WEB_CONTENTS_ONLY" desc="Title for the window picker dialog shown when desktop capture of a tab is requested by an app.">
         Share a Chromium tab
       </message>
+      <!-- User happiness tracking survey UI -->
+      <if expr="not is_android">
+        <message name="IDS_HATS_BUBBLE_TITLE" translateable="false" desc="The title of Happiness Tracking Survey's invitation banner, it invites users to take a survey">
+          Help us improve Chromium
+        </message>
+      </if>
     </messages>
   </release>
 </grit>

chrome/app/generated_resources.grd

@@ -9859,9 +9859,6 @@ Please help our engineers fix this problem. Tell us what happened right before y
       <message name="IDS_HATS_BUBBLE_OK_LABEL" translateable="false" desc="Button label on Happiness Tracking Survey's invitation banner, clicking the button gives the user's consent on taking the survey.">
         Take Survey
       </message>
-      <message name="IDS_HATS_BUBBLE_TITLE" translateable="false" desc="The title of Happiness Tracking Survey's invitation banner, it invites users to take a survey">
-        Take a quick survey
-      </message>
       <message name="IDS_HATS_BUBBLE_TEXT" translateable="false" desc="The text in Happiness Tracking Survey's invitation banner, it explains why users should take our survey.">
         Your feedback is important to us.
       </message>

chrome/app/google_chrome_strings.grd

@@ -1290,6 +1290,13 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@example.com</
       <message name="IDS_DESKTOP_MEDIA_PICKER_TITLE_WEB_CONTENTS_ONLY" desc="Title for the window picker dialog shown when desktop capture of a tab is requested by an app.">
         Share a Chrome tab
       </message>
+
+      <!-- User happiness tracking survey UI -->
+      <if expr="not is_android">
+        <message name="IDS_HATS_BUBBLE_TITLE" translateable="false" desc="The title of Happiness Tracking Survey's invitation banner, it invites users to take a survey">
+          Help us improve Chrome
+        </message>
+      </if>
     </messages>
   </release>
 </grit>

chrome/browser/resources/hats/hats.html

@@ -36,8 +36,21 @@
 
         /* Display the done button at the end of the survey. */
         document.getElementById('id-done-button').hidden = false;
+
+        /* Auto dismiss after two seconds. */
+        setTimeout(function(){ window.close(); }, 2000);
       };
 
+      /**
+       * Called after the survey HTML is injected into the page.
+       */
+      function onSurveyShown() {
+        /* Don't show logo on the survey */
+        const elements = document.getElementsByClassName('t402-prompt-logo');
+        for (const element of elements)
+          element.style.display = 'none';
+      }
+
       document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('id-link-done-button').onclick = function() {
           window.close();

chrome/browser/ui/views/hats/hats_bubble_view.cc

@@ -19,7 +19,6 @@
 #include "content/public/browser/web_contents.h"
 #include "ui/base/buildflags.h"
 #include "ui/base/l10n/l10n_util.h"
-#include "ui/base/resource/resource_bundle.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/view.h"
@@ -53,6 +52,10 @@ HatsBubbleView::HatsBubbleView(AppMenuButton* anchor_button,
       browser_(browser) {
   chrome::RecordDialogCreation(chrome::DialogIdentifier::HATS_BUBBLE);
 
+  set_close_on_deactivate(false);
+  set_parent_window(parent_view);
+  set_margins(gfx::Insets());
+
   auto* layout_manager = SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kHorizontal, gfx::Insets(10, 20, 10, 0),
       10));
@@ -61,20 +64,11 @@ HatsBubbleView::HatsBubbleView(AppMenuButton* anchor_button,
   layout_manager->set_main_axis_alignment(
       views::BoxLayout::MainAxisAlignment::kStart);
 
-  // Add Logo icon.
-  auto icon_view = std::make_unique<views::ImageView>();
-  icon_view->SetImage(ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
-      IDR_PRODUCT_LOGO_32));
-  AddChildView(std::move(icon_view));
-
   auto message = std::make_unique<views::Label>(
       l10n_util::GetStringUTF16(IDS_HATS_BUBBLE_TEXT));
   message->SetHorizontalAlignment(gfx::ALIGN_TO_HEAD);
   AddChildView(std::move(message));
 
-  set_parent_window(parent_view);
-  set_margins(gfx::Insets());
-
   views::BubbleDialogDelegateView::CreateBubble(this);
 
   instance_ = this;