Index: runtime/bin/vmservice/client/deployed/web/index.html |
diff --git a/runtime/bin/vmservice/client/deployed/web/index.html b/runtime/bin/vmservice/client/deployed/web/index.html |
index cee8cabac5d48bee90e9730d54cc815c6ced448e..f0bcd995d21c341fae2907ab16c88a5653b96b7f 100644 |
--- a/runtime/bin/vmservice/client/deployed/web/index.html |
+++ b/runtime/bin/vmservice/client/deployed/web/index.html |
@@ -5943,6 +5943,10 @@ hr { |
<div class="memberList"> |
<div class="memberItem"> |
+ <div class="memberName">Socket</div> |
+ <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] }}"></io-socket-ref></div> |
+ </div> |
+ <div class="memberItem"> |
<div class="memberName">Address</div> |
<div class="memberValue">{{ httpServer['address'] }}</div> |
</div> |
@@ -5965,8 +5969,240 @@ hr { |
</template> |
</polymer-element> |
+<polymer-element name="io-socket-ref" extends="service-ref"> |
+ <template> |
+ <style> |
+/* Global styles */ |
+* { |
+ margin: 0; |
+ padding: 0; |
+ font: 400 14px 'Montserrat', sans-serif; |
+ color: #333; |
+ box-sizing: border-box; |
+} |
-<polymer-element name="io-random-access-file-list-view" extends="observatory-element"> |
+.content { |
+ padding-left: 10%; |
+ font: 400 14px 'Montserrat', sans-serif; |
+} |
+ |
+.content-centered { |
+ padding-left: 10%; |
+ padding-right: 10%; |
+ 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; |
+} |
+ |
+.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; |
+} |
+ |
+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-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); |
+} |
+</style> |
+ <a href="{{ url }}">{{ name }}</a> |
+ </template> |
+</polymer-element> |
+ |
+<polymer-element name="io-socket-view" extends="observatory-element"> |
<template> |
<style> |
/* Global styles */ |
@@ -6202,17 +6438,20 @@ hr { |
</nav-bar> |
<div class="content"> |
- <h1>Random Access Files</h1> |
+ <h1>Socket</h1> |
<br> |
- <ul class="list-group"> |
- <template repeat="{{ file in list['members'] }}"> |
- <li class="list-group-item"> |
- <io-random-access-file-ref ref="{{ file }}"></io-random-access-file-ref> |
- </li> |
- </template> |
- </ul> |
+ <div class="memberList"> |
+ <div class="memberItem"> |
+ <div class="memberName">Address</div> |
+ <div class="memberValue">{{ socket['address'] }}</div> |
+ </div> |
+ <div class="memberItem"> |
+ <div class="memberName">Port</div> |
+ <div class="memberValue">{{ socket['port'] }}</div> |
+ </div> |
+ </div> |
</div> |
<br> |
<hr> |
@@ -6452,6 +6691,259 @@ hr { |
</template> |
</polymer-element> |
+<polymer-element name="io-random-access-file-list-view" extends="observatory-element"> |
+ <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; |
+} |
+ |
+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; |
+} |
+ |
+.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; |
+} |
+ |
+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-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); |
+} |
+</style> |
+ |
+ <nav-bar> |
+ <top-nav-menu last="{{ true }}"></top-nav-menu> |
+ <nav-refresh callback="{{ refresh }}"></nav-refresh> |
+ </nav-bar> |
+ |
+ <div class="content"> |
+ <h1>Random Access Files</h1> |
+ |
+ <br> |
+ |
+ <ul class="list-group"> |
+ <template repeat="{{ file in list['members'] }}"> |
+ <li class="list-group-item"> |
+ <io-random-access-file-ref ref="{{ file }}"></io-random-access-file-ref> |
+ </li> |
+ </template> |
+ </ul> |
+ </div> |
+ <br> |
+ <hr> |
+ </template> |
+</polymer-element> |
+ |
<polymer-element name="io-random-access-file-view" extends="observatory-element"> |
<template> |
<style> |