Experiment of three translate bubble UI options

This change introduces two new desktop UI options - TAB and BUTTON_GM2,
to translate bubble for experimentation. The flags has been added to chrome://flags.
Implementation for TAB and BUTTON_GM2 are in progress.
Default is set to existing BUTTON option.
Note that TAB option has been released on IOS and Android.

Change-Id: Icc79269c4364b431797ef3635b773ad5e2ad7fc4
Bug: 963148
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1610567
Commit-Queue: Haohao Wang <hhw@google.com>
Reviewed-by: anthonyvd <anthonyvd@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661182}

chrome/browser/about_flags.cc

@@ -710,6 +710,24 @@ const FeatureEntry::FeatureVariation
         {"12 matches", kOmniboxUIMaxAutocompleteMatches12,
          base::size(kOmniboxUIMaxAutocompleteMatches12), nullptr}};
 
+#if defined(OS_LINUX) || defined(OS_MACOSX) || defined(OS_WIN) || \
+    defined(OS_CHROMEOS)
+const FeatureEntry::FeatureParam kTranslateBubbleUIButton[] = {
+    {language::kTranslateUIBubbleKey, language::kTranslateUIBubbleButtonValue}};
+const FeatureEntry::FeatureParam kTranslateBubbleUITab[] = {
+    {language::kTranslateUIBubbleKey, language::kTranslateUIBubbleTabValue}};
+const FeatureEntry::FeatureParam kTranslateBubbleUIButtonGM2[] = {
+    {language::kTranslateUIBubbleKey,
+     language::kTranslateUIBubbleButtonGM2Value}};
+
+const FeatureEntry::FeatureVariation kTranslateBubbleUIVariations[] = {
+    {"Button", kTranslateBubbleUIButton, base::size(kTranslateBubbleUIButton),
+     nullptr},
+    {"Tab", kTranslateBubbleUITab, base::size(kTranslateBubbleUITab), nullptr},
+    {"Button_GM2", kTranslateBubbleUIButtonGM2,
+     base::size(kTranslateBubbleUIButton), nullptr}};
+#endif  // OS_LINUX || OS_MACOSX || OS_WIN || OS_CHROMEOS
+
 const FeatureEntry::FeatureParam kOmniboxUIVerticalMargin0px[] = {
     {OmniboxFieldTrial::kUIVerticalMarginParam, "0"}};
 const FeatureEntry::FeatureParam kOmniboxUIVerticalMargin2px[] = {
@@ -1462,6 +1480,16 @@ const FeatureEntry kFeatureEntries[] = {
                                     kTranslateForceTriggerOnEnglishVariations,
                                     "OverrideTranslateTriggerInIndia")},
 #endif  // OS_ANDROID
+
+#if defined(OS_LINUX) || defined(OS_MACOSX) || defined(OS_WIN) || \
+    defined(OS_CHROMEOS)
+    {"translate-ui-bubble-options", flag_descriptions::kTranslateBubbleUIName,
+     flag_descriptions::kTranslateBubbleUIDescription, kOsDesktop,
+     FEATURE_WITH_PARAMS_VALUE_TYPE(language::kUseButtonTranslateBubbleUI,
+                                    kTranslateBubbleUIVariations,
+                                    "UseButtonTranslateBubbleUI")},
+#endif  // OS_LINUX || OS_MACOSX || OS_WIN || OS_CHROMEOS
+
 #if BUILDFLAG(ENABLE_NATIVE_NOTIFICATIONS) && !defined(OS_CHROMEOS)
     {"enable-native-notifications",
      flag_descriptions::kNotificationsNativeFlagName,

chrome/browser/flag-metadata.json

@@ -2861,6 +2861,11 @@
     "owners": [ "anthonyvd", "frechette", "chrome-language@google.com" ],
     "expiry_milestone": 78
   },
+  {
+    "name": "translate-ui-bubble-options",
+    "owners": [ "hhw", "anthonyvd", "chrome-language@google.com" ],
+    "expiry_milestone": 78
+  },
   {
     "name": "try-supported-channel-layouts",
     "owners": [ "dalecurtis" ],

chrome/browser/flag_descriptions.cc

@@ -1819,6 +1819,11 @@ const char kTranslateForceTriggerOnEnglishDescription[] =
     "Force the Translate Triggering on English pages experiment to be enabled "
     "with the selected language model active.";
 
+const char kTranslateBubbleUIName[] =
+    "Select which UI to use for translate bubble";
+const char kTranslateBubbleUIDescription[] =
+    "Three bubble options to choose. Existing UI is selected by default";
+
 const char kTreatInsecureOriginAsSecureName[] =
     "Insecure origins treated as secure";
 const char kTreatInsecureOriginAsSecureDescription[] =

chrome/browser/flag_descriptions.h

@@ -1088,6 +1088,9 @@ extern const char kTraceUploadUrlChoiceTesting[];
 extern const char kTranslateForceTriggerOnEnglishName[];
 extern const char kTranslateForceTriggerOnEnglishDescription[];
 
+extern const char kTranslateBubbleUIName[];
+extern const char kTranslateBubbleUIDescription[];
+
 extern const char kTreatInsecureOriginAsSecureName[];
 extern const char kTreatInsecureOriginAsSecureDescription[];
 

chrome/browser/ui/views/translate/translate_bubble_view.cc

@@ -12,6 +12,7 @@
 
 #include "base/i18n/string_compare.h"
 #include "base/memory/singleton.h"
+#include "base/metrics/field_trial_params.h"
 #include "base/metrics/histogram_macros.h"
 #include "base/strings/utf_string_conversions.h"
 #include "build/build_config.h"
@@ -68,7 +69,6 @@ class AdvancedViewContainer : public views::View {
  private:
   DISALLOW_COPY_AND_ASSIGN(AdvancedViewContainer);
 };
-
 }  // namespace
 
 // static
@@ -184,11 +184,30 @@ void TranslateBubbleView::Init() {
       std::make_unique<views::BoxLayout>(views::BoxLayout::kVertical));
 
   should_always_translate_ = model_->ShouldAlwaysTranslate();
-  before_translate_view_ = CreateViewBeforeTranslate();
-  translating_view_ = CreateViewTranslating();
-  after_translate_view_ = CreateViewAfterTranslate();
-  error_view_ = CreateViewError();
-  advanced_view_ = CreateViewAdvanced();
+
+  // Create different view based on user selection in chrome://flags.
+  language::TranslateUIBubbleModel bubble_model_ =
+      language::GetTranslateUIBubbleModel();
+  if (bubble_model_ == language::TranslateUIBubbleModel::BUTTON ||
+      bubble_model_ == language::TranslateUIBubbleModel::DEFAULT) {
+    before_translate_view_ = CreateViewBeforeTranslate();
+    translating_view_ = CreateViewTranslating();
+    after_translate_view_ = CreateViewAfterTranslate();
+    error_view_ = CreateViewError();
+    advanced_view_ = CreateViewAdvanced();
+  } else if (bubble_model_ == language::TranslateUIBubbleModel::TAB) {
+    before_translate_view_ = TabCreateViewBeforeTranslate();
+    translating_view_ = CreateViewTranslating();
+    after_translate_view_ = CreateViewAfterTranslate();
+    error_view_ = CreateViewError();
+    advanced_view_ = CreateViewAdvanced();
+  } else {  // Button
+    before_translate_view_ = CreateViewBeforeTranslate();
+    translating_view_ = CreateViewTranslating();
+    after_translate_view_ = CreateViewAfterTranslate();
+    error_view_ = CreateViewError();
+    advanced_view_ = CreateViewAdvanced();
+  }
 
   AddChildView(before_translate_view_);
   AddChildView(translating_view_);
@@ -624,6 +643,37 @@ views::View* TranslateBubbleView::CreateViewBeforeTranslate() {
   return view;
 }
 
+// This view is invoked before translate if "Tab" is selected under
+// flag translate-ui-bubble-options in chrome://flags.
+views::View* TranslateBubbleView::TabCreateViewBeforeTranslate() {
+  views::View* view = new views::View();
+  views::GridLayout* layout =
+      view->SetLayoutManager(std::make_unique<views::GridLayout>(view));
+
+  ChromeLayoutProvider* provider = ChromeLayoutProvider::Get();
+
+  constexpr int kColumnSetId = 0;
+  views::ColumnSet* cs = layout->AddColumnSet(kColumnSetId);
+  cs->AddPaddingColumn(1.0, 0);
+  cs->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER,
+                views::GridLayout::kFixedSize, views::GridLayout::USE_PREF,
+                views::GridLayout::kFixedSize, 0);
+
+  cs->AddPaddingColumn(
+      views::GridLayout::kFixedSize,
+      provider->GetDistanceMetric(views::DISTANCE_RELATED_BUTTON_HORIZONTAL));
+  cs->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER,
+                views::GridLayout::kFixedSize, views::GridLayout::USE_PREF, 0,
+                0);
+
+  layout->AddPaddingRow(
+      views::GridLayout::kFixedSize,
+      provider->GetDistanceMetric(views::DISTANCE_UNRELATED_CONTROL_VERTICAL));
+
+  layout->StartRow(views::GridLayout::kFixedSize, kColumnSetId);
+  return view;
+}
+
 views::View* TranslateBubbleView::CreateViewTranslating() {
   base::string16 target_language_name =
       model_->GetLanguageNameAt(model_->GetTargetLanguageIndex());

chrome/browser/ui/views/translate/translate_bubble_view.h

@@ -19,6 +19,7 @@
 #include "chrome/browser/ui/translate/translate_bubble_test_utils.h"
 #include "chrome/browser/ui/translate/translate_bubble_view_state_transition.h"
 #include "chrome/browser/ui/views/location_bar/location_bar_bubble_delegate_view.h"
+#include "components/language/core/common/language_experiments.h"
 #include "components/translate/core/common/translate_errors.h"
 #include "content/public/browser/web_contents_observer.h"
 #include "ui/base/models/simple_menu_model.h"
@@ -194,21 +195,27 @@ class TranslateBubbleView : public LocationBarBubbleDelegateView,
   void UpdateChildVisibilities();
 
   // Creates the 'before translate' view. Caller takes ownership of the returned
-  // view.
+  // view. Three options depending on UI selection in
+  // kUseButtonTranslateBubbleUI.
   views::View* CreateViewBeforeTranslate();
+  views::View* TabCreateViewBeforeTranslate();
 
   // Creates the 'translating' view. Caller takes ownership of the returned
-  // view.
+  // view. Three options depending on UI selection in
+  // kUseButtonTranslateBubbleUI.
   views::View* CreateViewTranslating();
 
   // Creates the 'after translate' view. Caller takes ownership of the returned
-  // view.
+  // view. Three options depending on UI selection in
+  // kUseButtonTranslateBubbleUI.
   views::View* CreateViewAfterTranslate();
 
   // Creates the 'error' view. Caller takes ownership of the returned view.
+  // Three options depending on UI selection in kUseButtonTranslateBubbleUI.
   views::View* CreateViewError();
 
   // Creates the 'advanced' view. Caller takes ownership of the returned view.
+  // Three options depending on UI selection in kUseButtonTranslateBubbleUI.
   views::View* CreateViewAdvanced();
 
   // Get the current always translate checkbox

components/language/core/common/language_experiments.cc

@@ -23,7 +23,9 @@ const base::Feature kImprovedGeoLanguageData{"ImprovedGeoLanguageData",
                                              base::FEATURE_ENABLED_BY_DEFAULT};
 const base::Feature kUseFluentLanguageModel{"UseFluentLanguageModel",
                                             base::FEATURE_DISABLED_BY_DEFAULT};
-
+// Base feature for Translate desktop UI experiment
+const base::Feature kUseButtonTranslateBubbleUI{
+    "UseButtonTranslateBubbleUI", base::FEATURE_DISABLED_BY_DEFAULT};
 // Params:
 const char kBackoffThresholdKey[] = "backoff_threshold";
 const char kOverrideModelKey[] = "override_model";
@@ -32,6 +34,12 @@ const char kOverrideModelHeuristicValue[] = "heuristic";
 const char kOverrideModelGeoValue[] = "geo";
 const char kOverrideModelDefaultValue[] = "default";
 
+// Params for Translate Desktop UI experiment
+const char kTranslateUIBubbleKey[] = "translate_ui_bubble_style";
+const char kTranslateUIBubbleButtonValue[] = "button";
+const char kTranslateUIBubbleTabValue[] = "tab";
+const char kTranslateUIBubbleButtonGM2Value[] = "button_gm2";
+
 OverrideLanguageModel GetOverrideLanguageModel() {
   std::map<std::string, std::string> params;
   bool should_override_model = base::GetFieldTrialParamsByFeature(
@@ -93,4 +101,25 @@ bool IsForceTriggerBackoffThresholdReached(int force_trigger_count) {
   return force_trigger_count >= threshold;
 }
 
+TranslateUIBubbleModel GetTranslateUIBubbleModel() {
+  std::map<std::string, std::string> params;
+  if (base::GetFieldTrialParamsByFeature(language::kUseButtonTranslateBubbleUI,
+                                         &params)) {
+    if (params[language::kTranslateUIBubbleKey] ==
+        language::kTranslateUIBubbleButtonValue) {
+      return language::TranslateUIBubbleModel::BUTTON;
+    } else if (params[language::kTranslateUIBubbleKey] ==
+               language::kTranslateUIBubbleTabValue) {
+      return language::TranslateUIBubbleModel::TAB;
+    } else if (params[language::kTranslateUIBubbleKey] ==
+               language::kTranslateUIBubbleButtonGM2Value) {
+      return language::TranslateUIBubbleModel::BUTTON_GM2;
+    } else {
+      return language::TranslateUIBubbleModel::DEFAULT;
+    }
+  } else {
+    return language::TranslateUIBubbleModel::DEFAULT;
+  }
+}
+
 }  // namespace language

components/language/core/common/language_experiments.h

@@ -33,6 +33,15 @@ extern const char kOverrideModelGeoValue[];
 extern const char kOverrideModelDefaultValue[];
 extern const char kBackoffThresholdKey[];
 
+// This feature uses the existing UI for translate bubble.
+extern const base::Feature kUseButtonTranslateBubbleUI;
+
+// These feature params controls what translate bubble UI to display.
+extern const char kTranslateUIBubbleKey[];
+extern const char kTranslateUIBubbleButtonValue[];
+extern const char kTranslateUIBubbleTabValue[];
+extern const char kTranslateUIBubbleButtonGM2Value[];
+
 enum class OverrideLanguageModel {
   DEFAULT,
   FLUENT,
@@ -40,6 +49,14 @@ enum class OverrideLanguageModel {
   GEO,
 };
 
+// Options for the translate desktop UI experiment.
+enum class TranslateUIBubbleModel {
+  DEFAULT,
+  BUTTON,
+  TAB,
+  BUTTON_GM2,
+};
+
 // Returns which language model to use depending on the state of all Language
 // experiments.
 OverrideLanguageModel GetOverrideLanguageModel();
@@ -60,6 +77,9 @@ bool ShouldPreventRankerEnforcementInIndia(int force_trigger_count);
 // should stop being taken into account.
 bool IsForceTriggerBackoffThresholdReached(int force_trigger_count);
 
+// Returns which translate bubble UI to use depending on selection in
+// kTranslateUIBubbleKey.
+TranslateUIBubbleModel GetTranslateUIBubbleModel();
 }  // namespace language
 
 #endif  // COMPONENTS_LANGUAGE_CORE_COMMON_LANGUAGE_EXPERIMENTS_H_

tools/metrics/histograms/enums.xml

@@ -32995,6 +32995,7 @@ Called by update_gpu_driver_bug_workaround_entries.py.-->
   <int value="-1736075054" label="EnableFullscreenAppList:enabled"/>
   <int value="-1735643253" label="enable-display-list-2d-canvas"/>
   <int value="-1734254845" label="ash-enable-night-light"/>
+  <int value="-1732888954" label="UseButtonTranslateBubbleUI:enabled"/>
   <int value="-1732561795" label="ConsistentOmniboxGeolocation:enabled"/>
   <int value="-1731149013" label="AndroidMessagesIntegration:enabled"/>
   <int value="-1729926412" label="enable-webusb-notifications"/>
@@ -34981,6 +34982,7 @@ from previous Chrome versions.
   <int value="1277386636" label="QueryInOmnibox:disabled"/>
   <int value="1279584261" label="enable-carrier-switching"/>
   <int value="1280614081" label="show-overdraw-feedback"/>
+  <int value="1281471853" label="UseButtonTranslateBubbleUI:disabled"/>
   <int value="1283908088" label="ImprovedLanguageSettings:disabled"/>
   <int value="1283956865" label="force-tablet-mode"/>
   <int value="1283960113" label="disable-fixed-position-compositing"/>