| <!DOCTYPE html><html><head> |
| <meta charset="utf-8"> |
| <title>Dart VM Observatory</title> |
| |
| |
| |
| |
| |
| |
| |
| </head> |
| <body><script src="packages/web_components/platform.js"></script> |
| |
| |
| <!-- unminfied for debugging: |
| <link rel="import" href="src/js/polymer/layout.html"> |
| <script src="src/js/polymer/polymer.concat.js"></script> |
| --> |
| |
| |
| |
| <style shim-shadowdom=""> |
| /******************************* |
| Flex Layout |
| *******************************/ |
| |
| html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| } |
| |
| html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] { |
| display: -ms-inline-flexbox; |
| display: -webkit-inline-flex; |
| display: inline-flex; |
| } |
| |
| html /deep/ [layout][horizontal] { |
| -ms-flex-direction: row; |
| -webkit-flex-direction: row; |
| flex-direction: row; |
| } |
| |
| html /deep/ [layout][horizontal][reverse] { |
| -ms-flex-direction: row-reverse; |
| -webkit-flex-direction: row-reverse; |
| flex-direction: row-reverse; |
| } |
| |
| html /deep/ [layout][vertical] { |
| -ms-flex-direction: column; |
| -webkit-flex-direction: column; |
| flex-direction: column; |
| } |
| |
| html /deep/ [layout][vertical][reverse] { |
| -ms-flex-direction: column-reverse; |
| -webkit-flex-direction: column-reverse; |
| flex-direction: column-reverse; |
| } |
| |
| html /deep/ [layout][wrap] { |
| -ms-flex-wrap: wrap; |
| -webkit-flex-wrap: wrap; |
| flex-wrap: wrap; |
| } |
| |
| html /deep/ [layout][wrap-reverse] { |
| -ms-flex-wrap: wrap-reverse; |
| -webkit-flex-wrap: wrap-reverse; |
| flex-wrap: wrap-reverse; |
| } |
| |
| html /deep/ [flex] { |
| -ms-flex: 1; |
| -webkit-flex: 1; |
| flex: 1; |
| } |
| |
| html /deep/ [flex][auto] { |
| -ms-flex: 1 1 auto; |
| -webkit-flex: 1 1 auto; |
| flex: 1 1 auto; |
| } |
| |
| html /deep/ [flex][none] { |
| -ms-flex: none; |
| -webkit-flex: none; |
| flex: none; |
| } |
| |
| html /deep/ [flex][one] { |
| -ms-flex: 1; |
| -webkit-flex: 1; |
| flex: 1; |
| } |
| |
| html /deep/ [flex][two] { |
| -ms-flex: 2; |
| -webkit-flex: 2; |
| flex: 2; |
| } |
| |
| html /deep/ [flex][three] { |
| -ms-flex: 3; |
| -webkit-flex: 3; |
| flex: 3; |
| } |
| |
| html /deep/ [flex][four] { |
| -ms-flex: 4; |
| -webkit-flex: 4; |
| flex: 4; |
| } |
| |
| html /deep/ [flex][five] { |
| -ms-flex: 5; |
| -webkit-flex: 5; |
| flex: 5; |
| } |
| |
| html /deep/ [flex][six] { |
| -ms-flex: 6; |
| -webkit-flex: 6; |
| flex: 6; |
| } |
| |
| html /deep/ [flex][seven] { |
| -ms-flex: 7; |
| -webkit-flex: 7; |
| flex: 7; |
| } |
| |
| html /deep/ [flex][eight] { |
| -ms-flex: 8; |
| -webkit-flex: 8; |
| flex: 8; |
| } |
| |
| html /deep/ [flex][nine] { |
| -ms-flex: 9; |
| -webkit-flex: 9; |
| flex: 9; |
| } |
| |
| html /deep/ [flex][ten] { |
| -ms-flex: 10; |
| -webkit-flex: 10; |
| flex: 10; |
| } |
| |
| html /deep/ [flex][eleven] { |
| -ms-flex: 11; |
| -webkit-flex: 11; |
| flex: 11; |
| } |
| |
| html /deep/ [flex][twelve] { |
| -ms-flex: 12; |
| -webkit-flex: 12; |
| flex: 12; |
| } |
| |
| /* alignment in cross axis */ |
| |
| html /deep/ [layout][start] { |
| -ms-flex-align: start; |
| -webkit-align-items: flex-start; |
| align-items: flex-start; |
| } |
| |
| html /deep/ [layout][center] { |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| } |
| |
| html /deep/ [layout][end] { |
| -ms-flex-align: end; |
| -webkit-align-items: flex-end; |
| align-items: flex-end; |
| } |
| |
| /* alignment in main axis */ |
| |
| html /deep/ [layout][start-justified] { |
| -ms-flex-pack: start; |
| -webkit-justify-content: flex-start; |
| justify-content: flex-start; |
| } |
| |
| html /deep/ [layout][center-justified] { |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| } |
| |
| html /deep/ [layout][end-justified] { |
| -ms-flex-pack: end; |
| -webkit-justify-content: flex-end; |
| justify-content: flex-end; |
| } |
| |
| html /deep/ [layout][around-justified] { |
| -ms-flex-pack: around; |
| -webkit-justify-content: space-around; |
| justify-content: space-around; |
| } |
| |
| html /deep/ [layout][justified] { |
| -ms-flex-pack: justify; |
| -webkit-justify-content: space-between; |
| justify-content: space-between; |
| } |
| |
| /* self alignment */ |
| |
| html /deep/ [self-start] { |
| -ms-align-self: flex-start; |
| -webkit-align-self: flex-start; |
| align-self: flex-start; |
| } |
| |
| html /deep/ [self-center] { |
| -ms-align-self: center; |
| -webkit-align-self: center; |
| align-self: center; |
| } |
| |
| html /deep/ [self-end] { |
| -ms-align-self: flex-end; |
| -webkit-align-self: flex-end; |
| align-self: flex-end; |
| } |
| |
| html /deep/ [self-stretch] { |
| -ms-align-self: stretch; |
| -webkit-align-self: stretch; |
| align-self: stretch; |
| } |
| |
| /******************************* |
| Other Layout |
| *******************************/ |
| |
| html /deep/ [block] { |
| display: block; |
| } |
| |
| /* ie support for hidden */ |
| html /deep/ [hidden] { |
| display: none !important; |
| } |
| |
| html /deep/ [relative] { |
| position: relative; |
| } |
| |
| html /deep/ [fit] { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| body[fullbleed] { |
| margin: 0; |
| height: 100vh; |
| } |
| |
| /******************************* |
| Other |
| *******************************/ |
| |
| html /deep/ [segment], html /deep/ segment { |
| display: block; |
| position: relative; |
| -webkit-box-sizing: border-box; |
| -ms-box-sizing: border-box; |
| box-sizing: border-box; |
| margin: 1em 0.5em; |
| padding: 1em; |
| background-color: white; |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
| box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
| border-radius: 5px 5px 5px 5px; |
| } |
| |
| </style><script src="packages/polymer/src/js/polymer/polymer.js"></script><script> |
| // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty |
| // script tag is necessary to work around a bug in Chrome 36. |
| </script><script type="text/javascript" src="https://www.google.com/jsapi"></script><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; |
| } |
| |
| .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> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="curly-block"> |
| <template> |
| <style> |
| .idle { |
| display: inline-block; |
| color: #0489c3; |
| cursor: pointer; |
| } |
| .busy { |
| display: inline-block; |
| color: white; |
| cursor: wait; |
| } |
| </style> |
| <template if="{{ expanded }}"> |
| <template if="{{ busy }}"> |
| {<div class="busy"> ⊟ </div> |
| <br> |
| <content></content> |
| } |
| </template> |
| <template if="{{ !busy }}"> |
| {<a on-click="{{ toggleExpand }}"><div class="idle"> ⊟ </div></a> |
| <br> |
| <content></content> |
| } |
| </template> |
| </template> |
| |
| <template if="{{ !expanded }}"> |
| <template if="{{ busy }}"> |
| {<div class="busy"> ⊞ </div>} |
| </template> |
| <template if="{{ !busy }}"> |
| {<a on-click="{{ toggleExpand }}"><div class="idle"> ⊞ </div></a>} |
| </template> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| <polymer-element name="observatory-element"> |
| </polymer-element> |
| |
| |
| |
| |
| <polymer-element name="service-ref" extends="observatory-element"> |
| </polymer-element> |
| |
| <polymer-element name="instance-ref" 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; |
| } |
| |
| .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> |
| <span> |
| <template if="{{ isError(ref.serviceType) }}"> |
| <pre class="errorBox">{{ ref.message }}</pre> |
| </template> |
| |
| <template if="{{ isUnexpected(ref.serviceType) }}"> |
| unexpected reference type <{{ ref.serviceType }}> |
| </template> |
| |
| <template if="{{ isNull(ref.serviceType) }}"> |
| <div title="{{ hoverText }}">{{ ref['valueAsString'] }}</div> |
| </template> |
| |
| <template if="{{ (isString(ref.serviceType) || |
| isBool(ref.serviceType) || |
| isInt(ref.serviceType)) || |
| isDouble(ref.serviceType)) }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ ref['valueAsString'] }}</a> |
| </template> |
| |
| <template if="{{ (isType(ref.serviceType)) }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ ref['user_name'] }}</a> |
| </template> |
| |
| <template if="{{ isInstance(ref.serviceType) && |
| ref['closureFunc'] != null}}"> |
| <a on-click="{{ goto }}" href="{{ url }}"> |
| <!-- TODO(turnidge): Switch this to fully-qualified function --> |
| {{ ref['closureFunc']['user_name'] }} |
| </a> |
| </template> |
| |
| <template if="{{ isInstance(ref.serviceType) && |
| ref['closureFunc'] == null}}"> |
| <a on-click="{{ goto }}" href="{{ url }}"><em>{{ ref['class'].name }}</em></a> |
| <curly-block callback="{{ expander() }}"> |
| <div class="memberList"> |
| <template repeat="{{ field in ref['fields'] }}"> |
| <div class="memberItem"> |
| <div class="memberName"> |
| {{ field['decl']['user_name'] }} |
| </div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ field['value'] }}"></instance-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block> |
| </template> |
| |
| <template if="{{ isList(ref.serviceType) }}"> |
| <a on-click="{{ goto }}" href="{{ url }}"><em>{{ ref['class'].name }}</em> ({{ ref['length']}})</a> |
| <curly-block callback="{{ expander() }}"> |
| <div class="memberList"> |
| <template repeat="{{ element in ref['elements'] }}"> |
| <div class="memberItem"> |
| <div class="memberName">[{{ element['index']}}]</div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ element['value'] }}"></instance-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block> |
| </template> |
| </span> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="action-link"> |
| <template> |
| <style> |
| .idle { |
| color: #0489c3; |
| cursor: pointer; |
| } |
| .busy { |
| color: #aaa; |
| cursor: wait; |
| } |
| </style> |
| |
| <template if="{{ busy }}"> |
| <span class="busy">[{{ label }}]</span> |
| </template> |
| <template if="{{ !busy }}"> |
| <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="nav-bar" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| nav { |
| position: fixed; |
| width: 100%; |
| z-index: 1000; |
| } |
| nav ul { |
| display: inline-table; |
| position: relative; |
| list-style: none; |
| padding-left: 0; |
| margin-left: 0; |
| width: 100%; |
| z-index: 1000; |
| font: 400 16px 'Montserrat', sans-serif; |
| color: white; |
| background-color: #0489c3; |
| } |
| nav ul:after { |
| content: ""; clear: both; display: block; |
| } |
| .vertical-spacer { |
| height: 40px; |
| background-color: #0489c3; |
| } |
| </style> |
| <nav> |
| <ul> |
| <nav-notify events="{{ app.notifications }}"></nav-notify> |
| <content></content> |
| </ul> |
| </nav> |
| <div class="vertical-spacer"> |
| </div> |
| <template if="{{ pad }}"> |
| <br> |
| </template> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-menu" extends="observatory-element"> |
| <template> |
| <style> |
| .menu, .spacer { |
| float: left; |
| } |
| .menu a, .spacer { |
| display: block; |
| padding: 12px 8px; |
| color: White; |
| text-decoration: none; |
| } |
| .menu:hover { |
| background: #455; |
| } |
| .menu ul { |
| display: none; |
| position: absolute; |
| top: 98%; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| width: auto; |
| z-index: 1000; |
| font: 400 16px 'Montserrat', sans-serif; |
| color: white; |
| background: #567; |
| } |
| .menu ul:after { |
| content: ""; clear: both; display: block; |
| } |
| .menu:hover > ul { |
| display: block; |
| } |
| </style> |
| |
| <li class="menu"> |
| <a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a> |
| <ul><content></content></ul> |
| </li> |
| <template if="{{ !last }}"> |
| <li class="spacer">></li> |
| </template> |
| |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-menu-item" extends="observatory-element"> |
| <template> |
| <style> |
| li { |
| float: none; |
| border-top: 1px solid #677; |
| border-bottom: 1px solid #556; position: relative; |
| } |
| li:hover { |
| background: #455; |
| } |
| li ul { |
| display: none; |
| position: absolute; |
| top:0; |
| left: 100%; |
| list-style: none; |
| padding: 0; |
| margin-left: 0; |
| width: auto; |
| z-index: 1000; |
| font: 400 16px 'Montserrat', sans-serif; |
| color: white; |
| background: #567; |
| } |
| li ul:after { |
| content: ""; clear: both; display: block; |
| } |
| li:hover > ul { |
| display: block; |
| } |
| li a { |
| display: block; |
| padding: 12px 12px; |
| color: white; |
| text-decoration: none; |
| } |
| </style> |
| <li><a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a> |
| <ul><content></content></ul> |
| </li> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-refresh" extends="observatory-element"> |
| <template> |
| <style> |
| .active { |
| color: #aaa; |
| cursor: wait; |
| } |
| .idle { |
| color: #000; |
| } |
| li { |
| float: right; |
| margin: 0; |
| } |
| li button { |
| margin: 3px; |
| padding: 8px; |
| } |
| </style> |
| <li> |
| <template if="{{ active }}"> |
| <button class="active" on-click="{{ buttonClick }}">{{ label }}</button> |
| </template> |
| <template if="{{ !active }}"> |
| <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button> |
| </template> |
| </li> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-control" extends="observatory-element"> |
| <template> |
| <style> |
| .black { |
| color: #000; |
| } |
| li { |
| float: right; |
| margin: 0; |
| } |
| button { |
| margin: 3px; |
| padding: 8px; |
| } |
| </style> |
| <!-- Disable until issues with history in Dartium are fixed |
| <li> |
| <button class="black" on-click="{{ back }}">◀</button> |
| <button class="black" on-click="{{ forward }}">▶</button> |
| </li> |
| --> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="top-nav-menu"> |
| <template> |
| <nav-menu link="/vm" anchor="Observatory" last="{{ last }}"> |
| <nav-menu-item link="/vm-connect/" anchor="Connect to a different VM"></nav-menu-item> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="{{ last }}"> |
| <nav-menu-item link="{{ isolate.relativeLink('stacktrace') }}" anchor="stack trace"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('profile') }}" anchor="cpu profile"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" anchor="allocation profile"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" anchor="heap map"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" anchor="breakpoints"></nav-menu-item> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="library-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ library.link }}" anchor="{{ library.name }}" last="{{ last }}"> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="class-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ cls.link }}" anchor="{{ cls.name }}" last="{{ last }}"> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-notify" extends="observatory-element"> |
| <template> |
| <style> |
| .menu { |
| float: right; |
| } |
| .menu .list { |
| display: block; |
| position: absolute; |
| top: 98%; |
| right: 0; |
| margin: 0; |
| padding: 0; |
| width: auto; |
| z-index: 1000; |
| font: 400 12px 'Montserrat', sans-serif; |
| color: white; |
| background: none; |
| } |
| </style> |
| |
| <div class="menu"> |
| <div class="list"> |
| <template repeat="{{ event in events }}"> |
| <nav-notify-item events="{{ events }}" event="{{ event }}"> |
| </nav-notify-item> |
| </template> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-notify-item" extends="observatory-element"> |
| <template> |
| <style> |
| .item { |
| position: relative; |
| padding: 16px; |
| margin-top: 10px; |
| margin-right: 10px; |
| padding-right: 25px; |
| width: 200px; |
| color: #ddd; |
| background: rgba(0,0,0,.6); |
| border: solid 2px white; |
| box-shadow: 0 0 5px black; |
| border-radius: 5px; |
| animation: fadein 1s; |
| } |
| |
| @keyframes fadein { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| a.link { |
| color: white; |
| text-decoration: none; |
| } |
| a.link:hover { |
| text-decoration: underline; |
| } |
| |
| a.boxclose { |
| position: absolute; |
| display: block; |
| top: 4px; |
| right: 4px; |
| height: 18px; |
| width: 18px; |
| line-height: 16px; |
| border-radius: 9px; |
| color: white; |
| font-size: 18px; |
| cursor: pointer; |
| text-align: center; |
| } |
| a.boxclose:hover { |
| background: rgba(255,255,255,0.5); |
| } |
| </style> |
| <template if="{{ event.eventType == 'IsolateInterrupted' }}"> |
| <div class="item"> |
| Isolate |
| <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a> |
| is paused |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| <template if="{{ event.eventType == 'BreakpointReached' }}"> |
| <div class="item"> |
| Isolate |
| <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a> |
| is paused at breakpoint {{ event.breakpoint['id'] }} |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| <template if="{{ event.eventType == 'ExceptionThrown' }}"> |
| <div class="item"> |
| Isolate |
| <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a> |
| is paused at exception |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| <polymer-element name="breakpoint-list" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| <template if="{{ msg['breakpoints'].isEmpty }}"> |
| <div> |
| <div>No breakpoints</div> |
| </div> |
| </template> |
| <template if="{{ msg['breakpoints'].isNotEmpty }}"> |
| <ul class="list-group"> |
| <template repeat="{{ bpt in msg['breakpoints'] }}"> |
| <li class="list-group-item"> |
| {{ bpt }} |
| </li> |
| </template> |
| </ul> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| <polymer-element name="class-ref" 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; |
| } |
| |
| .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><a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="class-tree" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| .table { |
| border-collapse: collapse!important; |
| width: 100%; |
| margin-bottom: 20px |
| } |
| .table thead > tr > th, |
| .table tbody > tr > th, |
| .table tfoot > tr > th, |
| .table thead > tr > td, |
| .table tbody > tr > td, |
| .table tfoot > tr > td { |
| padding: 8px; |
| vertical-align: top; |
| } |
| .table thead > tr > th { |
| vertical-align: bottom; |
| text-align: left; |
| border-bottom:2px solid #ddd; |
| } |
| |
| tr:hover > td { |
| background-color: #FFF3E3; |
| } |
| .rowColor0 { |
| background-color: #FFE9CC; |
| } |
| .rowColor1 { |
| background-color: #FFDEB2; |
| } |
| .rowColor2 { |
| background-color: #FFD399; |
| } |
| .rowColor3 { |
| background-color: #FFC87F; |
| } |
| .rowColor4 { |
| background-color: #FFBD66; |
| } |
| .rowColor5 { |
| background-color: #FFB24C; |
| } |
| .rowColor6 { |
| background-color: #FFA733; |
| } |
| .rowColor7 { |
| background-color: #FF9C19; |
| } |
| .rowColor8 { |
| background-color: #FF9100; |
| } |
| |
| .tooltip { |
| display: block; |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| } |
| |
| tr:hover .tooltip { |
| display: block; |
| position: absolute; |
| top: 100%; |
| right: 100%; |
| visibility: visible; |
| z-index: 999; |
| width: 400px; |
| color: #ffffff; |
| background-color: #0489c3; |
| border-top-right-radius: 8px; |
| border-top-left-radius: 8px; |
| border-bottom-right-radius: 8px; |
| border-bottom-left-radius: 8px; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| opacity: 1; |
| } |
| |
| .white { |
| color: #ffffff; |
| } |
| </style> |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content-centered"> |
| <h1>Class Hierarchy</h1> |
| <table id="tableTree" class="table"> |
| <thead> |
| <tr> |
| <th>Class</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr template="" repeat="{{row in tree.rows }}"> |
| <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}"> |
| <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span> |
| <class-ref ref="{{ row.cls }}"></class-ref> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="eval-box" extends="observatory-element"> |
| <template> |
| <style> |
| .textbox { |
| width: 80ex; |
| font: 400 16px 'Montserrat', sans-serif; |
| } |
| .bigtextbox { |
| font: 400 16px 'Montserrat', sans-serif; |
| } |
| .button { |
| font: 400 16px 'Montserrat', sans-serif; |
| } |
| .radios { |
| display: inline; |
| } |
| .radios label{ |
| padding-left: 15px; |
| } |
| .historyExpr, .historyValue { |
| vertical-align: text-top; |
| font: 400 14px 'Montserrat', sans-serif; |
| } |
| .historyExpr a { |
| display: block; |
| color: black; |
| text-decoration: none; |
| padding: 6px 6px; |
| cursor: pointer; |
| white-space: pre-line; |
| } |
| .historyExpr a:hover { |
| background-color: #fff3e3; |
| } |
| .historyValue { |
| display: block; |
| padding: 6px 6px; |
| } |
| </style> |
| <form> |
| <template if="{{ lineMode == '1-line' }}"> |
| <input class="textbox" type="text" value="{{ text }}"> |
| </template> |
| <template if="{{ lineMode == 'N-line' }}"> |
| <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></textarea> |
| </template> |
| |
| <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}"> |
| <div class="radios" on-change="{{ updateLineMode }}"> |
| <label for="1-line">1-line |
| <input type="radio" name="lineMode" value="1-line" checked=""> |
| </label> |
| <label for="N-line">N-line |
| <input type="radio" name="lineMode" value="N-line"> |
| </label> |
| </div> |
| </form> |
| |
| <br> |
| <template if="{{ results.isNotEmpty }}"> |
| <table> |
| <tbody><tr template="" repeat="{{ result in results }}"> |
| <td class="historyExpr"> |
| <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a> |
| </td> |
| <td class="historyValue"> |
| <template if="{{ result['value'] == null }}"> |
| <div style="color:#aaa;cursor:wait;"><pending></div> |
| </template> |
| <template if="{{ result['value'] != null }}"> |
| <instance-ref ref="{{ result['value'] }}"></instance-ref> |
| </template> |
| </td> |
| </tr> |
| </tbody></table> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| <polymer-element name="eval-link"> |
| <template> |
| <style> |
| .idle { |
| color: #0489c3; |
| cursor: pointer; |
| } |
| .busy { |
| color: #aaa; |
| cursor: wait; |
| } |
| </style> |
| |
| <template if="{{ busy }}"> |
| <span class="busy">{{ label }}</span> |
| </template> |
| <template if="{{ !busy }}"> |
| <span class="idle"><a on-click="{{ evalNow }}">{{ label }}</a></span> |
| </template> |
| <template if="{{ result != null }}"> |
| = <instance-ref ref="{{ result }}"></instance-ref> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="field-ref" 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; |
| } |
| |
| .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> |
| <div> |
| <template if="{{ ref['static'] }}">static</template> |
| <template if="{{ ref['final'] }}">final</template> |
| <template if="{{ ref['const'] }}">const</template> |
| <template if="{{ (ref['declared_type']['name'] == 'dynamic' && |
| !ref['final'] && !ref['const']) }}"> |
| var |
| </template> |
| <template if="{{ (ref['declared_type']['name'] != 'dynamic') }}"> |
| <instance-ref ref="{{ ref['declared_type'] }}"></instance-ref> |
| </template> |
| <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| <polymer-element name="function-ref" 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; |
| } |
| |
| .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><!-- These comments are here to allow newlines. |
| --><template if="{{ ref.isDart }}"><!-- |
| --><template if="{{ qualified && ref.parent == null && ref.owningClass != null }}"><!-- |
| --><class-ref ref="{{ ref.owningClass] }}"></class-ref>.</template><!-- |
| --><template if="{{ qualified && ref.parent != null }}"><!-- |
| --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}"> |
| </function-ref>.<!-- |
| --></template><a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a><!-- |
| --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></template></template> |
| </polymer-element> |
| |
| |
| |
| |
| <polymer-element name="library-ref" 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; |
| } |
| |
| .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> |
| <template if="{{ nameIsEmpty }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">unnamed</a> |
| </template> |
| <template if="{{ !nameIsEmpty }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| <polymer-element name="script-inset" extends="observatory-element"> |
| <template> |
| <style> |
| .sourceInset { |
| padding-left: 15%; |
| padding-right: 15%; |
| } |
| .sourceBox { |
| width: 100%; |
| background-color: #f5f5f5; |
| border: 1px solid #ccc; |
| padding: 10px; |
| overflow-y: auto; |
| } |
| .sourceTable { |
| display: table; |
| } |
| .sourceRow { |
| display: table-row; |
| } |
| .sourceItem, .sourceItemCurrent { |
| display: table-cell; |
| vertical-align: top; |
| font: 400 14px consolas, courier, monospace; |
| line-height: 125%; |
| white-space: pre; |
| } |
| .sourceItemCurrent { |
| background-color: #6cf; |
| } |
| .hitsNone, .hitsNotExecuted, .hitsExecuted { |
| min-width: 32px; |
| text-align: right; |
| } |
| .hitsNotExecuted { |
| background-color: #e66; |
| } |
| .hitsExecuted { |
| background-color: #6d6; |
| } |
| </style> |
| <div class="sourceInset"> |
| <content></content> |
| <div class="sourceBox" style="height:{{height}}"> |
| <div class="sourceTable"> |
| <template repeat="{{ line in lines }}"> |
| <div class="sourceRow" id="{{ makeLineId(line.line) }}"> |
| <template if="{{ line.hits == null }}"> |
| <div class="hitsNone">{{ line.line }}</div> |
| </template> |
| <template if="{{ line.hits == 0 }}"> |
| <div class="hitsNotExecuted">{{ line.line }}</div> |
| </template> |
| <template if="{{ line.hits > 0 }}"> |
| <div class="hitsExecuted">{{ line.line }}</div> |
| </template> |
| <div class="sourceItem"> </div> |
| <template if="{{ line.line == currentLine }}"> |
| <div id="currentLine" class="sourceItemCurrent">{{line.text}}</div> |
| </template> |
| <template if="{{ line.line != currentLine }}"> |
| <div class="sourceItem">{{line.text}}</div> |
| </template> |
| </div> |
| </template> |
| </div> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| <polymer-element name="script-ref" 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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| </polymer-element> |
| |
| |
| <polymer-element name="class-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu> |
| <library-nav-menu library="{{ cls.library }}"></library-nav-menu> |
| <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu> |
| <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1> |
| <template if="{{ cls.isAbstract }}"> |
| abstract |
| </template> |
| <template if="{{ cls.isPatch }}"> |
| patch |
| </template> |
| class {{ cls.name }} |
| </h1> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">library</div> |
| <div class="memberValue"> |
| <library-ref ref="{{ cls.library }}"></library-ref> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">script</div> |
| <div class="memberValue"> |
| <script-ref ref="{{ cls.script }}" pos="{{ cls.tokenPos }}"> |
| </script-ref> |
| </div> |
| </div> |
| |
| <div class="memberItem"> </div> |
| |
| <template if="{{ cls.superClass != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">extends</div> |
| <div class="memberValue"> |
| <class-ref ref="{{ cls.superClass }}"></class-ref> |
| </div> |
| </div> |
| </template> |
| <template if="{{ cls.subClasses.length > 0 }}"> |
| <div class="memberItem"> |
| <div class="memberName">extended by</div> |
| <div class="memberValue"> |
| <template repeat="{{ subclass in cls.subClasses }}"> |
| <class-ref ref="{{ subclass }}"></class-ref> |
| </template> |
| </div> |
| </div> |
| </template> |
| |
| <div class="memberItem"> </div> |
| |
| <template if="{{ cls.interfaces.length > 0 }}"> |
| <div class="memberItem"> |
| <div class="memberName">implements</div> |
| <div class="memberValue"> |
| <template repeat="{{ interface in cls.interfaces }}"> |
| <class-ref ref="{{ interface }}"></class-ref> |
| </template> |
| </div> |
| </div> |
| </template> |
| <template if="{{ cls.name != cls.vmName }}"> |
| <div class="memberItem"> |
| <div class="memberName">vm name</div> |
| <div class="memberValue">{{ cls.vmName }}</div> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <template if="{{ cls.error != null }}"> |
| <!-- TODO(turnidge): Don't use instance-ref for error display here --> |
| <instance-ref ref="{{ cls.error }}"></instance-ref> |
| </template> |
| |
| <hr> |
| |
| <div class="content"> |
| <template if="{{ cls.fields.isNotEmpty }}"> |
| fields ({{ cls.fields.length }}) |
| <curly-block expand="{{ cls.fields.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ field in cls.fields }}"> |
| <div class="memberItem"> |
| <div class="memberName"> |
| <field-ref ref="{{ field }}"></field-ref> |
| </div> |
| <div class="memberValue"> |
| <template if="{{ field['value'] != null }}"> |
| <instance-ref ref="{{ field['value'] }}"></instance-ref> |
| </template> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br><br> |
| </template> |
| |
| <template if="{{ cls.functions.isNotEmpty }}"> |
| functions ({{ cls.functions.length }}) |
| <curly-block expand="{{ cls.functions.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ function in cls.functions }}"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| <function-ref ref="{{ function }}" qualified="{{ false }}"> |
| </function-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br><br> |
| </template> |
| |
| <template if="{{ !cls.hasNoAllocations }}"> |
| instances |
| <div class="memberItem"> |
| <div class="memberName">currently allocated</div> |
| <div class="memberValue"> |
| count {{ cls.newSpace.current.instances + cls.oldSpace.current.instances }} |
| (shallow size {{ cls.newSpace.current.bytes + cls.oldSpace.current.bytes | formatSize }}) |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">strongly reachable</div> |
| <div class="memberValue"> |
| <template if="{{ instances == null }}"> |
| <eval-link callback="{{ reachable }}" label="[find]" expr="100"> |
| </eval-link> |
| </template> |
| <template if="{{ instances != null }}"> |
| sample |
| <instance-ref ref="{{ instances['sample'] }}"></instance-ref> |
| <template if="{{ instances['totalCount'] > instances['sampleCount'] }}"> |
| <eval-link callback="{{ reachable }}" label="[more]" expr="{{ instances['sampleCount'] * 2 }}"> |
| </eval-link> |
| </template> |
| of total {{ instances['totalCount'] }} |
| </template> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">retained size</div> |
| <div class="memberValue"> |
| <template if="{{ retainedBytes == null }}"> |
| <eval-link callback="{{ retainedSize }}" label="[calculate]"> |
| </eval-link> |
| </template> |
| <template if="{{ retainedBytes != null }}"> |
| {{ retainedBytes | formatSize }} |
| </template> |
| </div> |
| </div> |
| </template> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <eval-box callback="{{ eval }}"></eval-box> |
| </div> |
| |
| <hr> |
| <script-inset script="{{ cls.script }}" startpos="{{ cls.tokenPos }}" endpos="{{ cls.endTokenPos }}"> |
| </script-inset> |
| |
| <br><br><br><br> |
| <br><br><br><br> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| <polymer-element name="code-ref" 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; |
| } |
| |
| .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> |
| <template if="{{ code.isDartCode }}"> |
| <template if="{{ code.isOptimized }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">*{{ name }}</a> |
| </template> |
| <template if="{{ !code.isOptimized }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| </template> |
| <template if="{{ !code.isDartCode }}"> |
| <span>{{ name }}</span> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="code-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| div.flex-row:hover { |
| background-color: #FFF3E3; |
| } |
| |
| .highlight { |
| background-color: #FFF3E3; |
| } |
| |
| .tooltip { |
| display: block; |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| } |
| |
| .flex-row:hover .tooltip { |
| display: block; |
| position: absolute; |
| top: 100%; |
| visibility: visible; |
| z-index: 999; |
| width: auto; |
| min-width: 400px; |
| color: #ffffff; |
| background-color: #FFF3E3; |
| border-bottom-right-radius: 8px; |
| border-bottom-left-radius: 8px; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| opacity: 1; |
| } |
| |
| .descriptor-address { |
| color: #0489c3; |
| } |
| |
| .snippet { |
| text-align: center; |
| margin-left: 10px; |
| margin-right: 10px; |
| } |
| |
| </style> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ code.link }}" anchor="{{ code.name }}" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content"> |
| <template if="{{ code.isDartCode && code.isOptimized }}"> |
| <h1>Optimized code for {{ code.name }}</h1> |
| </template> |
| <template if="{{ !(code.isDartCode && code.isOptimized) }}"> |
| <h1>Code for {{ code.name }}</h1> |
| </template> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Kind</div> |
| <div class="memberValue">{{code.kind}}</div> |
| </div> |
| <template if="{{ code.isDartCode }}"> |
| <div class="memberItem"> |
| <div class="memberName">Optimized</div> |
| <div class="memberValue">{{code.isOptimized}}</div> |
| </div> |
| </template> |
| <div class="memberItem"> |
| <div class="memberName">Function</div> |
| <div class="memberValue"> |
| <function-ref ref="{{code.function}}"> |
| </function-ref> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Inclusive</div> |
| <div class="memberValue">{{ code.formattedInclusiveTicks }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Exclusive</div> |
| <div class="memberValue">{{ code.formattedExclusiveTicks }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Constant object pool</div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ code.objectPool }}"></instance-ref> |
| </div> |
| </div> |
| </div> |
| </div> |
| <hr> |
| <div class="content"> |
| <template if="{{ code.hasDisassembly }}"> |
| <div class="flex-row"> |
| <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div> |
| <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div> |
| <div class="flex-item-fixed-2-12 memberHeader">Address</div> |
| <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div> |
| </div> |
| </template> |
| <template repeat="{{ instruction in code.instructions }}"> |
| <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mouseOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ instruction.address }}" style="position: relative"> |
| <template if="{{ instruction.isComment }}"> |
| <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedInclusive(code) }}</div> |
| <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedExclusive(code) }}</div> |
| <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}</div> |
| </template> |
| <template if="{{ !instruction.isComment }}"> |
| <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedInclusive(code) }}</div> |
| <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedExclusive(code) }}</div> |
| <template if="{{ instruction.hasDescriptors }}"> |
| <div class="flex-item-fixed-2-12 monospace descriptor-address"> |
| <div class="tooltip"> |
| <template repeat="{{ descriptor in instruction.descriptors }}"> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Kind</div> |
| <div class="memberValue">{{ descriptor.kind }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Deoptimization ID</div> |
| <div class="memberValue">{{ descriptor.formattedDeoptId() }}</div> |
| </div> |
| <template if="{{ descriptor.script != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">Script</div> |
| <div class="memberValue"><script-ref ref="{{ descriptor.script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div> |
| </div> |
| </template> |
| </div> |
| <template if="{{ descriptor.script != null }}"> |
| <div class="snippet monospace"> |
| <span>{{ descriptor.formattedLine }}</span> |
| </div> |
| </template> |
| </template> |
| </div> |
| {{ instruction.formattedAddress() }} |
| </div> |
| </template> |
| <template if="{{ !instruction.hasDescriptors }}"> |
| <div class="flex-item-fixed-2-12 monospace"> |
| {{ instruction.formattedAddress() }} |
| </div> |
| </template> |
| <div class="flex-item-fixed-6-12 monospace"> |
| {{ instruction.human }} |
| </div> |
| </template> |
| </div> |
| </template> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| <polymer-element name="error-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content-centered"> |
| <h1>{{ error.kind }}</h1> |
| <br> |
| <div class="well">{{ error.message }}</div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="field-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu> |
| <template if="{{ field['owner'].serviceType == 'Class' }}"> |
| <!-- TODO(turnidge): Add library nav menu here. --> |
| <class-nav-menu cls="{{ field['owner'] }}"></class-nav-menu> |
| </template> |
| <template if="{{ field['owner'].serviceType == 'Library' }}"> |
| <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu> |
| </template> |
| <nav-menu link="{{ field.link }}" anchor="{{ field['user_name'] }}" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1> |
| <template if="{{ field['static'] }}">static</template> |
| <template if="{{ field['final'] }}">final</template> |
| <template if="{{ field['const'] }}">const</template> |
| <template if="{{ (field['declared_type']['name'] == 'dynamic' && |
| !field['final'] && !field['const']) }}"> |
| var |
| </template> |
| <template if="{{ (field['declared_type']['user_name'] != 'dynamic') }}"> |
| {{ field['declared_type']['user_name'] }} |
| </template> |
| {{ field['user_name'] }} |
| </h1> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">owner</div> |
| <div class="memberValue"> |
| <template if="{{ field['owner'].serviceType == 'Class' }}"> |
| <class-ref ref="{{ field['owner'] }}"></class-ref> |
| </template> |
| <template if="{{ field['owner'].serviceType != 'Class' }}"> |
| <library-ref ref="{{ field['owner'] }}"></library-ref> |
| </template> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">script</div> |
| <div class="memberValue"> |
| <script-ref ref="{{ field['script'] }}"></script-ref> |
| </div> |
| </div> |
| <template if="{{ !field['static'] }}"> |
| <div class="memberItem" title="The types observed for this field at runtime. Fields that are observed to have a single type at runtime or to never be null may allow for additional optimization."> |
| <div class="memberName">observed types</div> |
| <div class="memberValue"> |
| <template if="{{ field['guard_class'] == 'dynamic' }}"> |
| various |
| </template> |
| <template if="{{ field['guard_class'] == 'unknown' }}"> |
| none |
| </template> |
| <template if="{{ field['guard_class'] != 'unknown' && |
| field['guard_class'] != 'dynamic' }}"> |
| <class-ref ref="{{ field['guard_class'] }}"></class-ref> |
| <template if="{{ field['guard_nullable'] }}"> |
| — null observed |
| </template> |
| <template if="{{ !field['guard_nullable'] }}"> |
| — null not observed |
| </template> |
| </template> |
| </div> |
| </div> |
| </template> |
| <template if="{{ field['value'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">static value</div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ field['value'] }}"></instance-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="stack-frame" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <div class="flex-row"> |
| <div class="flex-item-fixed-1-12"> |
| </div> |
| <div class="flex-item-fixed-1-12"> |
| #{{ frame['depth'] }} |
| </div> |
| <div class="flex-item-fixed-9-12"> |
| <function-ref ref="{{ frame['function'] }}"></function-ref> |
| ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }}"> |
| </script-ref> ) |
| |
| <curly-block> |
| <div class="memberList"> |
| <template repeat="{{ v in frame['vars'] }}"> |
| <div class="memberItem"> |
| <div class="memberName">{{ v['name']}}</div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ v['value'] }}"></instance-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block> |
| </div> |
| <div class="flex-item-fixed-1-12"> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="flag-list" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content-centered"> |
| <template if="{{ flagList['modifiedFlags'].isNotEmpty }}"> |
| <h1>Modified Flags</h1> |
| <br> |
| <template repeat="{{ flag in flagList['modifiedFlags'] }}"> |
| <flag-item flag="{{ flag }}"></flag-item> |
| <br> |
| </template> |
| <hr> |
| </template> |
| |
| <h1>Unmodified Flags</h1> |
| <br> |
| <template if="{{ flagList['unmodifiedFlags'].isEmpty }}"> |
| <em>None</em> |
| </template> |
| <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}"> |
| <template repeat="{{ flag in flagList['unmodifiedFlags'] }}"> |
| <flag-item flag="{{ flag }}"></flag-item> |
| <br> |
| </template> |
| </template> |
| </div> |
| |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="flag-item" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <span style="color:#aaa">// {{ flag['comment'] }}</span> |
| <div style="padding: 3px 0"> |
| <b>{{ flag['name'] }}</b> |
| = |
| {{ flag['valueAsString'] }} |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="function-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu> |
| <template if="{{ function.owningClass != null }}"> |
| <!-- TODO(turnidge): Add library nav menu here. --> |
| <class-nav-menu cls="{{ function.owningClass }}"></class-nav-menu> |
| </template> |
| <template if="{{ function.owningLibrary != null }}"> |
| <library-nav-menu library="{{ function.owningLibrary }}"></library-nav-menu> |
| </template> |
| <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>function {{ function.qualifiedName }}</h1> |
| |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">kind</div> |
| <div class="memberValue"> |
| <template if="{{ function.isStatic }}">static</template> |
| <template if="{{ function.isConst }}">const</template> |
| {{ function.kind.toString() }} |
| </div> |
| </div> |
| <template if="{{ function.parent != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">parent function</div> |
| <div class="memberValue"> |
| <function-ref ref="{{ function.parent }}"></function-ref> |
| </div> |
| </div> |
| </template> |
| <div class="memberItem"> |
| <div class="memberName">owner</div> |
| <div class="memberValue"> |
| <template if="{{ function.owningClass != null }}"> |
| <class-ref ref="{{ function.owningClass }}"></class-ref> |
| </template> |
| <template if="{{ function.owningLibrary != null }}"> |
| <library-ref ref="{{ function.owningLibrary }}"></library-ref> |
| </template> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">script</div> |
| <div class="memberValue"> |
| <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }}"> |
| </script-ref> |
| </div> |
| </div> |
| |
| <div class="memberItem"> </div> |
| |
| <template if="{{ function.code != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">optimized code</div> |
| <div class="memberValue"> |
| <code-ref ref="{{ function.code }}"></code-ref> |
| </div> |
| </div> |
| </template> |
| <template if="{{ function.unoptimizedCode != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">unoptimized code</div> |
| <div class="memberValue"> |
| <code-ref ref="{{ function.unoptimizedCode }}"></code-ref> |
| </div> |
| <div class="memberValue"> |
| <span title="This count is used to determine when a function will be optimized. It is a combination of call counts and other factors."> |
| (usage count: {{ function.usageCounter }}) |
| </span> |
| </div> |
| </div> |
| </template> |
| <div class="memberItem"> |
| <div class="memberName">deoptimizations</div> |
| <div class="memberValue">{{ function.deoptimizations }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">optimizable</div> |
| <div class="memberValue">{{ function.isOptimizable }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">inlinable</div> |
| <div class="memberValue">{{ function.isInlinable }}</div> |
| </div> |
| <template if="{{ function.name != function.vmName }}"> |
| <div class="memberItem"> |
| <div class="memberName">vm name</div> |
| <div class="memberValue">{{ function.vmName }}</div> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <hr> |
| <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}"> |
| </script-inset> |
| |
| <br> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="heap-map" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| .hover { |
| position: fixed; |
| z-index: 999; |
| height: 16px; |
| width: 100%; |
| background: #ffffff; |
| } |
| .spacer { |
| height: 16px; |
| background-color: red; |
| } |
| </style> |
| <nav-bar pad="{{ false }}"> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor="heap map" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="hover"> |
| <p style="text-align:center">{{ status }}</p> |
| </div> |
| <div class="spacer"> |
| <!-- Make sure no data is covered by hover bar initially --> |
| </div> |
| <div class="flex-row"> |
| <canvas id="fragmentation" width="1px" height="1px"></canvas> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| <polymer-element name="io-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>dart:io</h1> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <li class="list-group-item"> |
| <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/http/servers'))}}">HTTP Servers</a> |
| </li> |
| </ul> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <li class="list-group-item"> |
| <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/sockets'))}}">Sockets</a> |
| </li> |
| </ul> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <li class="list-group-item"> |
| <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/websockets'))}}">WebSockets</a> |
| </li> |
| </ul> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <li class="list-group-item"> |
| <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/file/randomaccessfiles'))}}">Random Access Files</a> |
| </li> |
| </ul> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <li class="list-group-item"> |
| <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processess</a> |
| </li> |
| </ul> |
| |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-ref" 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; |
| } |
| |
| .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> |
| <template if="{{ ref.serviceType == 'Socket' }}"> |
| <io-socket-ref ref="{{ ref }}"></io-socket-ref> |
| </template> |
| <template if="{{ ref.serviceType == 'HttpServerConnection' }}"> |
| <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection-ref> |
| </template> |
| <template if="{{ ref.serviceType == 'HttpServer' }}"> |
| <io-http-server-ref ref="{{ ref }}"></io-http-server-ref> |
| </template> |
| <template if="{{ ref.serviceType == 'WebSocket' }}"> |
| <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref> |
| </template> |
| <template if="{{ ref.serviceType == 'Process' }}"> |
| <io-process-ref ref="{{ ref }}"></io-process-ref> |
| </template> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-http-server-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>HttpServers</h1> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <template repeat="{{ httpServer in list['members'] }}"> |
| <li class="list-group-item"> |
| <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref> |
| </li> |
| </template> |
| </ul> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-http-server-ref" 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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-http-server-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>HttpServer</h1> |
| |
| <br> |
| |
| <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> |
| <div class="memberItem"> |
| <div class="memberName">Port</div> |
| <div class="memberValue">{{ httpServer['port'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Active connections</div> |
| <ul class="list-group"> |
| <template repeat="{{ connection in httpServer['active'] }}"> |
| <li class="list-group-item"> |
| <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref> |
| </li> |
| </template> |
| </ul> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Idle connections</div> |
| <ul class="list-group"> |
| <template repeat="{{ connection in httpServer['idle'] }}"> |
| <li class="list-group-item"> |
| <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref> |
| </li> |
| </template> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-http-server-connection-ref" 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; |
| } |
| |
| .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> |
| <a href="{{ url }}">{{ name }}</a> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-http-server-connection-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>HttpConnection</h1> |
| |
| <br> |
| |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Socket</div> |
| <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] }}"></io-socket-ref></div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">State</div> |
| <div class="memberValue">{{ connection['state'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Server</div> |
| <div class="memberValue"><io-http-server-ref ref="{{ connection['server'] }}"></io-http-server-ref></div> |
| </div> |
| </div> |
| </div> |
| <br> |
| <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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-socket-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>Sockets</h1> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <template repeat="{{ socket in list['members'] }}"> |
| <li class="list-group-item"> |
| <io-socket-ref ref="{{ socket }}"></io-socket-ref> |
| </li> |
| </template> |
| </ul> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-socket-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <!-- Pipe Socket --> |
| <template if="{{ socket.isPipe }}"> |
| <h1>Pipe Socket</h1> |
| <div class="memberList"> |
| <template if="{{ socket.socketOwner != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">Owner</div> |
| <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></io-ref></div> |
| </div> |
| </template> |
| <div class="memberItem"> |
| <div class="memberName">File descriptor</div> |
| <div class="memberValue">{{ socket.fd }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Read Closed</div> |
| <div class="memberValue">{{ socket.readClosed }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Write Closed</div> |
| <div class="memberValue">{{ socket.writeClosed }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Closing</div> |
| <div class="memberValue">{{ socket.closing }}</div> |
| </div> |
| </div> |
| </template> |
| <!-- Network Socket --> |
| <template if="{{ !socket.isPipe }}"> |
| <h1>Network Socket</h1> |
| <div class="memberList"> |
| <template if="{{ socket.socketOwner != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">Owner</div> |
| <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></io-ref></div> |
| </div> |
| </template> |
| <div class="memberItem"> |
| <div class="memberName">Local Address</div> |
| <div class="memberValue">{{ socket.localAddress }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Local Port</div> |
| <div class="memberValue">{{ socket.localPort }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Remote Address</div> |
| <div class="memberValue">{{ socket.remoteAddress }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Remote Port</div> |
| <div class="memberValue">{{ socket.remotePort }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">File descriptor</div> |
| <div class="memberValue">{{ socket.fd }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Read Closed</div> |
| <div class="memberValue">{{ socket.readClosed }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Write Closed</div> |
| <div class="memberValue">{{ socket.writeClosed }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Closing</div> |
| <div class="memberValue">{{ socket.closing }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Listening</div> |
| <div class="memberValue">{{ socket.listening }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Protocol</div> |
| <div class="memberValue">{{ socket.protocol }}</div> |
| </div> |
| </div> |
| </template> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-web-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-web-socket-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>WebSockets</h1> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <template repeat="{{ webSocket in list['members'] }}"> |
| <li class="list-group-item"> |
| <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref> |
| </li> |
| </template> |
| </ul> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-web-socket-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>WebSocket</h1> |
| |
| <br> |
| |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Socket</div> |
| <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }}"></io-socket-ref></div> |
| </div> |
| </div> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-random-access-file-ref" 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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <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> |
| /* 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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>Random Access File</h1> |
| |
| <br> |
| |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Path</div> |
| <div class="memberValue">{{ file['name'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Pending Operation</div> |
| <div class="memberValue">{{ file['asyncDispatched'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">File Descriptor</div> |
| <div class="memberValue">{{ file['fd'] }}</div> |
| </div> |
| </div> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-process-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>Processes</h1> |
| |
| <br> |
| |
| <ul class="list-group"> |
| <template repeat="{{ process in list['members'] }}"> |
| <li class="list-group-item"> |
| <io-process-ref ref="{{ process }}"></io-process-ref> |
| </li> |
| </template> |
| </ul> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-process-ref" 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; |
| } |
| |
| .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> |
| <template if="{{ small }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a> |
| </template> |
| <template if="{{ !small }}"> |
| <a on-click="{{ goto }}" href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a> |
| </template> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="io-process-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>Process</h1> |
| |
| <br> |
| |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Path</div> |
| <div class="memberValue">{{ process['name'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Pid</div> |
| <div class="memberValue">{{ process['pid'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Arguments</div> |
| <div class="memberValue">{{ process['arguments'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Started</div> |
| <div class="memberValue">{{ process['started'] }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Working Directory</div> |
| <div class="memberValue">{{ process['workingDirectory'] }}</div> |
| </div> |
| <template if="{{ process['stdin'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">stdin</div> |
| <div class="memberValue"> |
| <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref> |
| </div> |
| </div> |
| </template> |
| <template if="{{ process['stdout'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">stdout</div> |
| <div class="memberValue"> |
| <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref> |
| </div> |
| </div> |
| </template> |
| <template if="{{ process['stderr'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">stderr</div> |
| <div class="memberValue"> |
| <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| |
| <br> |
| |
| <h2>Environment</h2> |
| <div class="well"> |
| <div class="monospace break-wrap"> |
| <template repeat="{{ variable in process['environment'] }}"> |
| {{ variable }} |
| <br> |
| </template> |
| </div> |
| </div> |
| </div> |
| <br> |
| <hr> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| <polymer-element name="isolate-ref" 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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="isolate-summary" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <div class="flex-row"> |
| <div class="flex-item-10-percent"> |
| <img src="packages/observatory/src/elements/img/isolate_icon.png"> |
| </div> |
| <div class="flex-item-10-percent"> |
| <isolate-ref ref="{{ isolate }}"></isolate-ref> |
| </div> |
| <div class="flex-item-20-percent"> |
| <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> |
| </div> |
| <div class="flex-item-50-percent"> |
| <isolate-location isolate="{{ isolate }}"></isolate-location> |
| </div> |
| <div class="flex-item-10-percent"> |
| </div> |
| </div> |
| |
| <div class="flex-row"> |
| <div class="flex-item-20-percent"></div> |
| <div class="flex-item-60-percent"> |
| <hr> |
| </div> |
| <div class="flex-item-20-percent"></div> |
| </div> |
| |
| <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary> |
| |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-run-state" extends="observatory-element"> |
| <template> |
| <template if="{{ isolate.pauseEvent != null }}"> |
| <strong>paused</strong> |
| <action-link callback="{{ resume }}" label="resume"></action-link> |
| </template> |
| |
| <template if="{{ isolate.running }}"> |
| <strong>running</strong> |
| <action-link callback="{{ pause }}" label="pause"></action-link> |
| </template> |
| |
| <template if="{{ isolate.idle }}"> |
| <strong>idle</strong> |
| <action-link callback="{{ pause }}" label="pause"></action-link> |
| </template> |
| |
| <template if="{{ isolate.loading }}"> |
| <strong>loading...</strong> |
| </template> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-location" extends="observatory-element"> |
| <template> |
| <template if="{{ isolate.pauseEvent != null }}"> |
| <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}"> |
| at isolate start |
| </template> |
| <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}"> |
| at isolate exit |
| </template> |
| <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' }}"> |
| at |
| <function-ref ref="{{ isolate.topFrame['function'] }}"> |
| </function-ref> |
| (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>) |
| </template> |
| <template if="{{ isolate.pauseEvent.eventType == 'BreakpointReached' }}"> |
| at breakpoint {{ isolate.pauseEvent.breakpoint['id'] }} |
| <function-ref ref="{{ isolate.topFrame['function'] }}"> |
| </function-ref> |
| (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>) |
| </template> |
| <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}"> |
| at exception |
| <function-ref ref="{{ isolate.topFrame['function'] }}"> |
| </function-ref> |
| (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>) |
| </template> |
| </template> |
| |
| <template if="{{ isolate.running }}"> |
| at |
| <function-ref ref="{{ isolate.topFrame['function'] }}"> |
| </function-ref> |
| (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>) |
| </template> |
| |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-shared-summary" extends="observatory-element"> |
| <template> |
| <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> |
| <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; |
| } |
| |
| .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> |
| <template if="{{ isolate.error != null }}"> |
| <div class="content-centered"> |
| <pre class="errorBox">{{ isolate.error.message }}</pre> |
| <br> |
| </div> |
| </template> |
| <div class="flex-row"> |
| <div class="flex-item-10-percent"> |
| </div> |
| <div class="flex-item-40-percent"> |
| <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart> |
| </div> |
| <div class="flex-item-40-percent"> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">new heap</div> |
| <div class="memberValue"> |
| {{ isolate.newSpace.used | formatSize }} |
| of |
| {{ isolate.newSpace.capacity | formatSize }} |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">old heap</div> |
| <div class="memberValue"> |
| {{ isolate.oldSpace.used | formatSize }} |
| of |
| {{ isolate.oldSpace.capacity | formatSize }} |
| </div> |
| </div> |
| </div> |
| <br> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink('/class-tree' + isolate.link) }}">class hierarchy</a> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('stacktrace')) }}">stack trace</a> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('profile')) }}">cpu profile</a> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('allocationprofile')) }}">allocation profile</a> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('heapmap')) }}">heap map</a> |
| </div> |
| </div> |
| <!-- Temporarily disabled until UI for dart:io is acceptable. |
| <template if="{{ isolate.ioEnabled }}"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('io')) }}">dart:io</a> |
| </div> |
| </div> |
| </template> |
| --> |
| </div> |
| <div class="flex-item-10-percent"> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-counter-chart" extends="observatory-element"> |
| <template> |
| <div id="counterPieChart" style="height: 200px"></div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="isolate-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| .sourceInset { |
| padding-left: 15%; |
| padding-right: 15%; |
| } |
| .miniProfileChart { |
| width: 80%; |
| } |
| </style> |
| |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}"> |
| </isolate-nav-menu> |
| <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>isolate '{{ isolate.name }}'</h1> |
| </div> |
| |
| <br> |
| <div class="flex-row"> |
| <div class="flex-item-10-percent"> |
| </div> |
| <div class="flex-item-20-percent"> |
| <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> |
| </div> |
| <div class="flex-item-60-percent"> |
| <isolate-location isolate="{{ isolate }}"></isolate-location> |
| </div> |
| <div class="flex-item-10-percent"> |
| </div> |
| </div> |
| <br> |
| |
| <template if="{{ isolate.topFrame != null }}"> |
| <br> |
| <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ isolate.topFrame['tokenPos'] }}" height="200px"> |
| </script-inset> |
| </template> |
| |
| <div class="flex-row"> |
| <div class="flex-item-20-percent"></div> |
| <div class="flex-item-60-percent"><hr></div> |
| <div class="flex-item-20-percent"></div> |
| </div> |
| |
| <br> |
| |
| <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary> |
| |
| <div class="flex-row"> |
| <div class="flex-item-20-percent"></div> |
| <div class="flex-item-60-percent"><hr></div> |
| <div class="flex-item-20-percent"></div> |
| </div> |
| |
| <div class="content-centered"> |
| <div class="flex-row"> |
| <div class="flex-item-50-percent"> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">root library</div> |
| <div class="memberValue"> |
| <library-ref ref="{{ isolate.rootLib }}"></library-ref> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <template if="{{ isolate.entry != null }}"> |
| <div class="memberName">entry</div> |
| <div class="memberValue"> |
| <function-ref ref="{{ isolate.entry }}"></function-ref> |
| </div> |
| </template> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">isolate id</div> |
| <div class="memberValue">{{ isolate.mainPort }}</div> |
| </div> |
| </div> |
| </div> |
| <div class="flex-item-50-percent"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('debug/breakpoints')) }}">breakpoints</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| libraries ({{ isolate.libraries.length }}) |
| <curly-block expand="{{ isolate.libraries.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ lib in isolate.libraries }}"> |
| <div class="memberItem"> |
| <div class="memberName"> |
| <library-ref ref="{{ lib }}"></library-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <eval-box callback="{{ eval }}"></eval-box> |
| </div> |
| <br><br><br><br> |
| <br><br><br><br> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="instance-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu> |
| <!-- TODO(turnidge): Add library nav menu here. --> |
| <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu> |
| <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <template if="{{ instance['error'] != null }}"> |
| <error-view error_obj="{{ instance['error'] }}"></error-view> |
| </template> |
| |
| <template if="{{ instance['error'] == null }}"> |
| <div class="content"> |
| <!-- TODO(turnidge): Handle null instances. --> |
| <template if="{{ isType(instance.serviceType) }}"> |
| <h1>type {{ instance['user_name'] }}</h1> |
| </template> |
| <template if="{{ !isType(instance.serviceType) }}"> |
| <h1>instance of {{ instance['class']['user_name'] }}</h1> |
| </template> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">class</div> |
| <div class="memberValue"> |
| <class-ref ref="{{ instance['class'] }}"> |
| </class-ref> |
| </div> |
| </div> |
| <template if="{{ instance['valueAsString'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">value</div> |
| <div class="memberValue">{{ instance['valueAsString'] }}</div> |
| </div> |
| </template> |
| <div class="memberItem"> |
| <div class="memberName">size</div> |
| <div class="memberValue">{{ instance['size'] | formatSize }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">retained size</div> |
| <div class="memberValue"> |
| <template if="{{ retainedBytes == null }}"> |
| <eval-link callback="{{ retainedSize }}" label="[calculate]"> |
| </eval-link> |
| </template> |
| <template if="{{ retainedBytes != null }}"> |
| {{ retainedBytes | formatSize }} |
| </template> |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">retaining path</div> |
| <div class="memberValue"> |
| <template if="{{ path == null }}"> |
| <eval-link callback="{{ retainingPath }}" label="[find]" expr="10"> |
| </eval-link> |
| </template> |
| <template if="{{ path != null }}"> |
| <template repeat="{{ element in path['elements'] }}"> |
| <div class="memberItem"> |
| <div class="memberName">[{{ element['index']}}]</div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ element['value'] }}"></instance-ref> |
| <template if="{{ element['parentField'] != null }}"> |
| in <field-ref ref="{{ element['parentField'] }}"></field-ref> |
| </template> |
| <template if="{{ element['parentListIndex'] != null }}"> |
| at list index {{ element['parentListIndex'] }} of |
| </template> |
| </div> |
| </div> |
| </template> |
| <template if="{{ path['length'] > path['elements'].length }}"> |
| showing {{ path['elements'].length }} of {{ path['length'] }} |
| <eval-link callback="{{ retainingPath }}" label="[find more]" expr="{{ path['elements'].length * 2 }}"> |
| </eval-link> |
| </template> |
| </template> |
| </div> |
| </div> |
| <template if="{{ instance['type_class'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">type class</div> |
| <div class="memberValue"> |
| <class-ref ref="{{ instance['type_class'] }}"> |
| </class-ref> |
| </div> |
| </div> |
| </template> |
| <template if="{{ instance['closureFunc'] != null }}"> |
| <div class="memberItem"> |
| <div class="memberName">closure function</div> |
| <div class="memberValue"> |
| <function-ref ref="{{ instance['closureFunc'] }}"> |
| </function-ref> |
| </div> |
| </div> |
| </template> |
| |
| <div class="memberItem"> </div> |
| |
| <div class="memberItem"> |
| <div class="memberName">toString()</div> |
| <div class="memberValue"> |
| <eval-link callback="{{ eval }}" expr="toString()"></eval-link> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <template if="{{ instance['fields'].isNotEmpty }}"> |
| fields ({{ instance['fields'].length }}) |
| <curly-block expand="{{ instance['fields'].length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ field in instance['fields'] }}"> |
| <div class="memberItem"> |
| <div class="memberName"> |
| <field-ref ref="{{ field['decl'] }}"></field-ref> |
| </div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ field['value'] }}"></instance-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br><br> |
| </template> |
| |
| <template if="{{ instance['nativeFields'].isNotEmpty }}"> |
| native fields ({{ instance['nativeFields'].length }}) |
| <curly-block expand="{{ instance['nativeFields'].length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ field in instance['nativeFields'] }}"> |
| <div class="memberItem"> |
| <div class="memberName">[{{ field['index']}}]</div> |
| <div class="memberValue">[{{ field['value']}}]</div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br><br> |
| </template> |
| |
| <template if="{{ instance['elements'].isNotEmpty }}"> |
| elements ({{ instance['elements'].length }}) |
| <curly-block expand="{{ instance['elements'].length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ element in instance['elements'] }}"> |
| <div class="memberItem"> |
| <div class="memberName">[{{ element['index']}}]</div> |
| <div class="memberValue"> |
| <instance-ref ref="{{ element['value'] }}"> |
| </instance-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br><br> |
| </template> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <eval-box callback="{{ eval }}"></eval-box> |
| </div> |
| <br><br><br><br> |
| <br><br><br><br> |
| |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| <polymer-element name="json-view" extends="observatory-element"> |
| <template> |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| </nav-bar> |
| <pre>{{ mapAsString }}</pre> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="library-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu> |
| <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav-menu> |
| <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1> |
| <!-- TODO(turnidge): Handle unnamed libraries --> |
| library {{ library.name }} |
| </h1> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">url</div> |
| <div class="memberValue">{{ library.url }}</div> |
| </div> |
| <template if="{{ library.name != library.vmName }}"> |
| <div class="memberItem"> |
| <div class="memberName">vm name</div> |
| <div class="memberValue">{{ library.vmName }}</div> |
| </div> |
| </template> |
| </div> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <template if="{{ library.imports.isNotEmpty }}"> |
| imports ({{ library.imports.length }}) |
| <curly-block expand="{{ library.imports.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ imp in library.imports }}"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| <library-ref ref="{{ imp }}"></library-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br> |
| <br> |
| </template> |
| |
| <template if="{{ library.scripts.isNotEmpty }}"> |
| scripts ({{ library.scripts.length }}) |
| <curly-block expand="{{ library.scripts.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ script in library.scripts }}"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| <script-ref ref="{{ script }}"></script-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br> |
| <br> |
| </template> |
| |
| <template if="{{ library.classes.isNotEmpty }}"> |
| classes ({{ library.classes.length }}) |
| <curly-block expand="{{ library.classes.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ cls in library.classes }}"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| <class-ref ref="{{ cls }}"></class-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br> |
| <br> |
| </template> |
| |
| <template if="{{ library.variables.isNotEmpty }}"> |
| variables ({{ library.variables.length }}) |
| <curly-block expand="{{ library.variables.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ field in library.variables }}"> |
| <div class="memberItem"> |
| <div class="memberName"> |
| <field-ref ref="{{ field }}"></field-ref> |
| </div> |
| <div class="memberValue"> |
| <template if="{{ field['value'] != null }}"> |
| <instance-ref ref="{{ field['value'] }}"></instance-ref> |
| </template> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br> |
| <br> |
| </template> |
| |
| <template if="{{ library.functions.isNotEmpty }}"> |
| functions ({{ library.functions.length }}) |
| <curly-block expand="{{ library.functions.length <= 8 }}"> |
| <div class="memberList"> |
| <template repeat="{{ function in library.functions }}"> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| <function-ref ref="{{ function }}"></function-ref> |
| </div> |
| </div> |
| </template> |
| </div> |
| </curly-block><br> |
| <br> |
| </template> |
| </div> |
| |
| <hr> |
| |
| <div class="content"> |
| <eval-box callback="{{ eval }}"></eval-box> |
| </div> |
| <br><br><br><br> |
| <br><br><br><br> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="heap-profile" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| .table { |
| border-collapse: collapse!important; |
| margin-bottom: 20px |
| table-layout: fixed; |
| } |
| .table td:nth-of-type(1) { |
| width: 30%; |
| } |
| .th, .td { |
| padding: 8px; |
| vertical-align: top; |
| } |
| .table thead > tr > th { |
| vertical-align: bottom; |
| text-align: left; |
| border-bottom:2px solid #ddd; |
| } |
| .spacer { |
| width: 16px; |
| } |
| .left-border-spacer { |
| width: 16px; |
| border-left: 1px solid; |
| } |
| .clickable { |
| color: #0489c3; |
| text-decoration: none; |
| cursor: pointer; |
| } |
| .clickable:hover { |
| text-decoration: underline; |
| cursor: pointer; |
| } |
| #classtable tr:hover > td { |
| background-color: #F4C7C3; |
| } |
| </style> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anchor="allocation profile" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></nav-refresh> |
| <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content"> |
| <h1>Allocation Profile</h1> |
| <br> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">last forced GC at</div> |
| <div class="memberValue">{{ lastServiceGC }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">last accumulator reset at</div> |
| <div class="memberValue">{{ lastAccumulatorReset }}</div> |
| </div> |
| </div> |
| </div> |
| <hr> |
| <div class="content-centered-big"> |
| <div class="flex-row"> |
| <div id="newSpace" class="flex-item-50-percent"> |
| <h2>New Generation</h2> |
| <br> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">used</div> |
| <div class="memberValue"> |
| {{ isolate.newSpace.used | formatSize }} |
| of |
| {{ isolate.newSpace.capacity | formatSize }} |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">external</div> |
| <div class="memberValue"> |
| {{ isolate.newSpace.external | formatSize }} |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">collections</div> |
| <div class="memberValue">{{ formattedCollections(true) }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">average collection time</div> |
| <div class="memberValue">{{ formattedAverage(true) }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">cumulative collection time</div> |
| <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">average time between collections</div> |
| <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div> |
| </div> |
| </div> |
| <div id="newPieChart" style="height: 300px"></div> |
| </div> |
| <div id="oldSpace" class="flex-item-50-percent"> |
| <h2>Old Generation</h2> |
| <br> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">used</div> |
| <div class="memberValue"> |
| {{ isolate.oldSpace.used | formatSize }} |
| of |
| {{ isolate.oldSpace.capacity | formatSize }} |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">external</div> |
| <div class="memberValue"> |
| {{ isolate.oldSpace.external | formatSize }} |
| </div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">collections</div> |
| <div class="memberValue">{{ formattedCollections(false) }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">average collection time</div> |
| <div class="memberValue">{{ formattedAverage(false) }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">cumulative collection time</div> |
| <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">average time between collections</div> |
| <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div> |
| </div> |
| </div> |
| <div id="oldPieChart" style="height: 300px"></div> |
| </div> |
| </div> |
| </div> |
| <br> |
| <hr> |
| <div class="content-centered-big"> |
| <table id="classtable" class="flex-item-100-percent table"> |
| <thead id="classTableHead"> |
| <tr> |
| <th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th> |
| <th class="spacer"></th> |
| <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th> |
| <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th> |
| <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(4) }}</th> |
| <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(5) }}</th> |
| <th class="spacer"></th> |
| <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th> |
| <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th> |
| <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(9) }}</th> |
| <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(10) }}</th> |
| </tr> |
| </thead> |
| <tbody id="classTableBody"> |
| </tbody> |
| </table> |
| <br><br><br> |
| <br><br><br> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="sliding-checkbox"> |
| <template> |
| <style> |
| .switch { |
| position: relative; |
| width: 121px; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| } |
| .hide { |
| display: none; |
| } |
| .label { |
| display: block; |
| overflow: hidden; |
| cursor: pointer; |
| border: 2px solid #999999; |
| border-radius: 15px; |
| } |
| .content { |
| width: 200%; |
| margin-left: -100%; |
| -moz-transition: margin 0.3s ease-in 0s; |
| -webkit-transition: margin 0.3s ease-in 0s; |
| -o-transition: margin 0.3s ease-in 0s; |
| transition: margin 0.3s ease-in 0s; |
| } |
| .content:before, .content:after { |
| float: left; |
| width: 50%; |
| height: 30px; |
| padding: 0; |
| line-height: 30px; |
| color: white; |
| font: 400 14px 'Montserrat', sans-serif; |
| -moz-box-sizing: border-box; |
| -webkit-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| .content:before { |
| content: {{ checkedText }}; |
| padding-left: 10px; |
| background-color: #0489C3; |
| } |
| .content:after { |
| content: {{ uncheckedText }}; |
| padding-right: 10px; |
| background-color: #EEEEEE; |
| color: #999999; |
| text-align: right; |
| } |
| .dot { |
| width: 14px; |
| margin: 8px; |
| background: #FFFFFF; |
| border: 2px solid #999999; |
| border-radius: 15px; |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 87px; |
| -moz-transition: all 0.3s ease-in 0s; |
| -webkit-transition: all 0.3s ease-in 0s; |
| -o-transition: all 0.3s ease-in 0s; |
| transition: all 0.3s ease-in 0s; |
| } |
| :checked + .label .content { |
| margin-left: 0; |
| } |
| :checked + .label .dot { |
| right: 0px; |
| } |
| </style> |
| <div class="switch"> |
| <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}"> |
| <label class="label" for="slide-switch"> |
| <div class="content"></div> |
| <div class="dot"></div> |
| </label> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-profile" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| <style> |
| .table { |
| border-collapse: collapse!important; |
| width: 100%; |
| margin-bottom: 20px |
| } |
| .table thead > tr > th, |
| .table tbody > tr > th, |
| .table tfoot > tr > th, |
| .table thead > tr > td, |
| .table tbody > tr > td, |
| .table tfoot > tr > td { |
| padding: 8px; |
| vertical-align: top; |
| } |
| .table thead > tr > th { |
| vertical-align: bottom; |
| text-align: left; |
| border-bottom:2px solid #ddd; |
| } |
| |
| tr:hover > td { |
| background-color: #FFF3E3; |
| } |
| .rowColor0 { |
| background-color: #FFE9CC; |
| } |
| .rowColor1 { |
| background-color: #FFDEB2; |
| } |
| .rowColor2 { |
| background-color: #FFD399; |
| } |
| .rowColor3 { |
| background-color: #FFC87F; |
| } |
| .rowColor4 { |
| background-color: #FFBD66; |
| } |
| .rowColor5 { |
| background-color: #FFB24C; |
| } |
| .rowColor6 { |
| background-color: #FFA733; |
| } |
| .rowColor7 { |
| background-color: #FF9C19; |
| } |
| .rowColor8 { |
| background-color: #FF9100; |
| } |
| |
| .tooltip { |
| display: block; |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| } |
| |
| tr:hover .tooltip { |
| display: block; |
| position: absolute; |
| top: 100%; |
| right: 100%; |
| visibility: visible; |
| z-index: 999; |
| width: 400px; |
| color: #ffffff; |
| background-color: #0489c3; |
| border-top-right-radius: 8px; |
| border-top-left-radius: 8px; |
| border-bottom-right-radius: 8px; |
| border-bottom-left-radius: 8px; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| opacity: 1; |
| } |
| |
| .white { |
| color: #ffffff; |
| } |
| |
| </style> |
| <div class="content"> |
| <h1>Sampled CPU profile</h1> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Timestamp</div> |
| <div class="memberValue">{{ refreshTime }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Time span</div> |
| <div class="memberValue">{{ timeSpan }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Sample count</div> |
| <div class="memberValue">{{ sampleCount }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Sample rate</div> |
| <div class="memberValue">{{ sampleRate }} Hz</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Sample depth</div> |
| <div class="memberValue">{{ sampleDepth }} stack frames</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Display cutoff</div> |
| <div class="memberValue">{{ displayCutoff }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Tags</div> |
| <div class="memberValue"> |
| <select value="{{tagSelector}}"> |
| <option value="uv">User > VM</option> |
| <option value="u">User</option> |
| <option value="vu">VM > User</option> |
| <option value="v">VM</option> |
| <option value="hide">None</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <hr> |
| <table id="tableTree" class="table"> |
| <thead> |
| <tr> |
| <th>Method</th> |
| <th>Self</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr template="" repeat="{{row in tree.rows }}" style="{{}}"> |
| <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}"> |
| <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span> |
| <div style="position: relative;display: inline"> |
| {{row.columns[0]}} |
| </div> |
| <code-ref ref="{{ row.code }}"></code-ref> |
| </td> |
| <td class="{{ coloring(row) }}" style="position: relative"> |
| {{row.columns[1]}} |
| <div class="tooltip"> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName white">Kind</div> |
| <div class="memberValue white">{{ row.tipKind }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName white">Percent of Parent</div> |
| <div class="memberValue white">{{ row.tipParent }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName white">Sample Count</div> |
| <div class="memberValue white">{{ row.tipTicks }} ({{ row.tipExclusive }})</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName white">Approximate Execution Time</div> |
| <div class="memberValue white">{{ row.tipTime }}</div> |
| </div> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="script-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ script.isolate }}"> |
| </isolate-nav-menu> |
| <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <template if="{{ args['pos'] == null }}"> |
| <script-inset id="scriptInset" script="{{ script }}"> |
| <h1>script {{ script.name }}</h1> |
| </script-inset> |
| </template> |
| |
| <template if="{{ args['pos'] != null }}"> |
| <script-inset id="scriptInset" script="{{ script }}" currentpos="{{ args['pos'] | parseInt }}"> |
| <h1>script {{ script.name }}</h1> |
| </script-inset> |
| </template> |
| |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="stack-trace" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ trace.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ trace.isolate.relativeLink('stacktrace') }}" anchor="stack trace" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| <template if="{{ trace['members'].isEmpty }}"> |
| <div class="content"> |
| <em>No stack</em> |
| </div> |
| </template> |
| <template if="{{ trace['members'].isNotEmpty }}"> |
| <ul class="list-group"> |
| <template repeat="{{ frame in trace['members'] }}"> |
| <li class="list-group-item"> |
| <stack-frame frame="{{ frame }}"></stack-frame> |
| </li> |
| </template> |
| </ul> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <polymer-element name="vm-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content"> |
| <h1>VM</h1> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">version</div> |
| <div class="memberValue">{{ vm.version }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">uptime</div> |
| <div class="memberValue">{{ vm.uptime | formatTime }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">type checks enabled</div> |
| <div class="memberValue">{{ vm.typeChecksEnabled }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">asserts enabled</div> |
| <div class="memberValue">{{ vm.assertsEnabled }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">pid</div> |
| <div class="memberValue">{{ vm.pid }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">refreshed at</div> |
| <div class="memberValue">{{ vm.lastUpdate }}</div> |
| </div> |
| <br> |
| <div class="memberItem"> |
| <div class="memberValue"> |
| See <a on-click="{{ goto }}" href="{{ gotoLink('/flags') }}">flags</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <br> |
| <hr> |
| |
| <ul class="list-group"> |
| <template repeat="{{ isolate in vm.isolates }}"> |
| <li class="list-group-item"> |
| <isolate-summary isolate="{{ isolate }}"></isolate-summary> |
| </li> |
| <hr> |
| </template> |
| </ul> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="service-view" extends="observatory-element"> |
| <!-- This element explicitly manages the child elements to avoid setting |
| an observable property on the old element to an invalid type. --> |
| </polymer-element> |
| |
| <polymer-element name="observatory-application" extends="observatory-element"> |
| <!-- This element explicitly manages its child elements --> |
| </polymer-element> |
| |
| |
| |
| |
| |
| <polymer-element name="service-exception-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content-centered"> |
| <h1>{{ exception.kind }}</h1> |
| <br> |
| <div class="well">{{ exception.message }}</div> |
| <template if="{{ exception.response != '' }}"> |
| <div class="well">{{ exception.response }}</div> |
| </template> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| |
| <polymer-element name="service-error-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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content-centered"> |
| <h1>{{ error.kind }}</h1> |
| <br> |
| <div class="well">{{ error.message }}</div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| <polymer-element name="vm-connect-target" extends="observatory-element"> |
| <template> |
| <style> |
| .delete-button { |
| padding: 4px; |
| background: transparent; |
| border: none !important; |
| } |
| .delete-button:hover { |
| background: #ff0000; |
| } |
| </style> |
| <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; |
| } |
| |
| .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> |
| <span> |
| <template if="{{ isCurrentTarget }}"> |
| <a on-click="{{ connectToVm }}" href="{{ gotoLink('/vm') }}">{{ target.name }} (Connected)</a> |
| </template> |
| <template if="{{ !isCurrentTarget }}"> |
| <a on-click="{{ connectToVm }}" href="{{ gotoLink('/vm') }}">{{ target.name }}</a> |
| </template> |
| <template if="{{ !isChromeTarget }}"> |
| <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button> |
| </template> |
| </span> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="vm-connect" 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; |
| } |
| |
| .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; |
| } |
| |
| .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> |
| .textbox { |
| width: 20em; |
| font: 400 16px 'Montserrat', sans-serif; |
| } |
| </style> |
| |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-control></nav-control> |
| </nav-bar> |
| |
| <div class="content-centered"> |
| <h1>Connect to a Dart VM</h1> |
| <br> |
| <hr> |
| <div class="flex-row"> |
| <div class="flex-item-40-percent"> |
| <h2><img style="height: 48px" src="packages/observatory/src/elements/img/dart_icon.png">Standalone</h2> |
| <br> |
| <ul> |
| <template repeat="{{ target in app.targets.history }}"> |
| <template if="{{ target.standalone }}"> |
| <li><vm-connect-target target="{{ target }}"></vm-connect-target></li> |
| </template> |
| </template> |
| </ul> |
| <hr> |
| <form autocomplete="on"> |
| <input class="textbox" placeholder="localhost:8181" type="text" value="{{ standaloneVmAddress }}"> |
| <input class="button" type="submit" value="Connect" on-click="{{ connectStandalone }}"> |
| </form> |
| <br> |
| <pre class="well">Run Standalone with: '--observe'</pre> |
| <hr> |
| </div> |
| |
| <div class="flex-item-20-percent"></div> |
| <div class="flex-item-40-percent"> |
| <h2><img style="height: 48px" src="packages/observatory/src/elements/img/chromium_icon.png">Chromium</h2> |
| <br> |
| <ul> |
| <template repeat="{{ target in chromeTargets }}"> |
| <li><vm-connect-target target="{{ target }}"></vm-connect-target></li> |
| </template> |
| </ul> |
| <hr> |
| <form autocomplete="on"> |
| <input class="textbox" placeholder="localhost:9222" type="text" value="{{ chromiumAddress }}"> |
| <input class="button" type="submit" value="Get Tabs" on-click="{{ getTabs }}"> |
| </form> |
| <br> |
| <pre class="well">Run Chromium with: |
| '--remote-debugging-port=9222'</pre> |
| <hr> |
| </div> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| |
| |
| |
| |
| <polymer-element name="vm-ref" 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; |
| } |
| |
| .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> |
| <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a> |
| </template> |
| </polymer-element> |
| |
| |
| |
| <observatory-application></observatory-application> |
| |
| <script src="index.html_bootstrap.dart.js" async=""></script></body></html> |
