navigation: Add page-toolbar to navigation_view_panel

Adds an optional page-toolbar to NavigationViewPanel.
NavigationViewPanel is responsible for styling the grid layout
of the toolbar/sidebar/main content of the page.

Update Diagnostics and Shortcut Customization apps to use the
page-toolbar.

No added functionality to page-toolbar.

Screenshot: http://shortn/_cwg0FYzu4h
http://shortn/_WPoRMBJmCe

Bug: 1205539
Change-Id: I98f15d394fcdc59e4aff8e789fb3b4078488a705
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3098786
Commit-Queue: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/main@{#913167}

ash/webui/common/resources/navigation_view_panel.html

@@ -5,26 +5,61 @@
     position: fixed;
   }
 
-  #container {
-    align-items: flex-start;
+  :host([show-tool-bar]) #container {
+    display: grid;
+    grid-template-areas: "head head" "sideNav main";
+    grid-template-columns: 1fr 4fr;
+    grid-template-rows: 1fr 9fr;
+    width: 100%;
+  }
+
+  :host(:not([show-tool-bar])) #container {
+    display: grid;
+    grid-template-areas: "sideNav main";
+    grid-template-columns: 1fr 4fr;
+  }
+
+  :host([show-tool-bar]) #topNav {
+    grid-area: head;
+    position: sticky;
+    top: 0;
+  }
+
+  #sideNav {
+    grid-area: sideNav;
     display: flex;
-    flex: 1;
-    position: relative;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  #navigationBody {
+    grid-area: main;
   }
 
   .left-aligned {
-    height: 100%;
     position: sticky;
     top: 75px;
   }
+
+  page-toolbar {
+    font-size: 0.7rem;
+  }
 </style>
 
 <div id="container">
-  <div id="navigationSelector" class="left-aligned">
-    <navigation-selector menu-items={{menuItems_}}
-        selected-item={{selectedItem}}>
-    </navigation-selector>
-    <slot name="bottom-nav-content"></slot>
+  <template is="dom-if" if="[[showToolBar]]">
+    <div id="topNav">
+      <page-toolbar title="[[title]]"></page-toolbar>
+    </div>
+  </template>
+
+  <div id="sideNav">
+    <div id="navigationSelector" class="left-aligned">
+      <navigation-selector menu-items={{menuItems_}}
+          selected-item={{selectedItem}}>
+      </navigation-selector>
+      <slot name="bottom-nav-content"></slot>
+    </div>
   </div>
 
   <div id="navigationBody" class="right-aligned"></div>

ash/webui/common/resources/navigation_view_panel.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './page_toolbar.js';
+
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -43,7 +45,7 @@ export class NavigationViewPanelElement extends PolymerElement {
        */
       selectedItem: {
         type: Object,
-        observer: "selectedItemChanged_",
+        observer: 'selectedItemChanged_',
         value: null,
       },
 
@@ -54,7 +56,28 @@ export class NavigationViewPanelElement extends PolymerElement {
       menuItems_: {
         type: Array,
         value: () => [],
-      }
+      },
+
+      /**
+       * This title only appears if |showToolBar| is True. Is otherwise a
+       * no-opt if title is set and |showToolbar| is False.
+       */
+      title: {
+        type: String,
+        value: '',
+      },
+
+      /**
+       * Can only be set to True if specified from the parent element by adding
+       * show-tool-bar as an attribute to <navigation-view-panel>. If True,
+       * a toolbar will appear at the top of the navigation view panel with
+       * a 2 column view below it (sidebar + page). If False, navigation view
+       * panel will only be a 2 column view (sidebar + page).
+       */
+      showToolBar: {
+        type: Boolean,
+        value: false,
+      },
     }
   }
 

ash/webui/diagnostics_ui/resources/diagnostics_app.html

@@ -18,8 +18,8 @@
 </style>
 <div id="diagnosticsAppContainer">
   <div hidden$="[[!showNavPanel_]]">
-    <page-toolbar title="[[i18n('diagnosticsTitle')]]"></page-toolbar>
-    <navigation-view-panel id="navigationPanel">
+    <navigation-view-panel id="navigationPanel"
+        title="[[i18n('diagnosticsTitle')]]" show-tool-bar>
       <div slot="bottom-nav-content" class="session-log-container">
         <cr-button on-click="onSessionLogClick_" class="session-log-button"
             hidden="[[!isLoggedIn_]]">

ash/webui/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -54,7 +54,6 @@
       align-items: center;
       display: flex;
       flex-direction: column;
-      padding-inline: var(--container-padding);
       width: var(--content-container-width);
     }
 

ash/webui/shortcut_customization_ui/resources/shortcut_customization_app.html

@@ -2,14 +2,11 @@
   :host {
     @apply --shortcut-customization-default-font;
   }
-
-  page-toolbar {
-    font-size: 0.7rem;
-  }
 </style>
 <!-- TODO(jimmyxgong): Localize this title -->
-<page-toolbar title="Shortcut Customization"></page-toolbar>
-<navigation-view-panel id="navigationPanel"></navigation-view-panel>
+<navigation-view-panel id="navigationPanel" title="Shortcut Customization"
+    show-tool-bar>
+</navigation-view-panel>
 
 <template is="dom-if" if="[[showEditDialog_]]" restamp>
   <accelerator-edit-dialog id="editDialog"

chrome/test/data/webui/chromeos/ash_common/navigation_view_panel_test.js

@@ -193,4 +193,19 @@ export function navigationViewPanelTestSuite() {
     assertFalse(!!viewElement.shadowRoot.querySelector(`#${id1}`));
     assertFalse(!!viewElement.shadowRoot.querySelector(`#${dummyPage2}`));
   });
+
+  test('toolBarVisible', async () => {
+    const dummyPage1 = 'dummy-page1';
+    const expectedTitle = 'title';
+    viewElement.title = expectedTitle;
+    viewElement.showToolBar = true;
+
+    await addNavigationSection('dummyPage1', dummyPage1);
+
+    assertFalse(viewElement.shadowRoot.querySelector(`#${dummyPage1}`).hidden);
+    // The title is only visible if the toolbar is stamped.
+    const pageToolbar = viewElement.shadowRoot.querySelector('page-toolbar');
+    const toolbarTitle = pageToolbar.$.title.textContent.trim();
+    assertEquals(expectedTitle, toolbarTitle);
+  });
 }