[Nearby] Add HTTP Messages tab to chrome://nearby-internals.

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

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

chrome/browser/resources/nearby_internals/BUILD.gn

@@ -8,8 +8,11 @@ import("//tools/polymer/html_to_js.gni")
 js_type_check("closure_compile") {
   is_polymer3 = true
   deps = [
+    ":http_message_object",
+    ":http_tab",
     ":log_object",
     ":logging_tab",
+    ":nearby_http_browser_proxy",
     ":nearby_internals",
     ":nearby_logs_browser_proxy",
     ":types",
@@ -18,8 +21,11 @@ js_type_check("closure_compile") {
 
 js_library("nearby_internals") {
   deps = [
+    ":http_message_object",
+    ":http_tab",
     ":log_object",
     ":logging_tab",
+    ":nearby_http_browser_proxy",
     ":nearby_logs_browser_proxy",
     ":types",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -53,6 +59,30 @@ js_library("nearby_logs_browser_proxy") {
   ]
 }
 
+js_library("nearby_http_browser_proxy") {
+  deps = [
+    ":types",
+    "//ui/webui/resources/js:cr.m",
+  ]
+}
+
+js_library("http_tab") {
+  deps = [
+    ":http_message_object",
+    ":nearby_http_browser_proxy",
+    ":types",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:cr.m",
+  ]
+}
+
+js_library("http_message_object") {
+  deps = [
+    ":nearby_http_browser_proxy",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("types") {
 }
 
@@ -61,6 +91,8 @@ js_library("shared_style") {
 
 html_to_js("web_components") {
   js_files = [
+    "http_message_object.js",
+    "http_tab.js",
     "log_object.js",
     "logging_tab.js",
     "nearby_internals.js",

chrome/browser/resources/nearby_internals/http_message_object.html

+<style>
+  :host {
+    --standard-border: 1px solid black;
+  }
+
+  #item {
+    border-left: var(--standard-border);
+    border-right: var(--standard-border);
+    border-top: var(--standard-border);
+  }
+
+  #header {
+    display: flex;
+    padding: 6px;
+  }
+
+  #body {
+    display: inline-block;
+    margin: 10px;
+    padding: 5px;
+    text-align: left;
+    white-space: pre-line;
+    width: 100%;
+  }
+
+  #time {
+    display: flex;
+    font-size: 10px;
+    margin-bottom: 4px;
+    padding: 6px;
+  }
+
+  .request {
+    background-color: rgb(255, 230, 204);
+  }
+
+  .response {
+    background-color: rgb(255, 255, 204);
+  }
+
+  #flex {
+    flex: 1;
+  }
+</style>
+<div id="item">
+  <div id="header">
+    <span>
+      [[rpcToString_(item.rpc)]]:[[directionToString_(item.direction)]]
+    </span>
+    <div id="flex"></div>
+    <span id="time">[[item.time]]</span>
+    <cr-expand-button id="expandContent" class="cr-row"
+          expanded="{{contentExpanded_}}">
+    </cr-expand-button>
+  </div>
+  <iron-collapse opened="[[contentExpanded_]]">
+    <p id="body">[[item.body]]</p>
+  </iron-collapse>
+</div>

chrome/browser/resources/nearby_internals/http_message_object.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';
+import {Direction, Rpc} from './types.js';
+
+Polymer({
+  is: 'http-message-object',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /**
+     * Underlying HTTPMessage data for this item. Contains read-only fields
+     * from the NearbyShare backend, as well as fields computed by http tab.
+     * Type: {!HttpMessage}
+     */
+    item: {
+      type: Object,
+      observer: 'itemChanged_',
+    },
+  },
+
+  /**
+   * Sets the Http message style based on whether it is a response or request.
+   * @private
+   */
+  itemChanged_() {
+    switch (this.item.direction) {
+      case Direction.REQUEST:
+        this.$['item'].classList.add('request');
+        break;
+      case Direction.RESPONSE:
+        this.$['item'].classList.add('response');
+        break;
+      default:
+        break;
+    }
+  },
+
+  /**
+   * Sets the string representation of RPC type.
+   * @private
+   * @param {number} rpc
+   * @return
+   */
+  rpcToString_(rpc) {
+    switch (rpc) {
+      case Rpc.DEVICE:
+        return 'UpdateDevice RPC';
+        break;
+      case Rpc.CONTACT:
+        return 'ListContactPeople RPC';
+        break;
+      case Rpc.CERTIFICATE:
+        return 'ListPublicCertificates RPC';
+        break;
+      default:
+        break;
+    }
+  },
+
+  /**
+   * Returns the string representation of RPC type.
+   * @private
+   * @param {number} direction
+   * @return
+   */
+  directionToString_(direction) {
+    switch (direction) {
+      case Direction.REQUEST:
+        return 'Request';
+        break;
+      case Direction.RESPONSE:
+        return 'Response';
+        break;
+      default:
+        break;
+    }
+  },
+});

chrome/browser/resources/nearby_internals/http_tab.html

+<style include="shared-style">
+  :host {
+    --standard-border: 1px solid black;
+  }
+
+  #http-list:last-child {
+    border-bottom: var(--standard-border);
+  }
+
+  #clearButton {
+    float: right;
+  }
+</style>
+<cr-button on-click="onUpdateDeviceClicked_" class="internals-button">
+  Call UpdateDevice RPC
+</cr-button>
+<cr-button on-click="onListContactPeopleClicked_" class="internals-button">
+  Call ListContactPeople RPC
+</cr-button>
+<cr-button on-click="onListPublicCertificatesClicked_" class="internals-button">
+  Call ListPublicCertificates RPC
+</cr-button>
+<cr-button on-click="onClearMessagesButtonClicked_" class="internals-button"
+    id="clearButton" disabled="[[!httpMessageList_.length]]">
+ Clear Messages
+</cr-button>
+
+<iron-list items="[[httpMessageList_]]" as="http-message" id="http-list"
+    hidden="[[!httpMessageList_.length]]">
+  <template>
+    <http-message-object item="[[http-message]]">
+    </http-message-object>
+  </template>
+</iron-list>

chrome/browser/resources/nearby_internals/http_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 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
+import './http_message_object.js';
+import './shared_style.js';
+
+import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {NearbyHttpBrowserProxy} from './nearby_http_browser_proxy.js';
+import {HttpMessage} from './types.js';
+
+Polymer({
+  is: 'http-tab',
+
+  _template: html`{__html_template__}`,
+
+  behaviors: [
+    WebUIListenerBehavior,
+  ],
+
+  properties: {
+
+    /**
+     * @private {!Array<!HttpMessage>}
+     */
+    httpMessageList_: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  /** @private {?NearbyHttpBrowserProxy} */
+  browserProxy_: null,
+
+  /**
+   * Set |browserProxy_|.
+   * @override
+   */
+  created() {
+    this.browserProxy_ = NearbyHttpBrowserProxy.getInstance();
+  },
+
+  /**
+   * When the page is initialized, notify the C++ layer to allow JavaScript and
+   * initialize WebUI Listeners.
+   * @override
+   */
+  attached() {
+    this.addWebUIListener(
+        'http-message-added', message => this.onHttpMessageAdded_(message));
+    this.browserProxy_.initialize();
+  },
+
+  /**
+   * Triggers UpdateDevice RPC.
+   * @private
+   */
+  onUpdateDeviceClicked_() {
+    this.browserProxy_.updateDevice();
+  },
+
+  /**
+   * Triggers ListContactPeople RPC.
+   * @private
+   */
+  onListContactPeopleClicked_() {
+    this.browserProxy_.listContactPeople();
+  },
+
+  /**
+   * Triggers ListPublicCertificates RPC.
+   * @private
+   */
+  onListPublicCertificatesClicked_() {
+    this.browserProxy_.listPublicCertificates();
+  },
+
+  /**
+   * Clears the |httpMessageList_| messages displayed on the page.
+   * @private
+   */
+  onClearMessagesButtonClicked_() {
+    this.httpMessageList_ = [];
+  },
+
+  /**
+   * Adds a HTTP message to the javascript message list displayed. Called from
+   * the C++ WebUI handler when a HTTP message is created in response to a Rpc.
+   * @param {!HttpMessage} message
+   * @private
+   */
+  onHttpMessageAdded_(message) {
+    this.parseAndAddMessages_([message]);
+  },
+
+  /**
+   * Parses an array of HTTP messages and adds to the javascript list.
+   * @param {!Array<!HttpMessage>} messages
+   * @private
+   */
+  parseAndAddMessages_(messages) {
+    messages.unshift('httpMessageList_');
+    this.push.apply(this, messages);
+  },
+});

chrome/browser/resources/nearby_internals/nearby_http_browser_proxy.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 {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+import {HttpMessage} from './types.js';
+
+/**
+ * JavaScript hooks into the native WebUI handler to pass HttpMessages to the
+ * Http Messages tab.
+ */
+export class NearbyHttpBrowserProxy {
+  /**
+   * Initializes web contents in the WebUI handler.
+   */
+  initialize() {
+    chrome.send('initialize');
+  }
+
+  /**
+   * Triggers UpdateDevice RPC.
+   */
+  updateDevice() {
+    chrome.send('updateDevice');
+  }
+
+  /**
+   * Triggers ListContactPeople RPC.
+   */
+  listContactPeople() {
+    chrome.send('listContactPeople');
+  }
+
+  /**
+   * Triggers ListPublicCertificates RPC.
+   */
+  listPublicCertificates() {
+    chrome.send('listPublicCertificates');
+  }
+}
+
+addSingletonGetter(NearbyHttpBrowserProxy);

chrome/browser/resources/nearby_internals/nearby_internals.html

@@ -32,4 +32,5 @@
 <cr-tabs selected="{{selectedTabIndex_}}" tab-names="[[tabNames_]]"></cr-tabs>
 <iron-pages selected="[[selectedTabIndex_]]">
   <logging-tab></logging-tab>
+  <http-tab></http-tab>
 </iron-pages>

chrome/browser/resources/nearby_internals/nearby_internals.js

@@ -5,9 +5,9 @@
 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 './http_tab.js';
 import './logging_tab.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {NearbyLogsBrowserProxy} from './nearby_logs_browser_proxy.js';
 
 Polymer({
   is: 'nearby-internals',
@@ -32,7 +32,7 @@ Polymer({
     /** @private */
     tabNames_: {
       type: Array,
-      value: () => ['Logs'],
+      value: () => ['Logs', 'HTTP Messages'],
       readonly: true,
     },
 
@@ -48,9 +48,10 @@ Polymer({
     if (!oldValue) {
       return;
     }
+    const defaultTab = this.tabNames_[0].toLowerCase();
     const lowerCaseTabName = this.tabNames_[newValue].toLowerCase();
-    this.path_ = '/' + lowerCaseTabName.replace(/\s+/g, '');
-    this.selectedTabFromPath_(this.path_);
+    this.path_ =
+        '/' + (lowerCaseTabName === defaultTab ? '' : lowerCaseTabName);
   },
 
   /**

chrome/browser/resources/nearby_internals/nearby_internals_resources.grd

@@ -15,6 +15,14 @@
       <include name="IDR_NEARBY_INTERNALS_TYPES_JS"
                file="types.js"
                type="BINDATA"/>
+      <include name="IDR_NEARBY_INTERNALS_HTTP_MESSAGE_OBJECT_JS"
+               file="${root_gen_dir}\chrome\browser\resources\nearby_internals\http_message_object.js"
+               use_base_dir="false"
+               type="BINDATA"/>
+      <include name="IDR_NEARBY_INTERNALS_HTTP_TAB_JS"
+               file="${root_gen_dir}\chrome\browser\resources\nearby_internals\http_tab.js"
+               use_base_dir="false"
+               type="BINDATA"/>
       <include name="IDR_NEARBY_INTERNALS_INDEX_HTML"
                file="index.html"
                type="BINDATA"/>
@@ -30,6 +38,9 @@
                file="${root_gen_dir}\chrome\browser\resources\nearby_internals\nearby_internals.js"
                use_base_dir="false"
                type="BINDATA"/>
+      <include name="IDR_NEARBY_INTERNALS_NEARBY_HTTP_BROWSER_PROXY_JS"
+               file="nearby_http_browser_proxy.js"
+               type="BINDATA"/>
       <include name="IDR_NEARBY_INTERNALS_NEARBY_LOGS_BROWSER_PROXY_JS"
                file="nearby_logs_browser_proxy.js"
                type="BINDATA"/>

chrome/browser/resources/nearby_internals/types.js

@@ -25,3 +25,36 @@ export const Severity = {
  *            severity: Severity}}
  */
 export let LogMessage;
+
+/**
+ * RPC enum based on the HTTP request/response object. Needs to stay in sync
+ * with the NearbyInternalsHttpHandler C++ code, defined in
+ * chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.cc.
+ * @enum {number}
+ */
+export const Rpc = {
+  CERTIFICATE: 0,
+  CONTACT: 1,
+  DEVICE: 2
+};
+
+/**
+ * Direction enum based on the HTTP request/response object. Needs to stay in
+ * sync with the NearbyInternalsHttpHandler C++ code, defined in
+ * chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.cc.
+ * @enum {number}
+ */
+export const Direction = {
+  REQUEST: 0,
+  RESPONSE: 1
+};
+
+/**
+ * The HTTP request/response object, sent by NearbyInternalsHttpHandler
+ * chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.cc.
+ * @typedef {{body: string,
+ *            time: string,
+ *            rpc: !Rpc,
+ *            direction: !Direction}}
+ */
+export let HttpMessage;

chrome/browser/ui/BUILD.gn

@@ -1317,6 +1317,8 @@ static_library("ui") {
       "webui/media_router/media_router_internals_webui_message_handler.cc",
       "webui/media_router/media_router_internals_webui_message_handler.h",
       "webui/media_router/web_contents_display_observer.h",
+      "webui/nearby_internals/nearby_internals_http_handler.cc",
+      "webui/nearby_internals/nearby_internals_http_handler.h",
       "webui/nearby_internals/nearby_internals_logs_handler.cc",
       "webui/nearby_internals/nearby_internals_logs_handler.h",
       "webui/nearby_internals/nearby_internals_ui.cc",

chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.cc

+// 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.
+
+#include "chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.h"
+
+#include "base/bind.h"
+#include "base/values.h"
+
+namespace {
+
+// This enum class needs to stay in sync with the Rpc definition in
+// chrome/browser/resources/nearby_internals/types.js.
+enum class Rpc {
+  kCertificate = 0,
+  kContact = 1,
+  kDevice = 2
+};
+
+// This enum class needs to stay in sync with the Direction definition in
+// chrome/browser/resources/nearby_internals/types.js.
+enum class Direction {
+  kRequest = 0,
+  kResponse = 1
+};
+
+}  // namespace
+
+NearbyInternalsHttpHandler::NearbyInternalsHttpHandler() = default;
+
+NearbyInternalsHttpHandler::~NearbyInternalsHttpHandler() = default;
+
+void NearbyInternalsHttpHandler::RegisterMessages() {
+  web_ui()->RegisterMessageCallback(
+      "initialize",
+      base::BindRepeating(&NearbyInternalsHttpHandler::InitializeContents,
+                          base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "updateDevice",
+      base::BindRepeating(&NearbyInternalsHttpHandler::UpdateDevice,
+                          base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "listContactPeople",
+      base::BindRepeating(&NearbyInternalsHttpHandler::ListContactPeople,
+                          base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "listPublicCertificates",
+      base::BindRepeating(&NearbyInternalsHttpHandler::ListPublicCertificates,
+                          base::Unretained(this)));
+}
+
+void NearbyInternalsHttpHandler::OnJavascriptAllowed() {}
+
+void NearbyInternalsHttpHandler::OnJavascriptDisallowed() {}
+
+void NearbyInternalsHttpHandler::InitializeContents(
+    const base::ListValue* args) {
+  AllowJavascript();
+}
+
+void NearbyInternalsHttpHandler::UpdateDevice(const base::ListValue* args) {
+  // TODO(julietlevesque): Add functionality for Update Device call, which
+  // responds to javascript callback from chrome://nearby-internals HTTP
+  // Messages tab.
+}
+void NearbyInternalsHttpHandler::ListPublicCertificates(
+    const base::ListValue* args) {
+  // TODO(julietlevesque): Add functionality for List Public Certificates call,
+  // which responds to javascript callback from chrome://nearby-internals HTTP
+  // Messages tab.
+}
+void NearbyInternalsHttpHandler::ListContactPeople(
+    const base::ListValue* args) {
+  // TODO(julietlevesque): Add functionality for List ContactPeople call, which
+  // responds to javascript callback from chrome://nearby-internals HTTP
+  // Messages tab.
+}

chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.h

+// 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.
+
+#ifndef CHROME_BROWSER_UI_WEBUI_NEARBY_INTERNALS_NEARBY_INTERNALS_HTTP_HANDLER_H_
+#define CHROME_BROWSER_UI_WEBUI_NEARBY_INTERNALS_NEARBY_INTERNALS_HTTP_HANDLER_H_
+
+#include "base/memory/weak_ptr.h"
+#include "content/public/browser/web_ui_message_handler.h"
+
+namespace base {
+class ListValue;
+}  // namespace base
+
+// WebUIMessageHandler for HTTP Messages to pass messages to the
+// chrome://nearby-internals HTTP tab.
+class NearbyInternalsHttpHandler : public content::WebUIMessageHandler {
+ public:
+  NearbyInternalsHttpHandler();
+  NearbyInternalsHttpHandler(const NearbyInternalsHttpHandler&) = delete;
+  NearbyInternalsHttpHandler& operator=(const NearbyInternalsHttpHandler&) =
+      delete;
+  ~NearbyInternalsHttpHandler() override;
+
+  // content::WebUIMessageHandler
+  void RegisterMessages() override;
+  void OnJavascriptAllowed() override;
+  void OnJavascriptDisallowed() override;
+
+ private:
+  // Message handler callback that initializes JavaScript.
+  void InitializeContents(const base::ListValue* args);
+
+  // Message handler callback that calls Update Device RPC.
+  void UpdateDevice(const base::ListValue* args);
+
+  // Message handler callback that calls List Public Certificates RPC.
+  void ListPublicCertificates(const base::ListValue* args);
+
+  // Message handler callback that calls List Contacts RPC.
+  void ListContactPeople(const base::ListValue* args);
+
+  base::WeakPtrFactory<NearbyInternalsHttpHandler> weak_ptr_factory_{this};
+};
+
+#endif  // CHROME_BROWSER_UI_WEBUI_NEARBY_INTERNALS_NEARBY_INTERNALS_HTTP_HANDLER_H_

chrome/browser/ui/webui/nearby_internals/nearby_internals_ui.cc

@@ -10,6 +10,7 @@
 #include "base/feature_list.h"
 #include "chrome/browser/browser_features.h"
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/webui/nearby_internals/nearby_internals_http_handler.h"
 #include "chrome/browser/ui/webui/nearby_internals/nearby_internals_logs_handler.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/webui_url_constants.h"
@@ -42,6 +43,7 @@ NearbyInternalsUI::NearbyInternalsUI(content::WebUI* web_ui)
   content::WebUIDataSource::Add(profile, html_source);
 
   web_ui->AddMessageHandler(std::make_unique<NearbyInternalsLogsHandler>());
+  web_ui->AddMessageHandler(std::make_unique<NearbyInternalsHttpHandler>());
 }
 
 NearbyInternalsUI::~NearbyInternalsUI() = default;