cros: Introduce KSV item views. KSV - part 3.

Introduce the shortcut item views for Keyboard Shortcut Viewer (KSV).

Changes:
1. Add item view and item list view.
2. For V1, use US keyboard layout to display the shortcut keys.

Bug: 768932
Test: KeyboardShortcutViewTest and can show the shortcut item list.
Change-Id: Ia314dff02f1bec9f8c5cff195a93a3033c9a32f6
Reviewed-on: https://chromium-review.googlesource.com/893604
Commit-Queue: Tao Wu <wutao@chromium.org>
Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#533907}

ui/chromeos/ksv/BUILD.gn

@@ -11,6 +11,10 @@ source_set("ksv") {
     "keyboard_shortcut_viewer_metadata.cc",
     "keyboard_shortcut_viewer_metadata.h",
     "ksv_export.h",
+    "views/keyboard_shortcut_item_list_view.cc",
+    "views/keyboard_shortcut_item_list_view.h",
+    "views/keyboard_shortcut_item_view.cc",
+    "views/keyboard_shortcut_item_view.h",
     "views/keyboard_shortcut_view.cc",
     "views/keyboard_shortcut_view.h",
   ]
@@ -18,6 +22,7 @@ source_set("ksv") {
   defines = [ "KSV_IMPLEMENTATION" ]
 
   deps = [
+    "//ui/chromeos/events",
     "//ui/chromeos/strings",
     "//ui/events:events_base",
     "//ui/views",

ui/chromeos/ksv/keyboard_shortcut_viewer_metadata.cc

@@ -6,17 +6,31 @@
 
 #include "base/logging.h"
 #include "base/macros.h"
+#include "base/optional.h"
+#include "base/strings/utf_string_conversions.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/chromeos/events/keyboard_layout_util.h"
 #include "ui/chromeos/ksv/keyboard_shortcut_item.h"
 #include "ui/chromeos/strings/grit/ui_chromeos_strings.h"
 #include "ui/events/event_constants.h"
-#include "ui/events/keycodes/keyboard_codes.h"
+#include "ui/events/keycodes/dom/dom_code.h"
+#include "ui/events/keycodes/dom/dom_key.h"
+#include "ui/events/keycodes/dom/keycode_converter.h"
+#include "ui/events/keycodes/keyboard_code_conversion.h"
 
 namespace keyboard_shortcut_viewer {
 
 namespace {
 
-// Get the keyboard codes for modifiers.
-ui::KeyboardCode GetModifierKeyCode(ui::EventFlags modifier) {
+// This order is significant as it determines the order in which the categories
+// will be displayed in the view.
+constexpr ShortcutCategory kCategoryDisplayOrder[] = {
+    ShortcutCategory::kPopular,        ShortcutCategory::kTabAndWindow,
+    ShortcutCategory::kPageAndBrowser, ShortcutCategory::kSystemAndDisplay,
+    ShortcutCategory::kTextEditing,    ShortcutCategory::kAccessibility};
+
+// Gets the keyboard codes for modifiers.
+ui::KeyboardCode GetKeyCodeForModifier(ui::EventFlags modifier) {
   switch (modifier) {
     case ui::EF_CONTROL_DOWN:
       return ui::VKEY_CONTROL;
@@ -32,8 +46,82 @@ ui::KeyboardCode GetModifierKeyCode(ui::EventFlags modifier) {
   }
 }
 
+// Provides I18n string for key codes which have no mapping to a meaningful
+// description or they require a special one we explicitly specify. For example,
+// ui::VKEY_COMMAND could return a string "Meta", but we want to display it as
+// "Search" or "Launcher".
+base::Optional<base::string16> GetSpecialStringForKeyboardCode(
+    ui::KeyboardCode key_code) {
+  int msg_id = 0;
+  switch (key_code) {
+    case ui::VKEY_CONTROL:
+      msg_id = IDS_KSV_MODIFIER_CONTROL;
+      break;
+    case ui::VKEY_LMENU:
+      msg_id = IDS_KSV_MODIFIER_ALT;
+      break;
+    case ui::VKEY_SHIFT:
+      msg_id = IDS_KSV_MODIFIER_SHIFT;
+      break;
+    case ui::VKEY_COMMAND:
+      msg_id = ui::DeviceUsesKeyboardLayout2() ? IDS_KSV_MODIFIER_LAUNCHER
+                                               : IDS_KSV_MODIFIER_SEARCH;
+      break;
+    default:
+      return base::nullopt;
+  }
+  return l10n_util::GetStringUTF16(msg_id);
+}
+
 }  // namespace
 
+base::span<const ShortcutCategory> GetShortcutCategories() {
+  return base::span<const ShortcutCategory>(kCategoryDisplayOrder);
+}
+
+base::string16 GetStringForCategory(ShortcutCategory category) {
+  int msg_id = 0;
+  switch (category) {
+    case ShortcutCategory::kPopular:
+      msg_id = IDS_KSV_CATEGORY_POPULAR;
+      break;
+    case ShortcutCategory::kTabAndWindow:
+      msg_id = IDS_KSV_CATEGORY_TAB_WINDOW;
+      break;
+    case ShortcutCategory::kPageAndBrowser:
+      msg_id = IDS_KSV_CATEGORY_PAGE_BROWSER;
+      break;
+    case ShortcutCategory::kSystemAndDisplay:
+      msg_id = IDS_KSV_CATEGORY_SYSTEM_DISPLAY;
+      break;
+    case ShortcutCategory::kTextEditing:
+      msg_id = IDS_KSV_CATEGORY_TEXT_EDITING;
+      break;
+    case ShortcutCategory::kAccessibility:
+      msg_id = IDS_KSV_CATEGORY_ACCESSIBILITY;
+      break;
+    default:
+      NOTREACHED();
+      return base::string16();
+  }
+  return l10n_util::GetStringUTF16(msg_id);
+}
+
+base::string16 GetStringForKeyboardCode(ui::KeyboardCode key_code) {
+  const base::Optional<base::string16> key_label =
+      GetSpecialStringForKeyboardCode(key_code);
+  if (key_label)
+    return key_label.value();
+
+  ui::DomCode dom_code = ui::UsLayoutKeyboardCodeToDomCode(key_code);
+  ui::DomKey dom_key;
+  ui::KeyboardCode keycode_ignored;
+  const bool has_mapping = ui::DomCodeToUsLayoutDomKey(
+      dom_code, 0 /* flags */, &dom_key, &keycode_ignored);
+  DCHECK(has_mapping);
+  return base::UTF8ToUTF16(ui::KeycodeConverter::DomKeyToKeyString(dom_key));
+}
+
 const std::vector<KeyboardShortcutItem>& GetKeyboardShortcutItemList() {
   CR_DEFINE_STATIC_LOCAL(
       std::vector<KeyboardShortcutItem>, item_list,
@@ -75,8 +163,10 @@ const std::vector<KeyboardShortcutItem>& GetKeyboardShortcutItemList() {
         // |shortcut_message_id| associated string template.
         for (auto modifier : {ui::EF_CONTROL_DOWN, ui::EF_ALT_DOWN,
                               ui::EF_SHIFT_DOWN, ui::EF_COMMAND_DOWN}) {
-          if (accelerator_id.modifiers & modifier)
-            item.shortcut_key_codes.emplace_back(GetModifierKeyCode(modifier));
+          if (accelerator_id.modifiers & modifier) {
+            item.shortcut_key_codes.emplace_back(
+                GetKeyCodeForModifier(modifier));
+          }
         }
         // For non grouped accelerators, we need to populate the key as well.
         if (item.accelerator_ids.size() == 1)

ui/chromeos/ksv/keyboard_shortcut_viewer_metadata.h

@@ -7,16 +7,31 @@
 
 #include <vector>
 
+#include "base/containers/span.h"
+#include "base/strings/string16.h"
 #include "ui/chromeos/ksv/ksv_export.h"
+#include "ui/events/keycodes/keyboard_codes.h"
 
 namespace keyboard_shortcut_viewer {
 
 struct KeyboardShortcutItem;
+enum class ShortcutCategory;
 
 // Returns a list of Ash and Chrome keyboard shortcuts metadata.
 KSV_EXPORT const std::vector<KeyboardShortcutItem>&
 GetKeyboardShortcutItemList();
 
+// Returns the categories shown on the side tabs.
+base::span<const ShortcutCategory> GetShortcutCategories();
+
+base::string16 GetStringForCategory(ShortcutCategory category);
+
+// Returns the string of a DomeKey for a given VKEY. VKEY needs to be mapped to
+// a physical key |dom_code| and then the |dom_code| needs to be mapped to a
+// meaning or character of |dom_key| based on the corresponding keyboard layout.
+// TODO(https://crbug.com/803502): Get strings for non US keyboard layout.
+base::string16 GetStringForKeyboardCode(ui::KeyboardCode key_code);
+
 }  // namespace keyboard_shortcut_viewer
 
 #endif  // UI_CHROMEOS_KSV_KEYBOARD_SHORTCUT_VIEWER_METADATA_H_

ui/chromeos/ksv/keyboard_shortcut_viewer_strings.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
+  <!-- Categories -->
+  <message name="IDS_KSV_CATEGORY_POPULAR" desc="Category of the keyboard shortcut.">
+    Popular Shortcut
+  </message>
+  <message name="IDS_KSV_CATEGORY_TAB_WINDOW" desc="Category of the keyboard shortcut.">
+    Tab And Windows
+  </message>
+  <message name="IDS_KSV_CATEGORY_PAGE_BROWSER" desc="Category of the keyboard shortcut.">
+    Page and Web Browser
+  </message>
+  <message name="IDS_KSV_CATEGORY_SYSTEM_DISPLAY" desc="Category of the keyboard shortcut.">
+    System and Display Settings
+  </message>
+  <message name="IDS_KSV_CATEGORY_TEXT_EDITING" desc="Category of the keyboard shortcut.">
+    Text Editing
+  </message>
+  <message name="IDS_KSV_CATEGORY_ACCESSIBILITY" desc="Category of the keyboard shortcut.">
+    Accessibility
+  </message>
+
+  <!-- Modifiers -->
+  <message name="IDS_KSV_MODIFIER_CONTROL" desc="Name of [Ctrl] key. Shouldn't be translated in many languages.">
+    Ctrl
+  </message>
+  <message name="IDS_KSV_MODIFIER_ALT" desc="Name of [Alt] key. Shouldn't be translated in many languages.">
+    Alt
+  </message>
+  <message name="IDS_KSV_MODIFIER_SHIFT" desc="Name of [Shift] key. Shouldn't be translated in many languages.">
+    Shift
+  </message>
+  <message name="IDS_KSV_MODIFIER_SEARCH" desc="Name of [Search] key.">
+    Search
+  </message>
+  <message name="IDS_KSV_MODIFIER_LAUNCHER" desc="Name of [Launcher] key.">
+    Launcher
+  </message>
+
   <!-- Generic shortcut strings -->
   <message name="IDS_KSV_SHORTCUT_ONE_MODIFIER_ONE_KEY" desc="Human readable version of the keyboard shortcut. This is for all single modifier shortcuts.">
     <ph name="modifier">$1<ex>CTRL</ex></ph> + <ph name="key">$2<ex>V</ex></ph>

ui/chromeos/ksv/views/keyboard_shortcut_item_list_view.cc

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ui/chromeos/ksv/views/keyboard_shortcut_item_list_view.h"
+
+#include "ui/chromeos/ksv/views/keyboard_shortcut_item_view.h"
+#include "ui/views/controls/scroll_view.h"
+#include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/fill_layout.h"
+
+namespace keyboard_shortcut_viewer {
+
+KeyboardShortcutItemListView::KeyboardShortcutItemListView()
+    : shortcut_item_views_(new views::View) {
+  auto layout = std::make_unique<views::BoxLayout>(views::BoxLayout::kVertical);
+  layout->set_main_axis_alignment(views::BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
+  shortcut_item_views_->SetLayoutManager(std::move(layout));
+
+  views::ScrollView* const scroller = new views::ScrollView();
+  scroller->set_draw_overflow_indicator(false);
+  scroller->ClipHeightTo(0, 0);
+  scroller->SetContents(shortcut_item_views_);
+  AddChildView(scroller);
+  SetLayoutManager(std::make_unique<views::FillLayout>());
+}
+
+void KeyboardShortcutItemListView::AddItemView(
+    KeyboardShortcutItemView* item_view) {
+  shortcut_item_views_->AddChildView(item_view);
+}
+
+}  // namespace keyboard_shortcut_viewer

ui/chromeos/ksv/views/keyboard_shortcut_item_list_view.h

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_ITEM_LIST_VIEW_H_
+#define UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_ITEM_LIST_VIEW_H_
+
+#include "ui/chromeos/ksv/views/keyboard_shortcut_item_view.h"
+#include "ui/views/view.h"
+
+namespace keyboard_shortcut_viewer {
+
+class KeyboardShortcutItemView;
+
+// Displays a list of KeyboardShortcutItemView.
+class KeyboardShortcutItemListView : public views::View {
+ public:
+  KeyboardShortcutItemListView();
+  ~KeyboardShortcutItemListView() override = default;
+
+  void AddItemView(KeyboardShortcutItemView* item_view);
+
+ private:
+  // The parent view of the list of KeyboardShortcutItemView.
+  views::View* shortcut_item_views_;
+
+  DISALLOW_COPY_AND_ASSIGN(KeyboardShortcutItemListView);
+};
+
+}  // namespace keyboard_shortcut_viewer
+
+#endif  // UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_ITEM_LIST_VIEW_H_

ui/chromeos/ksv/views/keyboard_shortcut_item_view.cc

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ui/chromeos/ksv/views/keyboard_shortcut_item_view.h"
+
+#include <vector>
+
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/chromeos/ksv/keyboard_shortcut_viewer_metadata.h"
+#include "ui/views/controls/styled_label.h"
+
+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;
+
+}  // namespace
+
+KeyboardShortcutItemView::KeyboardShortcutItemView(
+    const KeyboardShortcutItem& item) {
+  description_label_view_ = new views::StyledLabel(
+      l10n_util::GetStringUTF16(item.description_message_id), nullptr);
+  AddChildView(description_label_view_);
+
+  std::vector<size_t> offsets;
+  std::vector<base::string16> replacement_strings;
+  for (ui::KeyboardCode key_code : item.shortcut_key_codes)
+    replacement_strings.emplace_back(GetStringForKeyboardCode(key_code));
+
+  base::string16 shortcut_string;
+  if (replacement_strings.empty()) {
+    shortcut_string = l10n_util::GetStringUTF16(item.shortcut_message_id);
+  } else {
+    shortcut_string = l10n_util::GetStringFUTF16(item.shortcut_message_id,
+                                                 replacement_strings, &offsets);
+  }
+  shortcut_label_view_ = new views::StyledLabel(shortcut_string, nullptr);
+  DCHECK_EQ(replacement_strings.size(), offsets.size());
+  for (size_t i = 0; i < offsets.size(); ++i) {
+    views::StyledLabel::RangeStyleInfo style_info;
+    // TODO(wutao): add rounded bubble views to highlight shortcut keys when
+    // views::StyledLabel supports custom views.
+    // TODO(wutao): add icons for keys.
+    // TODO(wutao): finalize the sytles with UX specs.
+    style_info.override_color = SK_ColorBLUE;
+    style_info.disable_line_wrapping = true;
+    shortcut_label_view_->AddStyleRange(
+        gfx::Range(offsets[i], offsets[i] + replacement_strings[i].length()),
+        style_info);
+  }
+  AddChildView(shortcut_label_view_);
+}
+
+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);
+}
+
+void KeyboardShortcutItemView::Layout() {
+  gfx::Rect rect(GetContentsBounds());
+  if (rect.IsEmpty())
+    return;
+
+  // TODO(wutao): addjust two views' bounds based on UX specs.
+  const int shortcut_view_width = rect.width() * kShortcutViewWitdhRatio;
+  const int description_view_width = rect.width() - shortcut_view_width;
+  const int height = GetHeightForWidth(rect.width());
+  description_label_view_->SetBoundsRect(
+      gfx::Rect(description_view_width, height));
+  shortcut_label_view_->SetBoundsRect(
+      gfx::Rect(description_view_width, 0, shortcut_view_width, height));
+}
+
+}  // namespace keyboard_shortcut_viewer

ui/chromeos/ksv/views/keyboard_shortcut_item_view.h

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_ITEM_VIEW_H_
+#define UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_ITEM_VIEW_H_
+
+#include "ui/chromeos/ksv/keyboard_shortcut_item.h"
+#include "ui/views/view.h"
+
+namespace views {
+class StyledLabel;
+}  //  namespace views
+
+namespace keyboard_shortcut_viewer {
+
+// A view that displays a shortcut metadata.
+class KeyboardShortcutItemView : public views::View {
+ public:
+  explicit KeyboardShortcutItemView(const KeyboardShortcutItem& item);
+  ~KeyboardShortcutItemView() override = default;
+
+  // views::View:
+  int GetHeightForWidth(int w) const override;
+  void Layout() override;
+
+ private:
+  // View of the text describing what action the shortcut performs.
+  views::StyledLabel* description_label_view_;
+
+  // View of the text listing the keys making up the shortcut.
+  views::StyledLabel* shortcut_label_view_;
+
+  DISALLOW_COPY_AND_ASSIGN(KeyboardShortcutItemView);
+};
+
+}  // namespace keyboard_shortcut_viewer
+
+#endif  // UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_ITEM_VIEW_H_

ui/chromeos/ksv/views/keyboard_shortcut_view.cc

@@ -4,7 +4,12 @@
 
 #include "ui/chromeos/ksv/views/keyboard_shortcut_view.h"
 
+#include "ui/chromeos/ksv/keyboard_shortcut_viewer_metadata.h"
+#include "ui/chromeos/ksv/views/keyboard_shortcut_item_list_view.h"
+#include "ui/chromeos/ksv/views/keyboard_shortcut_item_view.h"
 #include "ui/views/background.h"
+#include "ui/views/controls/tabbed_pane/tabbed_pane.h"
+#include "ui/views/layout/fill_layout.h"
 #include "ui/views/widget/widget.h"
 
 namespace keyboard_shortcut_viewer {
@@ -38,16 +43,37 @@ KeyboardShortcutView::KeyboardShortcutView() {
   DCHECK_EQ(g_ksv_view, nullptr);
   g_ksv_view = this;
 
+  // TODO(wutao): will be removed and replaced by explicit Layout().
+  SetLayoutManager(std::make_unique<views::FillLayout>());
   // Default background is transparent.
   SetBackground(views::CreateSolidBackground(SK_ColorWHITE));
   InitViews();
 }
 
 void KeyboardShortcutView::InitViews() {
-  // TODO(wutao): implement convertion from KeyboardShortcutItem to
-  // KeyboardShortcutItemView, including generating strings and icons for VKEY.
-  // Call GetKeyboardShortcutItemList() to constuct the item views.
-  NOTIMPLEMENTED();
+  // Init views of KeyboardShortcutItemView.
+  for (const auto& item : GetKeyboardShortcutItemList()) {
+    for (auto category : item.categories) {
+      shortcut_views_by_category_[category].emplace_back(
+          new KeyboardShortcutItemView(item));
+    }
+  }
+
+  // Init views of TabbedPane and KeyboardShortcutItemListView.
+  tabbed_pane_ =
+      new views::TabbedPane(views::TabbedPane::Orientation::kVertical);
+  for (auto category : GetShortcutCategories()) {
+    auto iter = shortcut_views_by_category_.find(category);
+    // TODO(wutao): add DCKECK(iter != shortcut_views_by_category_.end()).
+    if (iter != shortcut_views_by_category_.end()) {
+      KeyboardShortcutItemListView* item_list_view =
+          new KeyboardShortcutItemListView();
+      for (auto* item_view : iter->second)
+        item_list_view->AddItemView(item_view);
+      tabbed_pane_->AddTab(GetStringForCategory(category), item_list_view);
+    }
+  }
+  AddChildView(tabbed_pane_);
 }
 
 bool KeyboardShortcutView::CanMaximize() const {
@@ -67,4 +93,16 @@ views::ClientView* KeyboardShortcutView::CreateClientView(
   return new views::ClientView(widget, this);
 }
 
+KeyboardShortcutView* KeyboardShortcutView::GetInstanceForTests() {
+  return g_ksv_view;
+}
+
+int KeyboardShortcutView::GetCategoryNumberForTests() const {
+  return shortcut_views_by_category_.size();
+}
+
+int KeyboardShortcutView::GetTabCountForTests() const {
+  return tabbed_pane_->GetTabCount();
+}
+
 }  // namespace keyboard_shortcut_viewer

ui/chromeos/ksv/views/keyboard_shortcut_view.h

@@ -5,15 +5,22 @@
 #ifndef UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_VIEW_H_
 #define UI_CHROMEOS_KSV_VIEWS_KEYBOARD_SHORTCUT_VIEW_H_
 
+#include <map>
+#include <memory>
+
 #include "base/macros.h"
 #include "ui/views/widget/widget_delegate.h"
 
 namespace views {
+class TabbedPane;
 class Widget;
 }  // namespace views
 
 namespace keyboard_shortcut_viewer {
 
+class KeyboardShortcutItemView;
+enum class ShortcutCategory;
+
 // The UI container for Ash and Chrome keyboard shortcuts.
 class KeyboardShortcutView : public views::WidgetDelegateView {
  public:
@@ -23,10 +30,16 @@ class KeyboardShortcutView : public views::WidgetDelegateView {
   static views::Widget* Show(gfx::NativeWindow context);
 
  private:
+  friend class KeyboardShortcutViewTest;
+
   KeyboardShortcutView();
 
   void InitViews();
 
+  static KeyboardShortcutView* GetInstanceForTests();
+  int GetCategoryNumberForTests() const;
+  int GetTabCountForTests() const;
+
   // views::WidgetDelegate:
   bool CanMaximize() const override;
   bool CanMinimize() const override;
@@ -34,6 +47,13 @@ class KeyboardShortcutView : public views::WidgetDelegateView {
   // TODO(wutao): need to customize the frame view header based on UX specs.
   views::ClientView* CreateClientView(views::Widget* widget) override;
 
+  // Owned by views hierarchy.
+  views::TabbedPane* tabbed_pane_;
+
+  // Views are owned by views hierarchy.
+  std::map<ShortcutCategory, std::vector<KeyboardShortcutItemView*>>
+      shortcut_views_by_category_;
+
   DISALLOW_COPY_AND_ASSIGN(KeyboardShortcutView);
 };
 

ui/chromeos/ksv/views/keyboard_shortcut_view_unittest.cc

@@ -4,13 +4,38 @@
 
 #include "ui/chromeos/ksv/views/keyboard_shortcut_view.h"
 
+#include <set>
+
 #include "testing/gtest/include/gtest/gtest.h"
+#include "ui/chromeos/ksv/keyboard_shortcut_viewer_metadata.h"
 #include "ui/views/test/views_test_base.h"
 #include "ui/views/widget/widget.h"
 
 namespace keyboard_shortcut_viewer {
 
-using KeyboardShortcutViewTest = views::ViewsTestBase;
+class KeyboardShortcutViewTest : public views::ViewsTestBase {
+ public:
+  KeyboardShortcutViewTest() = default;
+  ~KeyboardShortcutViewTest() override = default;
+
+ protected:
+  int GetCategoryNumber() const {
+    DCHECK(GetView());
+    return GetView()->GetCategoryNumberForTests();
+  }
+
+  int GetTabCount() const {
+    DCHECK(GetView());
+    return GetView()->GetTabCountForTests();
+  }
+
+ private:
+  KeyboardShortcutView* GetView() const {
+    return KeyboardShortcutView::GetInstanceForTests();
+  }
+
+  DISALLOW_COPY_AND_ASSIGN(KeyboardShortcutViewTest);
+};
 
 // Shows and closes the widget for KeyboardShortcutViewer.
 TEST_F(KeyboardShortcutViewTest, ShowAndClose) {
@@ -22,4 +47,23 @@ TEST_F(KeyboardShortcutViewTest, ShowAndClose) {
   widget->CloseNow();
 }
 
+// Test that the number of side tabs equals to the number of categories.
+TEST_F(KeyboardShortcutViewTest, SideTabsCount) {
+  // Showing the widget.
+  views::Widget* widget = KeyboardShortcutView::Show(GetContext());
+  EXPECT_EQ(GetTabCount(), GetCategoryNumber());
+
+  // Cleaning up.
+  widget->CloseNow();
+}
+
+// Test that the shortcut category has no duplicate.
+TEST_F(KeyboardShortcutViewTest, ShortcutCategoryNoDuplicate) {
+  std::set<ShortcutCategory> categories;
+  for (const auto& category : GetShortcutCategories()) {
+    EXPECT_TRUE(categories.insert(category).second)
+        << "Has duplicated category.";
+  }
+}
+
 }  // namespace keyboard_shortcut_viewer