[webui-ntp] Add side bar to customize dialog

Bug: 1040256
Change-Id: Ia8e1a17d65f85d5b6ae1218835fbdb1e308c6af8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1991809
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#729980}

chrome/browser/resources/new_tab_page/customize_dialog.html

@@ -4,15 +4,120 @@
   }
 
   div[slot=body] {
+    display: flex;
+    flex-direction: row;
+    min-height: 423px;
+    padding-inline-start: 0;
+  }
+
+  #menu {
+    display: flex;
+    flex-direction: column;
+    margin-inline-end: 40px;
+  }
+
+  .menu-item {
+    align-items: center;
+    border-radius: 0 16px 16px 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    height: 32px;
+    margin-bottom: 16px;
+    outline: none;
+    width: 192px;
+  }
+
+  :host-context([dir=rtl]) .menu-item {
+    border-radius: 16px 0 0 16px;
+  }
+
+  .menu-item:hover {
+    background-color: rgba(var(--google-grey-900-rgb), .1);
+  }
+
+  .menu-item[selected] {
+    background-color: var(--google-blue-50);
+    color: var(--google-blue-refresh-700);
+  }
+
+  :host-context(.focus-outline-visible) .menu-item:focus {
+    border-color: rgba(var(--google-blue-600-rgb), .4);
+    border-style: solid solid solid none;
+    border-width: 2px;
+  }
+
+  :host-context(.focus-outline-visible[dir=rtl]) .menu-item:focus {
+    border-style: solid none solid solid;
+  }
+
+  .menu-item-icon {
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    background-color: var(--cr-secondary-text-color);
+    height: 20px;
+    margin-inline-end: 16px;
+    margin-inline-start: 24px;
+    width: 20px;
+  }
+
+  .menu-item[selected] .menu-item-icon {
+    background-color: var(--google-blue-refresh-700);
+  }
+
+  #backgroundsIcon {
+    -webkit-mask-image: url(icons/backgrounds.svg);
+  }
+
+  #shortcutsIcon {
+    -webkit-mask-image: url(icons/link.svg);
+  }
+
+  #themesIcon {
+    -webkit-mask-image: url(icons/colors.svg);
+  }
+
+  #pages {
     align-items: center;
     display: flex;
     flex-direction: column;
-    min-height: 423px;
+    flex-grow: 1;
   }
 </style>
 <cr-dialog id="dialog" show-on-attach>
+  <!-- TODO(crbug.com/1040256): Currently, the sidebar scrolls in sync with the
+       page content area. Fix, so that the page content can scroll
+       separately. -->
   <div slot="body">
-    <ntp-customize-themes theme="[[theme]]"></ntp-customize-themes>
+    <iron-selector id="menu" selected-attribute="selected"
+        attr-for-selected="page-name" selected="{{selectedPage_}}"
+        on-keydown="onMenuItemKeyDown_">
+      <div class="menu-item" page-name="backgrounds" tabindex="0">
+        <div id="backgroundsIcon" class="menu-item-icon"></div>
+        $i18n{backgroundsMenuItem}
+      </div>
+      <div class="menu-item" page-name="shortcuts" tabindex="0">
+        <div id="shortcutsIcon" class="menu-item-icon"></div>
+        $i18n{shortcutsMenuItem}
+      </div>
+      <div class="menu-item" page-name="themes" tabindex="0">
+        <div id="themesIcon" class="menu-item-icon"></div>
+        $i18n{themesMenuItem}
+      </div>
+    </iron-selector>
+    <iron-pages id="pages" selected="[[selectedPage_]]"
+        attr-for-selected="page-name">
+      <!-- TODO(crbug.com/1032328): Add support for selecting background
+           image. -->
+      <div page-name="backgrounds">backgrounds</div>
+      <!-- TODO(crbug.com/1032333): Add support for selecting shortcuts vs most
+           visited. -->
+      <div page-name="shortcuts">shortcuts</div>
+      <ntp-customize-themes page-name="themes" theme="[[theme]]">
+      </ntp-customize-themes>
+    </iron-pages>
   </div>
   <div slot="button-container">
     <cr-button class="cancel-button" on-click="onCancelClick_">

chrome/browser/resources/new_tab_page/customize_dialog.js

@@ -5,6 +5,8 @@
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import './customize_themes.js';
+import 'chrome://resources/polymer/v3_0/iron-pages/iron-pages.js';
+import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -27,6 +29,12 @@ class CustomizeDialogElement extends PolymerElement {
     return {
       /** @type {!newTabPage.mojom.Theme} */
       theme: Object,
+
+      /** @private */
+      selectedPage_: {
+        type: String,
+        value: 'backgrounds',
+      },
     };
   }
 
@@ -47,6 +55,19 @@ class CustomizeDialogElement extends PolymerElement {
     this.pageHandler_.confirmThemeChanges();
     this.$.dialog.close();
   }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onMenuItemKeyDown_(e) {
+    if (!['Enter', ' '].includes(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    this.selectedPage_ = e.target.getAttribute('page-name');
+  }
 }
 
 customElements.define(CustomizeDialogElement.is, CustomizeDialogElement);

chrome/browser/resources/new_tab_page/customize_themes.html

@@ -48,8 +48,8 @@
 
   #themesContainer {
     display: inline-grid;
-    grid-column-gap: 25px;
-    grid-row-gap: 25px;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
     grid-template-columns: repeat(var(--num-theme-columns), auto);
     outline-width: 0;
     padding: 3px;

chrome/browser/resources/new_tab_page/icons/backgrounds.svg

+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" id="a"/></defs><use xlink:href="#a"/></svg>
\ No newline at end of file

chrome/browser/resources/new_tab_page/icons/colors.svg

+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" id="a"/></defs><use xlink:href="#a"/></svg>
\ No newline at end of file

chrome/browser/resources/new_tab_page/icons/link.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"/><path fill="#fff" fill-rule="nonzero" d="M1.52 8A2.482 2.482 0 0 1 4 5.52h3.2V4H4C1.792 4 0 5.792 0 8s1.792 4 4 4h3.2v-1.52H4A2.482 2.482 0 0 1 1.52 8zm3.28.8h6.4V7.2H4.8v1.6zM12 4H8.8v1.52H12A2.482 2.482 0 0 1 14.48 8 2.482 2.482 0 0 1 12 10.48H8.8V12H12c2.208 0 4-1.792 4-4s-1.792-4-4-4z"/></g></svg>
\ No newline at end of file

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -37,6 +37,12 @@
           file="icons/brush.svg" type="BINDATA" compress="gzip" />
       <include name="IDR_NEW_TAB_PAGE_PENCIL_ICON_SVG"
           file="icons/icon_pencil.svg" type="BINDATA" compress="gzip" />
+      <include name="IDR_NEW_TAB_PAGE_LINK_ICON_SVG"
+          file="icons/link.svg" type="BINDATA" compress="gzip" />
+      <include name="IDR_NEW_TAB_PAGE_BACKGROUNDS_ICON_SVG"
+          file="icons/backgrounds.svg" type="BINDATA" compress="gzip" />
+      <include name="IDR_NEW_TAB_PAGE_COLORS_ICON_SVG"
+          file="icons/colors.svg" type="BINDATA" compress="gzip" />
     </includes>
     <structures>
       <structure name="IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML"

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -58,11 +58,14 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource() {
       {"urlField", IDS_NTP_CUSTOM_LINKS_URL},
 
       // Customize button and dialog.
+      {"backgroundsMenuItem", IDS_NTP_CUSTOMIZE_MENU_BACKGROUND_LABEL},
       {"cancelButton", IDS_CANCEL},
       {"colorPickerLabel", IDS_NTP_CUSTOMIZE_COLOR_PICKER_LABEL},
       {"customizeButton", IDS_NTP_CUSTOMIZE_BUTTON_LABEL},
       {"defaultThemeLabel", IDS_NTP_CUSTOMIZE_DEFAULT_LABEL},
       {"doneButton", IDS_DONE},
+      {"shortcutsMenuItem", IDS_NTP_CUSTOMIZE_MENU_SHORTCUTS_LABEL},
+      {"themesMenuItem", IDS_NTP_CUSTOMIZE_MENU_COLOR_LABEL},
       {"thirdPartyThemeDescription", IDS_NTP_CUSTOMIZE_3PT_THEME_DESC},
       {"uninstallThirdPartyThemeButton", IDS_NTP_CUSTOMIZE_3PT_THEME_UNINSTALL},
   };

chrome/test/data/webui/new_tab_page/customize_dialog_focus_test.js

+// Copyright 2020 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.
+
+import 'chrome://new-tab-page/customize_dialog.js';
+
+import {keydown} from 'chrome://test/new_tab_page/test_support.js';
+import {flushTasks} from 'chrome://test/test_util.m.js';
+
+suite('NewTabPageCustomizeDialogFocusTest', () => {
+  /** @type {!CustomizeDialogElement} */
+  let customizeDialog;
+
+  setup(async () => {
+    PolymerTest.clearBody();
+
+    customizeDialog = document.createElement('ntp-customize-dialog');
+    document.body.appendChild(customizeDialog);
+    await flushTasks();
+  });
+
+  test('space selects focused menu item', async () => {
+    // Arrange.
+    const menuItem = customizeDialog.shadowRoot.querySelector(
+        '.menu-item[page-name="themes"');
+    menuItem.focus();
+
+    // Act.
+    keydown(menuItem, ' ');
+
+    // Assert.
+    assertEquals(customizeDialog.$.menu.selected, 'themes');
+  });
+
+  test('enter selects focused menu item', async () => {
+    // Arrange.
+    const menuItem = customizeDialog.shadowRoot.querySelector(
+        '.menu-item[page-name="shortcuts"');
+    menuItem.focus();
+
+    // Act.
+    keydown(menuItem, 'Enter');
+
+    // Assert.
+    assertEquals(customizeDialog.$.menu.selected, 'shortcuts');
+  });
+});

chrome/test/data/webui/new_tab_page/customize_dialog_test.js

@@ -4,19 +4,42 @@
 
 import 'chrome://new-tab-page/customize_dialog.js';
 
+import {flushTasks} from 'chrome://test/test_util.m.js';
+
 suite('NewTabPageCustomizeDialogTest', () => {
   /** @type {!CustomizeDialogElement} */
   let customizeDialog;
 
-  setup(() => {
+  setup(async () => {
     PolymerTest.clearBody();
 
     customizeDialog = document.createElement('ntp-customize-dialog');
     document.body.appendChild(customizeDialog);
+    await flushTasks();
   });
 
-  test('create customize dialog opens cr dialog', async () => {
+  test('creating customize dialog opens cr dialog', () => {
     // Assert.
     assertTrue(customizeDialog.$.dialog.open);
   });
+
+  test('background page selected at start', () => {
+    // Assert.
+    const shownPages =
+        customizeDialog.shadowRoot.querySelectorAll('#pages .iron-selected');
+    assertEquals(shownPages.length, 1);
+    assertEquals(shownPages[0].getAttribute('page-name'), 'backgrounds');
+  });
+
+  test('selecting menu item shows page', async () => {
+    // Act.
+    customizeDialog.$.menu.select('themes');
+    await flushTasks();
+
+    // Assert.
+    const shownPages =
+        customizeDialog.shadowRoot.querySelectorAll('#pages .iron-selected');
+    assertEquals(shownPages.length, 1);
+    assertEquals(shownPages[0].getAttribute('page-name'), 'themes');
+  });
 });

chrome/test/data/webui/new_tab_page/new_tab_page_interactive_test.js

@@ -39,6 +39,19 @@ TEST_F('NewTabPageMostVisitedFocusTest', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var NewTabPageCustomizeDialogFocusTest =
+    class extends NewTabPageInteractiveTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/customize_dialog_focus_test.js';
+  }
+};
+
+TEST_F('NewTabPageCustomizeDialogFocusTest', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var NewTabPageCustomizeThemesFocusTest =
     class extends NewTabPageInteractiveTest {

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -34,6 +34,8 @@
     --google-blue-refresh-300: rgb(var(--google-blue-refresh-300-rgb));
     --google-blue-refresh-500-rgb: 66, 133, 244;  /* #4285f4 */
     --google-blue-refresh-500: rgb(var(--google-blue-refresh-500-rgb));
+    --google-blue-refresh-700-rgb: 25, 103, 210;  /* #1966d2 */
+    --google-blue-refresh-700: rgb(var(--google-blue-refresh-700-rgb));
 
     --google-green-refresh-300-rgb: 129, 201, 149;  /* #81c995 */
     --google-green-refresh-300: rgb(var(--google-green-refresh-300-rgb));