[Nearby] Add logging tab to chrome://nearby-internals

Add a tab that will eventually display Nearby-related logging. See
the following screenshot for display:
https://screenshot.googleplex.com/rWNCYHoapn3.

Bug: 1093634
Change-Id: I61b291c20e3563c88a64e398b4320403496f7e18
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2246557
Commit-Queue: Juliet Levesque <julietlevesque@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Josh Nohle <nohle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#783039}

chrome/browser/resources/nearby_internals/BUILD.gn

@@ -7,15 +7,29 @@ import("//tools/polymer/html_to_js.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  deps = [ ":nearby_internals" ]
+  deps = [
+    ":logging_tab",
+    ":nearby_internals",
+  ]
 }
 
 js_library("nearby_internals") {
+  deps = [
+    ":logging_tab",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:cr.m",
+  ]
+}
+
+js_library("logging_tab") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
 
 html_to_js("web_components") {
-  js_files = [ "nearby_internals.js" ]
+  js_files = [
+    "logging_tab.js",
+    "nearby_internals.js",
+  ]
 }

chrome/browser/resources/nearby_internals/logging_tab.html

+<h1>Logs page coming soon.</h1>

chrome/browser/resources/nearby_internals/logging_tab.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 {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'logging-tab',
+
+  _template: html`{__html_template__}`,
+});

chrome/browser/resources/nearby_internals/nearby_internals.html

-<h1>Hello, world!!</h1>
+<style>
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  app-header {
+    background-color: rgb(0, 134, 179);
+    color: white;
+    font-size: 200%;
+    padding: 8px;
+    text-align: center;
+  }
+
+  iron-pages {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  iron-pages > * {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+  }
+
+</style>
+<app-header>
+  <app-toolbar>Nearby Share Internals</app-toolbar>
+</app-header>
+<iron-location path="{{path_}}"></iron-location>
+<cr-tabs selected="{{selectedTabIndex_}}" tab-names="[[tabNames_]]"></cr-tabs>
+<iron-pages selected="[[selectedTabIndex_]]">
+  <logging-tab></logging-tab>
+</iron-pages>

chrome/browser/resources/nearby_internals/nearby_internals.js

@@ -2,10 +2,77 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/cr_tabs/cr_tabs.m.js';
+import 'chrome://resources/polymer/v3_0/iron-location/iron-location.js';
+import 'chrome://resources/polymer/v3_0/iron-pages/iron-pages.js';
+import './logging_tab.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 Polymer({
   is: 'nearby-internals',
 
   _template: html`{__html_template__}`,
+
+  properties: {
+    /** @private */
+    selectedTabIndex_: {
+      type: Number,
+      value: 0,
+      observer: 'selectedTabChanged_',
+    },
+
+    /** @private */
+    path_: {
+      type: String,
+      value: '',
+      observer: 'pathChanged_',
+    },
+
+    /** @private */
+    tabNames_: {
+      type: Array,
+      value: () => ['Logs'],
+      readonly: true,
+    },
+  },
+
+  /**
+   * Updates the current tab location to reflect selection change
+   * @param {number} newValue
+   * @param {number|undefined} oldValue
+   * @private
+   */
+  selectedTabChanged_(newValue, oldValue) {
+    if (!oldValue) {
+      return;
+    }
+    const lowerCaseTabName = this.tabNames_[newValue].toLowerCase();
+    this.path_ = '/' + lowerCaseTabName.replace(/\s+/g, '');
+    this.selectedTabFromPath_(this.path_);
+  },
+
+  /**
+   * Returns the index of the currently selected tab corresponding to the
+   * path or zero if no match.
+   * @param {string} path
+   * @return {number}
+   * @private
+   */
+  selectedTabFromPath_(path) {
+    const index = this.tabNames_.findIndex(tab => path === tab.toLowerCase());
+    if (index < 0){
+      return 0;
+    }
+    return index;
+  },
+
+  /**
+   * Updates the selection property on path change.
+   * @param {string} newValue
+   * @param {string|undefined} oldValue
+   * @private
+   */
+  pathChanged_(newValue, oldValue) {
+    this.selectedTabIndex_ = this.selectedTabFromPath_(newValue.substr(1));
+  },
 });

chrome/browser/resources/nearby_internals/nearby_internals_resources.grd

@@ -15,6 +15,10 @@
       <include name="IDR_NEARBY_INTERNALS_INDEX_HTML"
                file="index.html"
                type="BINDATA"/>
+      <include name="IDR_NEARBY_INTERNALS_LOGGING_TAB_JS"
+               file="${root_gen_dir}\chrome\browser\resources\nearby_internals\logging_tab.js"
+               use_base_dir="false"
+               type="BINDATA"/>
       <include name="IDR_NEARBY_INTERNALS_NEARBY_INTERNALS_JS"
                file="${root_gen_dir}\chrome\browser\resources\nearby_internals\nearby_internals.js"
                use_base_dir="false"