Incoming references service request and UI.

runtime/bin/vmservice/observatory/deployed/web/index.html

Index: runtime/bin/vmservice/observatory/deployed/web/index.html
diff --git a/runtime/bin/vmservice/observatory/deployed/web/index.html b/runtime/bin/vmservice/observatory/deployed/web/index.html
index 1c6900f88eaf600b1346a406efdf21ed5b2a6fb1..d3d5f25af6ab76f0e7c06ba5ed75eadf5e8b06b5 100644
--- a/runtime/bin/vmservice/observatory/deployed/web/index.html
+++ b/runtime/bin/vmservice/observatory/deployed/web/index.html
@@ -648,6 +648,9 @@ hr {
 <polymer-element name="service-ref" extends="observatory-element">
 </polymer-element>
 
+<polymer-element name="any-service-ref" extends="observatory-element">
+</polymer-element>
+
 <polymer-element name="instance-ref" extends="service-ref">
   <template>
     <style>
@@ -2157,7 +2160,7 @@ hr {
 .break-wrap {
   word-wrap: break-word;
 }
-</style><a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template>
+</style><span><a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></span></template>
 </polymer-element>
 
 
@@ -2921,7 +2924,7 @@ hr {
   word-wrap: break-word;
 }
 </style>
-    <div>
+    <span>
       <template if="{{ ref['static'] }}">static</template>
       <template if="{{ ref['final'] }}">final</template>
       <template if="{{ ref['const'] }}">const</template>
@@ -2933,7 +2936,7 @@ hr {
         <instance-ref ref="{{ ref['declared_type'] }}"></instance-ref>
       </template>
       <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
-    </div>
+    </span>
   </template>
 </polymer-element>
 
@@ -13969,6 +13972,301 @@ hr {
 
 
 
+
+
+
+
+
+
+<polymer-element name="inbound-reference" extends="service-ref">
+  <template>
+    <style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+  padding-left: 5%;
+  padding-right: 5%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+  font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+  display: table;
+}
+
+.memberItem {
+  display: table-row;
+}
+
+.memberName, .memberValue {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style: italic;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+    <style>
+      .errorBox {
+        background-color: #f5f5f5;
+        border: 1px solid #ccc;
+        padding: 10px;
+        font-family: consolas, courier, monospace;
+        font-size: 1em;
+        line-height: 1.2em;
+        white-space: pre;
+      }
+    </style>
+    <div>
+      from <any-service-ref ref="{{ source }}"></any-service-ref>
+      <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>
+      <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-ref></template>
+
+      <curly-block callback="{{ expander() }}">
+        <div class="memberList">
+          <div class="memberItem">
+            <div class="memberName">
+              <template repeat="{{ reference in inboundReferences] }}">
+                <inbound-reference ref="{{ reference }}"></inbound-reference>
+              </template>
+            </div>
+          </div>
+        </div>
+      </curly-block>
+    </div>
+  </template>
+</polymer-element>
+
+
 <polymer-element name="instance-view" extends="observatory-element">
   <template>
     <style>
@@ -14291,12 +14589,12 @@ hr {
                 <div class="memberItem">
                   <div class="memberName">[{{ element['index']}}]</div>
                   <div class="memberValue">
-                    <instance-ref ref="{{ element['value'] }}"></instance-ref>
+                    <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
                     <template if="{{ element['parentField'] != null }}">
-                      in <field-ref ref="{{ element['parentField'] }}"></field-ref>
+                      in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
                     </template>
                     <template if="{{ element['parentListIndex'] != null }}">
-                      at list index {{ element['parentListIndex'] }} of
+                      in [{{ element['parentListIndex'] }}] of
                     </template>
                   </div>
                   </div>
@@ -14309,6 +14607,20 @@ hr {
               </template>
             </div>
           </div>
+          <div class="memberItem">
+            <div class="memberName">inbound references</div>
+            <div class="memberValue">
+              <template if="{{ inboundReferences == null }}">
+                <eval-link callback="{{ fetchInboundReferences }}" label="[find]" expr="100">
+                </eval-link>
+              </template>
+              <template if="{{ inboundReferences != null }}">
+                <template repeat="{{ reference in inboundReferences['references'] }}">
+                  <inbound-reference ref="{{ reference }}"></inbound-reference>
+                </template>
+              </template>
+            </div>
+          </div>
           <template if="{{ instance['type_class'] != null }}">
             <div class="memberItem">
               <div class="memberName">type class</div>