| <link rel="import" href="../../../../packages/polymer/polymer.html"> |
| <link rel="import" href="nav_bar.html"> |
| <link rel="import" href="observatory_element.html"> |
| |
| <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> |
| <link rel="stylesheet" href="css/shared.css"> |
| <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> |
| <link rel="stylesheet" href="css/shared.css"> |
| <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="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="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> |
| |
| <script type="application/dart" src="vm_connect.dart"></script> |