ChromeBeta: Formatting adjustments

Mocks:
https://docs.google.com/presentation/d/1gJEE-qL8XCst4gIQaAXt0fmlxlHIg7HWtcw0l_ISq-s/edit#slide=id.ga480910b3a_0_40

Notes:
- We are changing the name from Chrome Labs to Chrome Beta; "Labs" and
the top area of bubble above experiments will be changed.

- Icons will be added in a later CL.

Bug: 1145666
Change-Id: I344a89efd89aff4f5fd8c782df3e21f6bdb0d419
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2616490
Commit-Queue: Elaine Chien <elainechien@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841748}

chrome/app/chromium_strings.grd

@@ -1231,6 +1231,11 @@ Chromium is unable to recover your settings.
           Chromium OS can always restore your apps & pages after reboot without asking every time.
         </message>
       </if>
+
+      <!-- ChromeBeta bubble -->
+      <message name="IDS_CHROMEBETA_RELAUNCH_FOOTER_MESSAGE" desc="Text that shows in the footer of the Chrome Beta bubble when relaunch is needed for changes to take effect.">
+        Your changes will take effect the next time you relaunch Chromium.
+      </message>
     </messages>
   </release>
 </grit>

chrome/app/chromium_strings_grd/IDS_CHROMEBETA_RELAUNCH_FOOTER_MESSAGE.png.sha1

+9fe5fe3f47d4059771289e9db8419e8e86cf26cc
\ No newline at end of file

chrome/app/generated_resources.grd

@@ -11103,6 +11103,12 @@ Please help our engineers fix this problem. Tell us what happened right before y
              desc="Menu item to launch the Chrome watch feature">
       Watch
     </message>
+
+    <!-- ChromeBeta bubble -->
+    <message name="IDS_CHROMEBETA_RELAUNCH_BUTTON_LABEL"
+             desc="Label on the button in the footer of the Chrome Beta bubble which will relaunch the browser.">
+      Relaunch
+    </message>
   </messages>
 </release>
 </grit>

chrome/app/generated_resources_grd/IDS_CHROMEBETA_RELAUNCH_BUTTON_LABEL.png.sha1

+5d829aaebb289b5e55b0c4e88dc0e5ca9c8549c3
\ No newline at end of file

chrome/app/google_chrome_strings.grd

@@ -1247,6 +1247,11 @@ Google Chrome is unable to recover your settings.
           Chrome OS can always restore your apps & pages after reboot without asking every time.
         </message>
       </if>
+
+      <!-- ChromeBeta bubble -->
+      <message name="IDS_CHROMEBETA_RELAUNCH_FOOTER_MESSAGE" desc="Text that shows in the footer of the Chrome Beta bubble when relaunch is needed for changes to take effect.">
+        Your changes will take effect the next time you relaunch Google Chrome.
+      </message>
     </messages>
   </release>
 </grit>

chrome/app/google_chrome_strings_grd/IDS_CHROMEBETA_RELAUNCH_FOOTER_MESSAGE.png.sha1

+9fe5fe3f47d4059771289e9db8419e8e86cf26cc
\ No newline at end of file

chrome/browser/ui/views/toolbar/chrome_labs_bubble_view.cc

@@ -11,12 +11,15 @@
 #include "chrome/browser/lifetime/application_lifetime.h"
 #include "chrome/browser/ui/webui/flags/flags_ui.h"
 #include "chrome/grit/generated_resources.h"
+#include "chrome/grit/google_chrome_strings.h"
 #include "components/flags_ui/pref_service_flags_storage.h"
+#include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/flex_layout.h"
+#include "ui/views/layout/flex_layout_types.h"
 #include "ui/views/layout/layout_provider.h"
 
 namespace {
@@ -70,24 +73,31 @@ class ChromeLabsFooter : public views::View {
  public:
   ChromeLabsFooter() {
     SetLayoutManager(std::make_unique<views::FlexLayout>())
-        ->SetOrientation(views::LayoutOrientation::kVertical);
+        ->SetOrientation(views::LayoutOrientation::kVertical)
+        .SetCrossAxisAlignment(views::LayoutAlignment::kStart);
     AddChildView(
         views::Builder<views::Label>()
             .CopyAddressTo(&restart_label_)
-            .SetText(base::ASCIIToUTF16(
-                "Your changes will take effect the next time you "
-                "relaunch Google Chrome."))
+            .SetText(l10n_util::GetStringUTF16(
+                IDS_CHROMEBETA_RELAUNCH_FOOTER_MESSAGE))
             .SetMultiLine(true)
             .SetHorizontalAlignment(gfx::ALIGN_LEFT)
             .SetProperty(views::kFlexBehaviorKey,
                          views::FlexSpecification(
                              views::MinimumFlexSizeRule::kPreferred,
                              views::MaximumFlexSizeRule::kPreferred, true))
+            .SetBorder(views::CreateEmptyBorder(
+                gfx::Insets(0, 0,
+                            views::LayoutProvider::Get()->GetDistanceMetric(
+                                views::DISTANCE_RELATED_CONTROL_VERTICAL),
+                            0)))
             .Build());
     AddChildView(views::Builder<views::MdTextButton>()
                      .CopyAddressTo(&restart_button_)
                      .SetCallback(base::BindRepeating(&chrome::AttemptRestart))
-                     .SetText(base::ASCIIToUTF16("Relaunch"))
+                     .SetText(l10n_util::GetStringUTF16(
+                         IDS_CHROMEBETA_RELAUNCH_BUTTON_LABEL))
+                     .SetProminent(true)
                      .Build());
     SetBackground(views::CreateThemedSolidBackground(
         this, ui::NativeTheme::kColorId_BubbleFooterBackground));
@@ -153,15 +163,16 @@ ChromeLabsBubbleView::ChromeLabsBubbleView(
   flags_state_ = about_flags::GetCurrentFlagsState();
 
   menu_item_container_ = AddChildView(
-      views::Builder<views::View>()
+      views::Builder<views::FlexLayoutView>()
+          .SetOrientation(views::LayoutOrientation::kVertical)
           .SetProperty(views::kFlexBehaviorKey,
                        views::FlexSpecification(
                            views::MinimumFlexSizeRule::kScaleToZero,
                            views::MaximumFlexSizeRule::kPreferred, true))
+          .SetBorder(views::CreateEmptyBorder(
+              views::LayoutProvider::Get()->GetInsetsMetric(
+                  views::INSETS_DIALOG)))
           .Build());
-  menu_item_container_->SetLayoutManager(std::make_unique<views::FlexLayout>())
-      ->SetOrientation(views::LayoutOrientation::kVertical)
-      .SetDefault(views::kMarginsKey, gfx::Insets(10));
 
   // Create each lab item.
   const std::vector<LabInfo>& all_labs = model_->GetLabInfo();

chrome/browser/ui/views/toolbar/chrome_labs_bubble_view.h

@@ -11,11 +11,9 @@
 #include "components/flags_ui/flags_state.h"
 #include "components/flags_ui/flags_storage.h"
 #include "ui/views/bubble/bubble_dialog_delegate_view.h"
+#include "ui/views/layout/flex_layout_view.h"
 
 // TODO(elainechien): Use composition instead of inheritance.
-// TODO(elainechien): Add screenshots and strings for translation when UI is
-// finished.
-// TODO(elainechien): Formatting for items in child views.
 class ChromeLabsBubbleView : public views::BubbleDialogDelegateView {
  public:
   static void Show(views::View* anchor_view,
@@ -54,7 +52,7 @@ class ChromeLabsBubbleView : public views::BubbleDialogDelegateView {
   flags_ui::FlagsState* flags_state_;
 
   // This view will hold all the child lab items.
-  views::View* menu_item_container_;
+  views::FlexLayoutView* menu_item_container_;
 
   std::unique_ptr<ChromeLabsBubbleViewModel> model_;
 

chrome/browser/ui/views/toolbar/chrome_labs_item_view.cc

@@ -3,11 +3,14 @@
 // found in the LICENSE file.
 
 #include "chrome/browser/ui/views/toolbar/chrome_labs_item_view.h"
+#include "chrome/browser/ui/views/chrome_layout_provider.h"
+#include "chrome/browser/ui/views/chrome_typography.h"
 #include "chrome/browser/ui/views/toolbar/chrome_labs_bubble_view_model.h"
 #include "ui/base/models/combobox_model.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/flex_layout.h"
 #include "ui/views/layout/flex_layout_types.h"
+#include "ui/views/layout/layout_provider.h"
 
 class LabsComboboxModel : public ui::ComboboxModel {
  public:
@@ -39,21 +42,35 @@ ChromeLabsItemView::ChromeLabsItemView(
     : feature_entry_(feature_entry) {
   SetLayoutManager(std::make_unique<views::FlexLayout>())
       ->SetOrientation(views::LayoutOrientation::kVertical)
-      .SetDefault(views::kMarginsKey, gfx::Insets(10));
+      .SetCrossAxisAlignment(views::LayoutAlignment::kStart);
+  SetBorder(views::CreateEmptyBorder(
+      gfx::Insets(ChromeLayoutProvider::Get()->GetDistanceMetric(
+                      DISTANCE_CONTROL_LIST_VERTICAL),
+                  0)));
+
   AddChildView(views::Builder<views::Label>()
+                   .SetTextContext(views::style::CONTEXT_DIALOG_BODY_TEXT)
                    .SetText(lab.visible_name)
                    .SetHorizontalAlignment(gfx::ALIGN_LEFT)
                    .Build());
   AddChildView(
       views::Builder<views::Label>()
           .SetText(lab.visible_description)
+          .SetTextContext(ChromeTextContext::CONTEXT_DIALOG_BODY_TEXT_SMALL)
+          .SetTextStyle(views::style::STYLE_SECONDARY)
           .SetMultiLine(true)
           .SetHorizontalAlignment(gfx::ALIGN_LEFT)
           .SetProperty(views::kFlexBehaviorKey,
                        views::FlexSpecification(
                            views::MinimumFlexSizeRule::kPreferred,
                            views::MaximumFlexSizeRule::kPreferred, true))
+          .SetBorder(views::CreateEmptyBorder(
+              gfx::Insets(0, 0,
+                          views::LayoutProvider::Get()->GetDistanceMetric(
+                              views::DISTANCE_RELATED_CONTROL_VERTICAL),
+                          0)))
           .Build());
+
   AddChildView(views::Builder<views::Combobox>()
                    .CopyAddressTo(&lab_state_combobox_)
                    .SetOwnedModel(std::make_unique<LabsComboboxModel>(