RPC Explorer

server/static/rpcexplorer/rpc-explorer.html

Index: server/static/rpcexplorer/rpc-explorer.html
diff --git a/server/static/rpcexplorer/rpc-explorer.html b/server/static/rpcexplorer/rpc-explorer.html
new file mode 100644
index 0000000000000000000000000000000000000000..fe9fa5b78e08b85d578f865875e7257bfd828612
--- /dev/null
+++ b/server/static/rpcexplorer/rpc-explorer.html
@@ -0,0 +1,121 @@
+<!--
+  Copyright 2016 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.
+  -->
+
+<link rel="import" href="../bower_components/app-router/app-router.html">
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="/static/common/rpc/rpc-client.html">
+
+<link rel="import" href="rpc-descriptor-util.html">
+<link rel="import" href="rpc-method.html">
+<link rel="import" href="rpc-service-list.html">
+<link rel="import" href="rpc-service.html">
+
+
+<!-- The `rpc-explorer` is the top-level element of RPC Explorer -->
+<dom-module id="rpc-explorer">
+  <template>
+    <style>
+      li[hidden] {

[Bons, 2016/02/23 15:52:29]

[hidden] is already a user-agent defined selector.
http://caniuse.com/#feat=hidden

[nodir, 2016/02/23 18:32:25]

yeah, it is not displayed indeed, but bootstrap breadcrumbs still shows "/"
nodes unless I make the list item display: hidden

[Bons, 2016/02/24 06:10:56]

Acknowledged.

+        display: none;
+      }
+    </style>
+
+    <!-- Load server description -->
+    <rpc-client
+        auto
+        service="discovery.Discovery"
+        method="Describe"
+        last-response="{{serverDescription}}">
+    </rpc-client>
+
+    <div class="navbar navbar-default" role="navigation">
+      <div class="navbar-header">
+        <button
+            type="button"

[Bons, 2016/02/23 15:52:29]

i don't think you need type="button" for a button element.

[nodir, 2016/02/23 18:32:26]

Done.

+            class="navbar-toggle collapsed"
+            data-toggle="collapse"
+            data-target="#bs-example-navbar-collapse-1"
+            aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <span class="navbar-brand">
+          <span id="progress-spinner" class="not-spinning">
+            <a href="#">RPC Explorer</a>
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <ol class="breadcrumb">
+      <li>
+        <a href="#">Home</a>
+      </li>
+      <li hidden="{{!service}}">
+        <a href="#/services/[[service]]">[[service]]</a>
+      </li>
+      <li hidden="{{!method}}">
+        <a href="#/services/[[service]]/[[method]">[[method]]</a>
+      </li>
+    </ol>
+
+    <app-router

[Bons, 2016/02/23 15:52:29]

can you put in a TODO to use the HTML5 history api instead of # for navigation?

[nodir, 2016/02/23 18:32:25]

Used HTML5 history API.
Better not to change it in future because shared URLs with request query
parameter will break, or we would have to write code that makes URLs backward
compatible.

+        id="router"
+        trailing-slash="ignore"
+        on-activate-route-end="_onRouted"
+        on-before-data-binding="_onRouteBinding">
+      <app-route path="/services" element="rpc-service-list"></app-route>
+      <app-route path="/services/:service" element="rpc-service"></app-route>
+      <app-route path="/services/:service/:method" element="rpc-method"></app-route>
+      <app-route path="*" redirect="/services"></app-route>
+    </app-router>
+  </template>
+
+  <script>
+    'use strict';
+
+    Polymer({
+      is: 'rpc-explorer',
+
+      properties: {
+
+        service: String,
+
+        method: String,
+
+        /** @type {DescribeResponse} */
+        serverDescription: {
+          type: Object,
+          observer: '_onServerDescriptionChanged'
+        }
+      },
+
+      _onRouteBinding: function(e) {
+        if (this.serverDescription) {
+          e.detail.model.description = this.serverDescription.description;
+          e.detail.model.serviceNames = this.serverDescription.services;
+        }
+      },
+
+      _onServerDescriptionChanged: function(e) {
+        if (this.serverDescription) {
+          rpcExplorer.descUtil.annotateSet(this.serverDescription.description);
+          // Recreate route model.
+          this.$.router.go(document.location.hash.substring(1));
+        }
+      },
+
+      _onRouted: function(e) {
+        var model = e.detail.model || {};
+        this.service = model.service || '';
+        this.method = model.method || '';
+      }
+    });
+  </script>
+</dom-module>