[waffle]Adapt main page ui based on mocks

Smaller screen demo: https://drive.google.com/file/d/15ESnPNmMr7oQa3G-RX8QTQwXrMAun0nj/view?usp=sharing Screenshot: http://b/280753754#comment31 Bug: b/280753754 Change-Id: If717505e2383a6796e969cd88f19588b7dd41a3e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4767721 Reviewed-by: Jens Mueller <muellerj@google.com> Commit-Queue: Jack Yammine <jyammine@google.com> Reviewed-by: Nicolas Dossou-Gbété <dgn@chromium.org> Auto-Submit: Jack Yammine <jyammine@google.com> Cr-Commit-Position: refs/heads/main@{#1187216}
chromium · Aug 23, 2023 · 8db5149 · 8db5149
1 parent d60dc46
commit 8db5149
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 70 deletions.
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
@@ -15915,7 +15915,7 @@ Please help our engineers fix this problem. Tell us what happened right before y
       </message>
       <message name="IDS_SEARCH_ENGINE_CHOICE_BUTTON_TITLE" desc="The title of the button of the Search Engine Choice page."
         translateable="false">
-        Button
+        Lorem ipsum
       </message>
       <message name="IDS_SEARCH_ENGINE_CHOICE_INFO_DIALOG_TITLE" desc="The title of the info dialog of the Search Engine Choice page."
         translateable="false">

diff --git a/chrome/browser/resources/search_engine_choice/app.html b/chrome/browser/resources/search_engine_choice/app.html
@@ -1,34 +1,25 @@
-<style>
+<style include="cr-icons tangible-sync-style-shared">
   :host {
     color: var(--cr-primary-text-color);
   }
 
-  .left-illustration,
-  .right-illustration {
-    position: absolute;
-    top: 0;
-    width: 20vw;
-  }
-
-  .left-illustration {
+  .tangible-sync-style-left-banner {
     content: url(images/left_illustration.svg);
-    left: 0;
   }
 
-  .right-illustration {
+  .tangible-sync-style-right-banner {
     content: url(images/right_illustration.svg);
-    right: 0;
   }
 
-  .button {
+  cr-button {
     bottom: 0;
     height: unset;
-    margin: 25px;
+    margin: 40px;
     /* The max-width is needed to stop the button from overlapping with
      the choice list. The exact value will be updated once the mocks
      are final. */
     max-width: 115px;
-    position: absolute;
+    position: fixed;
     right: 0;
   }
 
@@ -42,31 +33,35 @@
     display: flex;
     flex-direction: column;
     margin: auto;
-    max-width: 472px;
+    max-width: 522px;
     text-align: center;
   }
 
-  .title {
-    font-weight: 400;
-    margin-top: 68px;
+  .tangible-sync-style .title {
+    margin-bottom: 12px;
   }
 
-  .subtitle {
-    color: var(--cr-seconday-text-color);
-    font-size: 0.88rem;
-    line-height: 22px;
+  .tangible-sync-style .subtitle {
+    line-height: 30px;
+    margin: 12px 0 40px;
   }
 
-  .image-placeholder {
-    background-color: blue;
-    height: 70px;
-    width: 250px;
+  .omnibox {
+    --omnibox-height: 48px;
+    align-items: center;
+    border: 1px dashed var(--google-grey-300);
+    border-radius: calc(var(--omnibox-height) / 2);
+    display: flex;
+    flex-direction: row;
+    height: var(--omnibox-height);
+    width: 300px;
   }
 
-  .choice-list {
+  cr-radio-group {
     display: flex;
     flex-direction: column;
     gap: 1px;
+    width: 500px;
   }
 
   .choice {
@@ -77,21 +72,25 @@
   }
 
   .choice-icon {
+    --choice-icon-height: 24px;
     background-color: green;
-    height: 24px;
-    width: 24px;
+    border-radius: calc(var(--choice-icon-height) / 2);
+    height: var(--choice-icon-height);
+    width: var(--choice-icon-height);
   }
 
-  .choice-text {
-    font-size: 0.88rem;
+  .choice-title {
+    font-family: Roboto;
+    font-size: 0.875rem;
+    font-weight: 400;
     line-height: 20px;
   }
 
   cr-radio-button {
-    background-color: var(--google-grey-200);
-    height: 24px;
+    --cr-radio-button-size: 20px;
+    background-color: var(--google-grey-100);
+    border-radius: 2px;
     padding: 16px 24px;
-    width: 424px;
   }
 
   cr-radio-button:first-of-type {
@@ -104,38 +103,86 @@
     border-bottom-right-radius: 24px;
   }
 
+  .product-logo {
+    height: 48px;
+    margin-top: 132px;
+    width: 48px;
+  }
+
+  iron-icon {
+    --iron-icon-fill-color: var(--google-blue-700);
+    margin: 0 12px 0 15px;
+  }
+
+  .hint-placeholder {
+    background: var(--google-grey-100);
+    border-radius: 12px;
+    height: 12px;
+    width: 100px;
+  }
+
+  .info-link {
+    color: var(--google-blue-600);
+  }
+
   @media (prefers-color-scheme: dark) {
-    .left-illustration {
+    .tangible-sync-style-left-banner {
       content: url(images/left_illustration_dark.svg);
     }
 
-    .right-illustration {
+    .tangible-sync-style-right-banner {
       content: url(images/right_illustration_dark.svg);
     }
   }
+
+  /* We need to override the values from tangible-sync-style. The dialog
+   initially sizes itself to height=300 and width=1077 then resizes its
+   height based on the content height.
+   The media query is being called at the first resize (1077 x 300), changing
+   the content size and then making the dialog size itself based on that
+   content. We will handle this case when we implement the small size dialog
+   UI. */
+  @media screen and ((max-width: 780px) or (max-height: 600px)) {
+  .tangible-sync-style .title {
+    font-size: 2.25rem;
+    line-height: 44px;
+  }
+
+  .tangible-sync-style .subtitle {
+    font-size: 1.25rem;
+    line-height: 30px;
+  }
+}
 </style>
 
-<img class="left-illustration" alt="">
-<img class="right-illustration" alt="">
-<div class="content-container">
+<img class="tangible-sync-style-left-banner" alt="">
+<img class="tangible-sync-style-right-banner" alt="">
+<div class="content-container tangible-sync-style">
+  <img class="product-logo" src="images/product-logo.svg"
+      alt="$i18n{productLogoAltText}">
   <h1 class="title">$i18n{title}</h1>
-  <div class="image-placeholder"></div>
+  <div class="omnibox">
+    <iron-icon icon="cr:search"></iron-icon>
+    <div class="hint-placeholder"></div>
+  </div>
   <p class="subtitle">
     $i18n{subtitle}
-    <a href="" on-click="onLinkClicked_">$i18n{subtitleInfoLink}</a>
+    <a class="info-link" href="" on-click="onLinkClicked_">
+      $i18n{subtitleInfoLink}
+    </a>
   </p>
-  <cr-radio-group class="choice-list">
+  <cr-radio-group>
     <template is="dom-repeat" items="[[choiceList_]]">
       <cr-radio-button class="label-first" name="[[item.id]]">
         <div class="choice">
           <div class="choice-icon"></div>
-          <div class="choice-text">[[item.name]]</div>
+          <div class="choice-title">[[item.name]]</div>
         </div>
       </cr-radio-button>
     </template>
   </cr-radio-group>
 </div>
-<cr-button class="button action-button" disabled>
+<cr-button class="action-button" disabled>
   $i18n{buttonText}
 </cr-button>
 

diff --git a/chrome/browser/resources/search_engine_choice/app.ts b/chrome/browser/resources/search_engine_choice/app.ts
@@ -2,12 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://search-engine-choice/tangible_sync_style_shared.css.js';
 import 'chrome://resources/cr_components/localized_link/localized_link.js';
 import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 import 'chrome://resources/cr_elements/cr_radio_group/cr_radio_group.js';
 import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.js';
+import 'chrome://resources/cr_elements/cr_icons.css.js';
+import 'chrome://resources/cr_elements/icons.html.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './strings.m.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';

diff --git a/chrome/browser/resources/search_engine_choice/search_engine_choice.html b/chrome/browser/resources/search_engine_choice/search_engine_choice.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
-  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   <style>
     body {
       margin: 0;

diff --git a/chrome/browser/ui/search_engine_choice/search_engine_choice_tab_helper.h b/chrome/browser/ui/search_engine_choice/search_engine_choice_tab_helper.h
@@ -40,6 +40,11 @@ class SearchEngineChoiceTabHelper
 // `chrome/browser/ui/views/search_engine_choice/search_engine_choice_dialog_view.cc`
 // because there isn't a dependency between `chrome/browser/ui/` and
 // `chrome/browser/ui/views/`.
-void ShowSearchEngineChoiceDialog(Browser& browser);
+// `boundary_dimensions` can be set to specify an upper bound for dialog's width
+// and height. Leaving it empty will make the dialog use the window size
+// as upper bound.
+void ShowSearchEngineChoiceDialog(
+    Browser& browser,
+    absl::optional<gfx::Size> boundary_dimensions = absl::nullopt);
 
 #endif  // CHROME_BROWSER_UI_SEARCH_ENGINE_CHOICE_SEARCH_ENGINE_CHOICE_TAB_HELPER_H_
diff --git a/chrome/browser/ui/views/search_engine_choice/search_engine_choice_dialog_view.cc b/chrome/browser/ui/views/search_engine_choice/search_engine_choice_dialog_view.cc
@@ -20,31 +20,34 @@
 #include "ui/base/metadata/metadata_impl_macros.h"
 
 namespace {
-// Temporary until the mocks are ready.
-constexpr int kDialogWidth = 800;
-constexpr int kDialogHeight = 600;
+constexpr int kPreferredDialogWidth = 1077;
 // TODO(b/280753754): Update based on finalized design to minimum value that
 // still allows buttons to be visible on a reasonably small zoom level.
-constexpr int kMinHeight = 25;
+constexpr int kMinHeight = 300;
 }  // namespace
 
-void ShowSearchEngineChoiceDialog(Browser& browser) {
+void ShowSearchEngineChoiceDialog(
+    Browser& browser,
+    absl::optional<gfx::Size> boundary_dimensions) {
   auto delegate = std::make_unique<views::DialogDelegate>();
   delegate->SetButtons(ui::DIALOG_BUTTON_NONE);
   delegate->SetModalType(ui::MODAL_TYPE_WINDOW);
   delegate->SetShowCloseButton(true);
   delegate->SetOwnedByWidget(true);
 
-  auto dialogView = std::make_unique<SearchEngineChoiceDialogView>(&browser);
+  auto dialogView = std::make_unique<SearchEngineChoiceDialogView>(
+      &browser, boundary_dimensions);
   dialogView->Initialize();
   delegate->SetContentsView(std::move(dialogView));
 
   constrained_window::CreateBrowserModalDialogViews(
       std::move(delegate), browser.window()->GetNativeWindow());
 }
 
-SearchEngineChoiceDialogView::SearchEngineChoiceDialogView(Browser* browser)
-    : browser_(browser) {
+SearchEngineChoiceDialogView::SearchEngineChoiceDialogView(
+    Browser* browser,
+    absl::optional<gfx::Size> boundary_dimensions)
+    : browser_(browser), boundary_dimensions_(boundary_dimensions) {
   CHECK(browser_);
   CHECK(base::FeatureList::IsEnabled(switches::kSearchEngineChoice));
   // Create the web view in the native dialog.
@@ -64,14 +67,20 @@ void SearchEngineChoiceDialogView::Initialize() {
 
   web_view_->LoadInitialURL(GURL(chrome::kChromeUISearchEngineChoiceURL));
 
-  const int max_width = browser_->window()
-                            ->GetWebContentsModalDialogHost()
-                            ->GetMaximumDialogSize()
-                            .width();
-  const int width =
-      views::LayoutProvider::Get()->GetSnappedDialogWidth(kDialogWidth);
+  int max_width = browser_->window()
+                      ->GetWebContentsModalDialogHost()
+                      ->GetMaximumDialogSize()
+                      .width();
+
+  // Use boundary dimensions if initialized to set max width.
+  if (boundary_dimensions_.has_value()) {
+    max_width = std::min(max_width, boundary_dimensions_->width());
+  }
+
+  const int width = views::LayoutProvider::Get()->GetSnappedDialogWidth(
+      kPreferredDialogWidth);
   web_view_->SetPreferredSize(
-      gfx::Size(std::min(width, max_width), kDialogHeight));
+      gfx::Size(std::min(width, max_width), kMinHeight));
 
   auto* web_ui = web_view_->GetWebContents()
                      ->GetWebUI()
@@ -91,13 +100,22 @@ void SearchEngineChoiceDialogView::ShowNativeView(int content_height) {
     return;
   }
 
-  const int max_height = browser_->window()
-                             ->GetWebContentsModalDialogHost()
-                             ->GetMaximumDialogSize()
-                             .height();
+  int max_height = browser_->window()
+                       ->GetWebContentsModalDialogHost()
+                       ->GetMaximumDialogSize()
+                       .height();
+
+  // Use boundary dimensions if initialized to set max height.
+  if (boundary_dimensions_.has_value()) {
+    max_height = std::min(max_height, boundary_dimensions_->height());
+  }
+
   // For hardening against inappropriate data coming from the renderer, we also
   // set a minimum height that still allows to interact with this dialog.
-  const int target_height = std::clamp(content_height, kMinHeight, max_height);
+  // Make sure the min height is always smaller than the maximum dialog size.
+  const int target_height =
+      std::clamp(content_height, std::min(kMinHeight, max_height),
+                 std::max(kMinHeight, max_height));
   web_view_->SetPreferredSize(
       gfx::Size(web_view_->GetPreferredSize().width(), target_height));
   constrained_window::UpdateWebContentsModalDialogPosition(

diff --git a/chrome/browser/ui/views/search_engine_choice/search_engine_choice_dialog_view.h b/chrome/browser/ui/views/search_engine_choice/search_engine_choice_dialog_view.h
@@ -21,7 +21,8 @@ class WebView;
 class SearchEngineChoiceDialogView : public views::View {
  public:
   METADATA_HEADER(SearchEngineChoiceDialogView);
-  explicit SearchEngineChoiceDialogView(Browser* browser);
+  SearchEngineChoiceDialogView(Browser* browser,
+                               absl::optional<gfx::Size> boundary_dimensions);
   ~SearchEngineChoiceDialogView() override;
 
   // Initialize SearchEngineChoiceDialogView's web_view_ element.
@@ -36,6 +37,7 @@ class SearchEngineChoiceDialogView : public views::View {
 
   raw_ptr<views::WebView> web_view_ = nullptr;
   const raw_ptr<Browser> browser_;
+  const absl::optional<gfx::Size> boundary_dimensions_;
   base::WeakPtrFactory<SearchEngineChoiceDialogView> weak_ptr_factory_{this};
 };