cros: Center align the top line of two views in KSV item view - part 9.

Changes:
1. Center aligns the top line of the description label view and
shortcut label view in the KeyboardShortcutItemView.
2. Balance the top and bottom padding after the center alignment.

Bug: 768932
Test: KeyboardShortcutViewTest.TopLineCenterAlignedInItemView

Change-Id: I19ac62451189681c488b18272a4380c6cef80ebf
Reviewed-on: https://chromium-review.googlesource.com/923004
Commit-Queue: Tao Wu <wutao@chromium.org>
Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#539016}

ash/components/shortcut_viewer/views/keyboard_shortcut_item_view.cc

@@ -23,10 +23,6 @@ namespace keyboard_shortcut_viewer {
 
 namespace {
 
-// The width of |shortcut_label_view_| as a ratio of its parent view's width.
-// TODO(wutao): to be decided by UX specs.
-constexpr float kShortcutViewWitdhRatio = 0.618f;
-
 // Creates the separator view between bubble views of modifiers and key.
 std::unique_ptr<views::View> CreateSeparatorView() {
   constexpr SkColor kSeparatorColor =
@@ -117,32 +113,70 @@ KeyboardShortcutItemView::KeyboardShortcutItemView(
 }
 
 int KeyboardShortcutItemView::GetHeightForWidth(int w) const {
-  const int shortcut_view_height =
-      shortcut_label_view_->GetHeightForWidth(w * kShortcutViewWitdhRatio);
-  const int description_view_height =
-      description_label_view_->GetHeightForWidth(w *
-                                                 (1 - kShortcutViewWitdhRatio));
-  return std::max(shortcut_view_height, description_view_height) +
-         GetInsets().height();
+  MaybeCalculateAndDoLayout(w);
+  return calculated_size_.height();
 }
 
 void KeyboardShortcutItemView::Layout() {
-  gfx::Rect content_bounds(GetContentsBounds());
-  if (content_bounds.IsEmpty())
+  MaybeCalculateAndDoLayout(GetLocalBounds().width());
+}
+
+void KeyboardShortcutItemView::MaybeCalculateAndDoLayout(int width) const {
+  if (width == calculated_size_.width())
     return;
 
-  // TODO(wutao): addjust two views' bounds based on UX specs.
-  const int shortcut_view_width =
-      content_bounds.width() * kShortcutViewWitdhRatio;
-  const int description_view_width =
-      content_bounds.width() - shortcut_view_width;
-  const int height = GetHeightForWidth(content_bounds.width());
-  const int left = content_bounds.x();
-  const int top = content_bounds.y();
+  const gfx::Insets insets = GetInsets();
+  width -= insets.width();
+  if (width <= 0)
+    return;
+
+  constexpr int kDescriptionViewPreferredWidth = 210;
+  constexpr int kShortcutViewPreferredWidth = 268;
+  const int description_view_height =
+      description_label_view_->GetHeightForWidth(
+          kDescriptionViewPreferredWidth);
+  const int shortcut_view_height =
+      shortcut_label_view_->GetHeightForWidth(kShortcutViewPreferredWidth);
+
+  // Sets the bounds and layout in order to get the center points of the views
+  // making up the top lines in both the description and shortcut views.
+  // We want the center of the top lines in both views to align with each other.
+  description_label_view_->SetBounds(0, 0, kDescriptionViewPreferredWidth,
+                                     description_view_height);
+  shortcut_label_view_->SetBounds(0, 0, kShortcutViewPreferredWidth,
+                                  shortcut_view_height);
+
+  DCHECK(shortcut_label_view_->has_children() &&
+         description_label_view_->has_children());
+  const int description_view_top_line_center_offset_y =
+      description_label_view_->child_at(0)->bounds().CenterPoint().y();
+  const int shortcut_view_top_line_center_offset_y =
+      shortcut_label_view_->child_at(0)->bounds().CenterPoint().y();
+  // |shortcut_label_view_| could have bubble view in the top line, whose
+  // height is larger than normal text in |description_label_view_|. Otherwise,
+  // the top line height in the two views should be equal.
+  DCHECK_GE(shortcut_view_top_line_center_offset_y,
+            description_view_top_line_center_offset_y);
+  const int description_delta_y = shortcut_view_top_line_center_offset_y -
+                                  description_view_top_line_center_offset_y;
+
+  // Center align the top line in the two views.
+  const int left = insets.left();
+  const int top = insets.top();
+  // Left align the |description_label_view_|.
   description_label_view_->SetBoundsRect(
-      gfx::Rect(left, top, description_view_width, height));
-  shortcut_label_view_->SetBoundsRect(gfx::Rect(
-      left + description_view_width, top, shortcut_view_width, height));
+      gfx::Rect(left, top + description_delta_y, kDescriptionViewPreferredWidth,
+                description_view_height));
+  // Right align the |shortcut_label_view_|.
+  shortcut_label_view_->SetBoundsRect(
+      gfx::Rect(left + width - kShortcutViewPreferredWidth, top,
+                kShortcutViewPreferredWidth, shortcut_view_height));
+  // Add 2 * |description_delta_y| to balance the top and bottom paddings.
+  const int total_height =
+      std::max(shortcut_view_height,
+               description_view_height + 2 * description_delta_y) +
+      insets.height();
+  calculated_size_ = gfx::Size(width + insets.width(), total_height);
 }
 
 }  // namespace keyboard_shortcut_viewer

ash/components/shortcut_viewer/views/keyboard_shortcut_item_view.h

@@ -39,6 +39,13 @@ class KeyboardShortcutItemView : public views::View {
   const KeyboardShortcutItem* shortcut_item() const { return shortcut_item_; }
 
  private:
+  // Calculates how to layout child views, sets their size and position. |width|
+  // is the horizontal space, in pixels, that the view has to work with.
+  // Returns the needed size and caches the result in |calculated_size_|.
+  // Does nothing when the |width| equals the cached width of
+  // |calculated_size_|.
+  void MaybeCalculateAndDoLayout(int width) const;
+
   // Not owned. Pointer to the keyboard shortcut item.
   const KeyboardShortcutItem* shortcut_item_;
 
@@ -50,6 +57,10 @@ class KeyboardShortcutItemView : public views::View {
   // View of the text listing the keys making up the shortcut.
   views::StyledLabel* shortcut_label_view_;
 
+  // This variable saves the result of the last GetHeightForWidth call in order
+  // to avoid repeated calculation.
+  mutable gfx::Size calculated_size_;
+
   DISALLOW_COPY_AND_ASSIGN(KeyboardShortcutItemView);
 };
 

ash/components/shortcut_viewer/views/keyboard_shortcut_view_unittest.cc

@@ -74,4 +74,29 @@ TEST_F(KeyboardShortcutViewTest, SideTabsCount) {
   widget->CloseNow();
 }
 
+// Test that the top line in two views should be center aligned.
+TEST_F(KeyboardShortcutViewTest, TopLineCenterAlignedInItemView) {
+  // Showing the widget.
+  views::Widget* widget = KeyboardShortcutView::Show(CurrentContext());
+
+  for (auto* item_view : GetShortcutViews()) {
+    DCHECK(item_view->child_count() == 2);
+
+    // The top lines in both |description_label_view_| and
+    // |shortcut_label_view_| should be center aligned. Only need to check one
+    // view in the top line, because StyledLabel always center align all the
+    // views in a line.
+    const views::View* description_view = item_view->child_at(0);
+    const views::View* shortcut_view = item_view->child_at(1);
+    const views::View* description_top_line_view =
+        description_view->child_at(0);
+    const views::View* shortcut_top_line_view = shortcut_view->child_at(0);
+    EXPECT_EQ(description_top_line_view->GetBoundsInScreen().CenterPoint().y(),
+              shortcut_top_line_view->GetBoundsInScreen().CenterPoint().y());
+  }
+
+  // Cleaning up.
+  widget->CloseNow();
+}
+
 }  // namespace keyboard_shortcut_viewer