Converted Observatory script-inset & source-inset elements

runtime/observatory/lib/src/elements/css/shared.css

Index: runtime/observatory/lib/src/elements/css/shared.css
diff --git a/runtime/observatory/lib/src/elements/css/shared.css b/runtime/observatory/lib/src/elements/css/shared.css
index d378e68ed62093548e5c3acff6fe51d290685bf2..bfc16d8307f10c32654ac15800397808feeb7950 100644
--- a/runtime/observatory/lib/src/elements/css/shared.css
+++ b/runtime/observatory/lib/src/elements/css/shared.css
@@ -768,6 +768,82 @@ error-ref-wrapped > pre {
   white-space: pre;
 }
 
+/* eval-box */
+/* TODO(cbernaschina) fix eval-box-wrapped to error-ref when wrapper
+removed */
+
+eval-box-wrapped a[href]:hover {
+    text-decoration: underline;
+}
+eval-box-wrapped a[href] {
+    color: #0489c3;
+    text-decoration: none;
+}
+eval-box-wrapped .empathize {
+  font-style: italic;
+}
+eval-box-wrapped .indent {
+  margin-left: 1.5em;
+  font: 400 14px 'Montserrat', sans-serif;
+  line-height: 150%;
+}
+eval-box-wrapped .stackTraceBox {
+  margin-left: 1.5em;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  padding: 10px;
+  font-family: consolas, courier, monospace;
+  font-size: 12px;
+  white-space: pre;
+  overflow-x: auto;
+}
+eval-box-wrapped .heading {
+  line-height: 30px;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 450px;
+  padding-right: 150px;
+}
+eval-box-wrapped .heading .textbox {
+  width: 100%;
+  min-width: 300px;
+}
+eval-box-wrapped .heading .buttons {
+  position: absolute;
+  top: 0;
+  right: 0px;
+}
+eval-box-wrapped.historyExpr,
+eval-box-wrapped .historyValue {
+  vertical-align: text-top;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+eval-box-wrapped .historyExpr button {
+  display: block;
+  color: black;
+  border: none;
+  background: none;
+  text-decoration: none;
+  padding: 6px 6px;
+  cursor: pointer;
+  white-space: pre-line;
+}
+eval-box-wrapped .historyExpr button:hover {
+  background-color: #fff3e3;
+}
+eval-box-wrapped .historyValue {
+  display: block;
+  padding: 6px 6px;
+}
+eval-box-wrapped .historyDelete button {
+  border: none;
+  background: none;
+}
+eval-box-wrapped .historyDelete button:hover {
+  color: #BB3311;
+}
+
 /* flag-list */
 
 flag-list .comment {
@@ -1242,6 +1318,172 @@ sample-buffer-control .shadow {
               0 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
+/* script-inset */
+/* TODO(cbernaschina) fix script-inset-wrapped to script-inset when wrapper
+removed */
+
+script-inset-wrapped {
+  position: relative;
+}
+script-inset-wrapped button.refresh,
+script-inset-wrapped button.toggle-profile {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  border: none;
+  position: absolute;
+  display: inline-block;
+  top: 5px;
+  color: #888888;
+  line-height: 30px;
+}
+script-inset-wrapped button.refresh {
+  right: 5px;
+  font-size: 25px;
+}
+script-inset-wrapped button.toggle-profile {
+  right: 30px;
+  font-size: 20px;
+}
+script-inset-wrapped button.toggle-profile.enabled {
+  color: #BB3322;
+}
+script-inset-wrapped a {
+  color: #0489c3;
+  text-decoration: none;
+}
+script-inset-wrapped a:hover {
+  text-decoration: underline;
+}
+script-inset-wrapped .sourceInset {
+}
+script-inset-wrapped .sourceTable {
+  position: relative;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: scroll;
+}
+script-inset-wrapped .sourceRow {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+script-inset-wrapped .sourceItem, .sourceItemCurrent {
+  vertical-align: top;
+  font: 400 14px consolas, courier, monospace;
+  line-height: 125%;
+  white-space: pre;
+  max-width: 0;
+}
+script-inset-wrapped .currentLine {
+  background-color: #fff;
+}
+script-inset-wrapped .currentCol {
+  background-color: #6cf;
+}
+script-inset-wrapped .hitsCurrent,
+script-inset-wrapped .hitsNone,
+script-inset-wrapped .hitsNotExecuted,
+script-inset-wrapped .hitsExecuted,
+script-inset-wrapped .hitsCompiled,
+script-inset-wrapped .hitsNotCompiled {
+  display: table-cell;
+  vertical-align: top;
+  font: 400 14px consolas, courier, monospace;
+  margin-left: 5px;
+  margin-right: 5px;
+  text-align: right;
+  color: #a8a8a8;
+}
+script-inset-wrapped .hitsCurrent {
+  background-color: #6cf;
+  color: black;
+}
+script-inset-wrapped .hitsNotExecuted {
+  background-color: #faa;
+}
+script-inset-wrapped .hitsExecuted {
+  background-color: #aea;
+}
+script-inset-wrapped .hitsCompiled {
+  background-color: #e0e0e0;
+}
+script-inset-wrapped .hitsNotCompiled {
+  background-color: #f0c5c5;
+}
+script-inset-wrapped .noCopy {}
+script-inset-wrapped .emptyBreakpoint,
+script-inset-wrapped .possibleBreakpoint,
+script-inset-wrapped .busyBreakpoint,
+script-inset-wrapped .unresolvedBreakpoint,
+script-inset-wrapped .resolvedBreakpoint  {
+  display: table-cell;
+  vertical-align: top;
+  font: 400 14px consolas, courier, monospace;
+  width: 1em;
+  text-align: center;
+  cursor: pointer;
+}
+script-inset-wrapped .possibleBreakpoint {
+  color: #e0e0e0;
+}
+script-inset-wrapped .possibleBreakpoint:hover {
+  color: white;
+  background-color: #777;
+}
+script-inset-wrapped .busyBreakpoint {
+  color: white;
+  background-color: black;
+  cursor: wait;
+}
+script-inset-wrapped .unresolvedBreakpoint {
+  color: white;
+  background-color: #cac;
+}
+script-inset-wrapped .resolvedBreakpoint {
+  color: white;
+  background-color: #e66;
+}
+script-inset-wrapped .unresolvedBreakAnnotation {
+  color: white;
+  background-color: #cac;
+}
+script-inset-wrapped .resolvedBreakAnnotation {
+  color: white;
+  background-color: #e66;
+}
+script-inset-wrapped .notSourceProfile,
+script-inset-wrapped .noProfile,
+script-inset-wrapped .coldProfile,
+script-inset-wrapped .mediumProfile,
+script-inset-wrapped .hotProfile {
+  display: table-cell;
+  vertical-align: top;
+  font: 400 14px consolas, courier, monospace;
+  width: 4em;
+  text-align: right;
+  cursor: pointer;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+script-inset-wrapped .notSourceProfile {
+}
+script-inset-wrapped .noProfile {
+  background-color: #e0e0e0;
+}
+script-inset-wrapped .coldProfile {
+  background-color: #aea;
+}
+script-inset-wrapped .mediumProfile {
+  background-color: #fe9;
+}
+script-inset-wrapped .hotProfile {
+  background-color: #faa;
+}
+
 /* stack-trace-tree-config */
 
 stack-trace-tree-config {