Begin implementing a debugger page in Observatory.

runtime/bin/vmservice/observatory/lib/src/elements/debugger.html

+<link rel="import" href="../../../../packages/core_elements/core_icon_button.html">
+<link rel="import" href="../../../../packages/core_elements/core_icon.html">
+<link rel="import" href="../../../../packages/core_elements/core_icons.html">
+<link rel="import" href="../../../../packages/core_elements/core_splitter.html">
+<link rel="import" href="../../../../packages/paper_elements/paper_shadow.html">
+<link rel="import" href="../../../../packages/polymer/polymer.html">
+<link rel="import" href="function_ref.html">
+<link rel="import" href="nav_bar.html">
+<link rel="import" href="observatory_element.html">
+<link rel="import" href="script_inset.html">
+<link rel="import" href="script_ref.html">
+
+<polymer-element name="debugger-page" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+      nav-bar {
+        flex: 0 0 auto;
+      }
+      .stack {
+        flex: 0 0 auto;
+        overflow-y: auto;
+      }
+      core-splitter {
+        flex: 0 0 auto;
+      }
+      .console {
+        flex: 1 1 auto;
+        overflow-y: auto;
+      }
+      .commandline {
+        flex: 0 0 auto;
+      }
+    </style>
+
+    <div class="container">
+      <nav-bar>
+        <top-nav-menu last="{{ true }}"></top-nav-menu>
+        <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
+        </isolate-nav-menu>
+        <nav-control></nav-control>
+      </nav-bar>
+
+      <div id="stack" class="stack">
+        <debugger-stack isolate="{{ isolate }}"></debugger-stack>
+      </div>
+      <core-splitter direction="up" allowOverflow=true></core-splitter>
+      <div class="console">
+        <debugger-console isolate="{{ isolate }}"></debugger-console>
+      </div>
+      <div class="commandline">
+        <debugger-input id="debuggerInput" isolate="{{ isolate }}">
+        </debugger-input>
+      </div>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="debugger-stack" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <template if="{{ stack == null }}">
+      Loading stack frames
+    </template>
+    <template if="{{ stack != null }}">
+      <ul class="list-group">
+        <template repeat="{{ frame in stack['members'] }}">
+          <li class="list-group-item">
+            <debugger-frame frame="{{ frame }}"
+                            expand="{{ frame['depth'] == activeFrame }}">
+            </debugger-frame>
+          </li>
+        </template>
+      </ul>
+    </template>
+  </template>
+</polymer-element>
+
+
+<polymer-element name="debugger-frame" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .frameOuter {
+        position: relative;
+        padding: 5px;
+        border: 1px solid white;
+      }
+      .frameOuter:hover {
+        border: 1px solid #e0e0e0;
+      }
+      .frameSummaryText {
+        display: inline-block;
+        padding: 5px;
+      }
+      .frameId {
+        display: inline-block;
+        width: 60px;
+      }
+      .frameOuter .frameExpander {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        display: none;
+      }
+      .frameOuter:hover .frameExpander{
+        display: inline-block;
+      }
+      .frameContractor {
+        position: absolute;
+        right: 5px;
+        bottom: 5px;
+        display: inline-block;
+      }
+    </style>
+    <div class="frameOuter">
+      <paper-shadow z="{{ (expanded ? 1 : 0) }}">
+        <a on-click="{{ toggleExpand }}">
+          <div class="frameSummary">
+            <div class="frameSummaryText">
+              <div class="frameId"><b>frame {{ frame['depth'] }}</b></div>
+              <function-ref ref="{{ frame['function'] }}"></function-ref>
+              ( <script-ref ref="{{ frame['script'] }}"
+                            pos="{{ frame['tokenPos'] }}">
+              </script-ref> )
+            </div>
+            <template if="{{ !expanded }}">
+              <div class="frameExpander">
+                <core-icon class="short" icon="expand-more">
+                </core-icon>
+              </div>
+            </template>
+          </div>
+        </a>
+
+        <template if="{{expanded}}">
+          <div class="frameDetails">
+            <div class="flex-row">
+              <div class="flex-item-60-percent">
+                <script-inset height="{{ scriptHeight }}"
+                              script="{{ frame['function'].script }}"
+                              startPos="{{ frame['function'].tokenPos }}"
+                              endPos="{{ frame['function'].endTokenPos }}"
+                              currentPos="{{ frame['tokenPos'] }}">
+                </script-inset>
+              </div>
+              <div class="flex-item-40-percent">
+                <div style="padding:10px;" class="memberList">
+                  <template repeat="{{ v in frame['vars'] }}">
+                    <div class="memberItem">
+                      <div class="memberName">{{ v['name']}}</div>
+                      <div class="memberValue">
+                        <any-service-ref ref="{{ v['value'] }}">
+                        </any-service-ref>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+            <!-- TODO(turnidge): Add eval box here? -->
+            <div class="frameContractor">
+              <template if="{{expanded}}">
+                <a on-click="{{ toggleExpand }}">
+                  <core-icon class="short" icon="expand-less">
+                  </core-icon>
+                </a>
+              </template>
+            </div>
+          </div>
+        </template>
+      </paper-shadow>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="debugger-console" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .textBox {
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+      }
+    </style>
+    <div>
+      Debugging console is not yet implemented.<br>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="debugger-input" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .textBox {
+        font: 400 16px 'Montserrat', sans-serif;
+        width: 100%;
+      }
+    </style>
+    <input id="textBox" class="textBox" type="text" value="{{ text }}">
+  </template>
+</polymer-element>
+
+<script type="application/dart" src="debugger.dart"></script>