Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(675)

Unified Diff: runtime/observatory/lib/src/elements/debugger.html

Issue 2312553002: Converted Observatory debugger elements (Closed)
Patch Set: Sharing command history and console Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: runtime/observatory/lib/src/elements/debugger.html
diff --git a/runtime/observatory/lib/src/elements/debugger.html b/runtime/observatory/lib/src/elements/debugger.html
deleted file mode 100644
index da96388d38d880b88a92020a29e864fcbf91cecb..0000000000000000000000000000000000000000
--- a/runtime/observatory/lib/src/elements/debugger.html
+++ /dev/null
@@ -1,478 +0,0 @@
-<link rel="import" href="../../../../packages/polymer/polymer.html">
-<link rel="import" href="eval_link.html">
-
-<!-- TODO(turnidge): Use core-icon once core_elements work properly in
- devtools -->
-<polymer-element name="icon-expand-less" noscript>
- <template>
- <svg width="24" height="24">
- <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-expand-more" noscript>
- <template>
- <svg width="24" height="24">
- <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-chevron-right" noscript>
- <template>
- <svg width="24" height="24">
- <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-chevron-left" noscript>
- <template>
- <svg width="24" height="24">
- <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-horizontal-three-dot" noscript>
- <template>
- <svg width="24" height="24">
- <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-vertical-three-dot" noscript>
- <template>
- <svg width="24" height="24">
- <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-info" noscript>
- <template>
- <svg width="24" height="24">
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="icon-info-outline" noscript>
- <template>
- <svg width="24" height="24">
- <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
- </svg>
- </template>
-</polymer-element>
-
-<polymer-element name="debugger-page">
- <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;
- }
- .splitter {
- height: 0px;
- margin: 0px;
- font-size: 1px;
- border-bottom: 1px solid #888;
- }
- core-splitter {
- flex: 0 0 auto;
- }
- .console {
- flex: 1 1 auto;
- overflow-x: auto;
- overflow-y: auto;
- }
- .commandline {
- flex: 0 0 auto;
- }
- </style>
-
- <div class="container">
- <nav-bar id="navbarDiv" >
- <top-nav-menu></top-nav-menu>
- <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
- <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
- <nav-menu link="{{ makeLink('/debugger', isolate) }}" anchor="debugger" last="{{ true }}"></nav-menu>
- <nav-notify notifications="{{ app.notifications }}"
- notifyOnPause="{{ false }}"></nav-notify>
- </nav-bar>
- <div id="stackDiv" class="stack">
- <debugger-stack id="stackElement" isolate="{{ isolate }}"></debugger-stack>
- </div>
- <!--
- <core-splitter direction="up" allowOverflow=true></core-splitter>
- -->
- <div id="splitterDiv"><hr class="splitter"></div>
- <div id="consoleDiv" class="console">
- <debugger-console id="console" isolate="{{ isolate }}"></debugger-console>
- </div>
- <div id="commandDiv" class="commandline">
- <debugger-input id="commandline" isolate="{{ isolate }}"></debugger-input>
- </div>
- </div>
- </template>
-</polymer-element>
-
-<polymer-element name="debugger-stack">
- <template>
- <link rel="stylesheet" href="css/shared.css">
- <style>
- .sampledMessage {
- margin: 0px 20px 10px 20px;
- font: 400 14px 'Montserrat', sans-serif;
- line-height: 125%;
- }
- .splitter {
- height: 0px;
- margin: 0px;
- font-size: 1px;
- border-bottom: 1px dashed #888;
- }
- .noMessages, .noStack {
- margin: 10px 0px 10px 25px;
- font: bold 14px 'Montserrat', sans-serif;
- line-height: 125%;
- }
- </style>
- <template if="{{ isSampled }}">
- <div class="sampledMessage">
- The program is not paused. The stack trace below may be out of date.<br>
- <br>
- <action-link label="Pause Isolate" callback="{{ doPauseIsolate }}">
- </action-link>
- <action-link label="Refresh Stack" callback="{{ doRefreshStack }}">
- </action-link>
- <br>
- <br>
- <hr class="splitter">
- </div>
- </template>
- <template if="{{ !hasStack }}">
- <div class="noStack">No stack</div>
- </template>
- <ul id="frameList" class="list-group">
- <!-- debugger-frame elements are added programmatically -->
- </ul>
- <hr>
- <template if="{{ !hasMessages }}">
- <div class="noMessages">No pending messages</div>
- </template>
- <ul id="messageList" class="list-group">
- <!-- debugger-message elements are added programmatically -->
- </ul>
- </template>
-</polymer-element>
-
-
-<polymer-element name="debugger-frame">
- <template>
- <link rel="stylesheet" href="css/shared.css">
- <style>
- .frameOuter {
- position: relative;
- padding: 5px;
- border: 1px solid white;
- }
- .frameOuter:hover {
- border: 1px solid #e0e0e0;
- }
- .shadow {
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
- 0 2px 5px 0 rgba(0, 0, 0, 0.26);
- }
- .current {
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26),
- 0 2px 5px 0 rgba(0, 0, 0, 0.46);
- border: 1px solid #444;
- }
- .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;
- }
- .flex-item-script {
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 765px;
- }
- .flex-item-vars {
- flex-grow: 5;
- flex-shrink: 0;
- flex-basis: 250px;
- overflow-x: hidden;
- }
- #vars {
- position: relative;
- top: 5px;
- padding-left:2em;
- padding-bottom: 5px;
- }
- </style>
- <div id="frameOuter" class="frameOuter">
- <a on-click="{{ toggleExpand }}">
- <div class="frameSummary">
- <div class="frameSummaryText">
- <div class="frameId"><b>frame {{ frame.index }}</b></div>
- <function-ref ref="{{ frame.function }}"></function-ref>
- ( <source-link location="{{ frame.location }}"></source-link> )
- </div>
- <template if="{{ !expanded }}">
- <div class="frameExpander">
- <icon-expand-more></icon-expand-more>
- </div>
- </template>
- </div>
- </a>
-
- <template if="{{expanded}}">
- <div class="frameDetails">
- <div class="flex-row-wrap">
- <div class="flex-item-script">
- <source-inset height="{{ scriptHeight }}"
- location="{{ frame.function.location }}"
- currentPos="{{ frame.location.tokenPos }}"
- inDebuggerContext="{{ true }}"
- scroller="{{ scroller }}"
- variables="{{ frame.variables }}">
- </source-inset>
- </div>
- <div class="flex-item-vars">
- <div id="vars" class="memberList">
- <template repeat="{{ v in properLocals }}">
- {{ v['name']}}&nbsp;:&nbsp;
- <any-service-ref ref="{{ v['value'] }}"
- expandKey="{{ makeExpandKey(v['name']) }}"
- asValue="{{ true }}">
- </any-service-ref><br>
- </template>
- </div>
- </div>
- </div>
- <!-- TODO(turnidge): Add eval box here? -->
- <div class="frameContractor">
- <template if="{{expanded}}">
- <a on-click="{{ toggleExpand }}">
- <icon-expand-less></icon-expand-less>
- </a>
- </template>
- </div>
- </div>
- </template>
- </div>
- </template>
-</polymer-element>
-
-<polymer-element name="debugger-message">
- <template>
- <link rel="stylesheet" href="css/shared.css">
- <style>
- .messageOuter {
- position: relative;
- padding: 5px;
- border: 1px solid white;
- }
- .messageOuter:hover {
- border: 1px solid #e0e0e0;
- }
- .shadow {
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
- 0 2px 5px 0 rgba(0, 0, 0, 0.26);
- }
- .current {
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26),
- 0 2px 5px 0 rgba(0, 0, 0, 0.46);
- border: 1px solid #444;
- }
- .messageSummaryText {
- display: inline-block;
- padding: 5px;
- }
- .messageId {
- display: inline-block;
- width: 100px;
- }
- .messageOuter .messageExpander {
- position: absolute;
- right: 5px;
- top: 5px;
- display: none;
- }
- .messageOuter:hover .messageExpander {
- display: inline-block;
- }
- .messageContractor {
- position: absolute;
- right: 5px;
- bottom: 5px;
- display: inline-block;
- }
- .flex-item-script {
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 765px;
- }
- .flex-item-vars {
- flex-grow: 5;
- flex-shrink: 0;
- flex-basis: 225px;
- }
- </style>
- <div id="messageOuter" class="messageOuter">
- <a on-click="{{ toggleExpand }}">
- <div class="messageSummary">
- <div class="messageSummaryText">
- <div class="messageId"><b>message {{ message.index }}</b></div>
- <function-ref ref="{{ message.handler }}"></function-ref>
- ( <source-link location="{{ message.location }}">
- </source-link> )
- </div>
- <template if="{{ !expanded }}">
- <div class="messageExpander">
- <icon-expand-more></icon-expand-more>
- </div>
- </template>
- </div>
- </a>
-
- <template if="{{expanded}}">
- <div class="messageDetails">
- <div class="flex-row-wrap">
- <div class="flex-item-script">
- <template if="{{ message.handler != null }}">
- <source-inset height="{{ scriptHeight }}"
- location="{{ message.handler.location }}"
- inDebuggerContext="{{ true }}">
- </source-inset>
- </template>
- </div>
- <div class="flex-item-vars">
- <div class="memberItem">
- <div class="memberName"></div>
- <div class="memberValue">
- <eval-link callback="{{ previewMessage }}" label="[preview]" result="{{ preview }}"></eval-link>
- </div>
- </div>
- </div>
- </div>
- <div class="messageContractor">
- <template if="{{expanded}}">
- <a on-click="{{ toggleExpand }}">
- <icon-expand-less></icon-expand-less>
- </a>
- </template>
- </div>
- </div>
- </template>
- </div>
- </template>
-</polymer-element>
-
-<polymer-element name="debugger-console">
- <template>
- <link rel="stylesheet" href="css/shared.css">
- <style>
- .console {
- margin: 0px 20px 10px 20px;
- }
- .normal {
- font: normal 14px consolas, courier, monospace;
- white-space: pre;
- line-height: 125%;
- }
- .bold {
- font: bold 14px consolas, courier, monospace;
- white-space: pre;
- line-height: 125%;
- }
- .red {
- font: normal 14px consolas, courier, monospace;
- white-space: pre;
- line-height: 125%;
- color: red;
- }
- .green {
- font: normal 14px consolas, courier, monospace;
- white-space: pre;
- line-height: 125%;
- color: green;
- }
- .spacer {
- height: 20px;
- }
- </style>
- <div id="consoleText" class="console">
- <!-- Console output is added programmatically -->
- </div>
- </template>
-</polymer-element>
-
-<polymer-element name="debugger-input">
- <template>
- <link rel="stylesheet" href="css/shared.css">
- <style>
- .container {
- height: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- .textBox {
- flex: 1 1 auto;
- margin: 20px;
- padding: 5px;
- font: 400 16px consolas, courier, monospace;
- width: 95%;
- }
- .modalPrompt {
- flex: 0 0 auto;
- margin-top: 20px;
- margin-left: 20px;
- padding: 5px;
- font: 400 16px consolas, courier, monospace;
- color: red;
- }
- </style>
- <div class="container">
- <template if="{{ modalPrompt != null }}">
- <div class="modalPrompt">{{ modalPrompt }}</div>
- </template>
- <input id="textBox" class="textBox" type="text" value="{{ text }}" autofocus>
- </div>
- </template>
-</polymer-element>
-
-<script type="application/dart" src="debugger.dart"></script>
« no previous file with comments | « runtime/observatory/lib/src/elements/debugger.dart ('k') | runtime/observatory/lib/src/elements/helpers/any_ref.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698