[omnibox] Add a vertical bar when suggestion is focused

This CL adds a vertical bar on the left hand side of a suggestion to
indicate focus state. This is gated behind the omnibox-refined-focus-ui
feature flag.

Bug: 1129612
Change-Id: I06dfa60a41e4efceafe6071cb39bfd681a92e106
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2446713Reviewed-by: Peter Kotwicz <pkotwicz@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Commit-Queue: Angela Yoeurng <yoangela@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814404}

chrome/browser/themes/theme_helper.cc

@@ -663,6 +663,8 @@ base::Optional<ThemeHelper::OmniboxColor> ThemeHelper::GetOmniboxColorImpl(
       return url_color(results_bg_hovered_color());
     case TP::COLOR_OMNIBOX_RESULTS_URL_SELECTED:
       return url_color(results_bg_selected_color());
+    case TP::COLOR_OMNIBOX_RESULTS_FOCUS_BAR:
+      return {{dark ? gfx::kGoogleBlue300 : gfx::kGoogleBlue600, false}};
     case TP::COLOR_OMNIBOX_SECURITY_CHIP_DEFAULT:
     case TP::COLOR_OMNIBOX_SECURITY_CHIP_SECURE:
     case TP::COLOR_OMNIBOX_SECURITY_CHIP_DANGEROUS: {

chrome/browser/themes/theme_helper_win.cc

@@ -208,6 +208,7 @@ bool ThemeHelperWin::GetPlatformHighContrastColor(int id,
     case ThemeProperties::COLOR_OMNIBOX_RESULTS_TEXT_DIMMED_SELECTED:
     case ThemeProperties::COLOR_OMNIBOX_RESULTS_ICON_SELECTED:
     case ThemeProperties::COLOR_OMNIBOX_RESULTS_URL_SELECTED:
+    case ThemeProperties::COLOR_OMNIBOX_RESULTS_FOCUS_BAR:
       system_theme_color = ui::NativeTheme::SystemThemeColor::kHighlightText;
       break;
 

chrome/browser/themes/theme_properties.h

@@ -227,6 +227,7 @@ class ThemeProperties {
     COLOR_OMNIBOX_RESULTS_ICON_SELECTED,
     COLOR_OMNIBOX_RESULTS_URL,
     COLOR_OMNIBOX_RESULTS_URL_SELECTED,
+    COLOR_OMNIBOX_RESULTS_FOCUS_BAR,
     COLOR_OMNIBOX_BUBBLE_OUTLINE,
     COLOR_OMNIBOX_BUBBLE_OUTLINE_EXPERIMENTAL_KEYWORD_MODE,
     COLOR_OMNIBOX_SECURITY_CHIP_DEFAULT,

chrome/browser/ui/omnibox/omnibox_theme.cc

@@ -57,6 +57,9 @@ int GetThemePropertyId(OmniboxPart part, OmniboxPartState state) {
       return OmniboxFieldTrial::IsExperimentalKeywordModeEnabled()
                  ? TP::COLOR_OMNIBOX_BUBBLE_OUTLINE_EXPERIMENTAL_KEYWORD_MODE
                  : TP::COLOR_OMNIBOX_BUBBLE_OUTLINE;
+    case OmniboxPart::RESULTS_FOCUS_BAR:
+      return TP::COLOR_OMNIBOX_RESULTS_FOCUS_BAR;
+
     default:
       NOTREACHED();
       return -1;

chrome/browser/ui/omnibox/omnibox_theme.h

@@ -26,6 +26,8 @@ enum class OmniboxPart {
   RESULTS_TEXT_DEFAULT,
   RESULTS_TEXT_DIMMED,
   RESULTS_TEXT_URL,
+  RESULTS_FOCUS_BAR,  // Vertical bar indicating focus, only used when
+                      // #omnibox-refined-focus-ui is enabled
 };
 
 // An optional state for a given |OmniboxPart|.

chrome/browser/ui/views/omnibox/omnibox_result_view.cc

@@ -67,6 +67,57 @@ class OmniboxRemoveSuggestionButton : public views::ImageButton {
 
 }  // namespace
 
+////////////////////////////////////////////////////////////////////////////////
+// OmniboxResultFocusBar
+
+class OmniboxResultFocusBar : public views::View {
+ public:
+  static constexpr int kStrokeThickness = 3;
+
+  explicit OmniboxResultFocusBar(OmniboxResultView* result_view)
+      : result_view_(result_view) {}
+
+  // views::View:
+  void OnPaint(gfx::Canvas* canvas) override {
+    SkPath path = GetPath();
+    cc::PaintFlags flags;
+    flags.setAntiAlias(true);
+    flags.setColor(color_);
+    flags.setStyle(cc::PaintFlags::kFill_Style);
+    canvas->DrawPath(path, flags);
+  }
+
+  // views::View:
+  void OnThemeChanged() override {
+    views::View::OnThemeChanged();
+
+    color_ = result_view_->GetColor(OmniboxPart::RESULTS_FOCUS_BAR);
+  }
+
+ private:
+  SkColor color_;
+
+  // Pointer to the parent view.
+  OmniboxResultView* const result_view_;
+
+  // The focus bar is a straight vertical line with half-rounded endcaps. Since
+  // this geometry is nontrivial to represent using primitives, it's instead
+  // represented using a fill path. This matches the style and implementation
+  // used in Tab Groups.
+  SkPath GetPath() const {
+    SkPath path;
+
+    path.moveTo(0, 0);
+    path.arcTo(kStrokeThickness, kStrokeThickness, 0, SkPath::kSmall_ArcSize,
+               SkPathDirection::kCW, kStrokeThickness, kStrokeThickness);
+    path.lineTo(kStrokeThickness, height() - kStrokeThickness);
+    path.arcTo(kStrokeThickness, kStrokeThickness, 0, SkPath::kSmall_ArcSize,
+               SkPathDirection::kCW, 0, height());
+    path.close();
+
+    return path;
+  }
+};
 ////////////////////////////////////////////////////////////////////////////////
 // OmniboxResultView, public:
 
@@ -83,6 +134,10 @@ OmniboxResultView::OmniboxResultView(
                               base::Unretained(this))) {
   CHECK_GE(model_index, 0u);
 
+  if (OmniboxFieldTrial::IsRefinedFocusStateEnabled()) {
+    focus_bar_ = AddChildView(std::make_unique<OmniboxResultFocusBar>(this));
+  }
+
   suggestion_view_ = AddChildView(std::make_unique<OmniboxMatchCellView>(this));
 
   suggestion_tab_switch_button_ =
@@ -262,6 +317,10 @@ void OmniboxResultView::ApplyThemeAndRefreshIcons(bool force_reapply_styles) {
   if (OmniboxFieldTrial::IsSuggestionButtonRowEnabled()) {
     button_row_->OnStyleRefresh();
   }
+
+  if (OmniboxFieldTrial::IsRefinedFocusStateEnabled()) {
+    focus_bar_->SetVisible(IsMatchSelected());
+  }
 }
 
 void OmniboxResultView::OnSelectionStateChanged() {
@@ -412,6 +471,11 @@ void OmniboxResultView::Layout() {
                            suggestion_width - suggestion_indent,
                            button_row_->GetPreferredSize().height());
   }
+
+  if (OmniboxFieldTrial::IsRefinedFocusStateEnabled()) {
+    focus_bar_->SetBounds(0, 0, OmniboxResultFocusBar::kStrokeThickness,
+                          suggestion_height);
+  }
 }
 
 bool OmniboxResultView::OnMousePressed(const ui::MouseEvent& event) {

chrome/browser/ui/views/omnibox/omnibox_result_view.h

@@ -29,6 +29,7 @@ class OmniboxMatchCellView;
 class OmniboxPopupContentsView;
 class OmniboxSuggestionButtonRowView;
 class OmniboxTabSwitchButton;
+class OmniboxResultFocusBar;
 enum class OmniboxPart;
 enum class OmniboxPartState;
 
@@ -153,6 +154,10 @@ class OmniboxResultView : public views::View,
   OmniboxMatchCellView* keyword_view_;     // The trailing (or right) view.
   OmniboxTabSwitchButton* suggestion_tab_switch_button_;
 
+  // The blue bar used to indicate focus.  This is currently only used if
+  // omnibox-refined-focus-state flag is enabled.
+  OmniboxResultFocusBar* focus_bar_ = nullptr;
+
   // The row of buttons, only assigned and used if OmniboxSuggestionButtonRow
   // feature is enabled. It is owned by the base view, not this raw pointer.
   OmniboxSuggestionButtonRowView* button_row_ = nullptr;