Allow users to remove evaluation results.

BUG=20555
R=rmacnak@google.com

Review URL: https://codereview.chromium.org//1275163002 .

runtime/observatory/lib/src/elements/eval_box.dart

@@ -17,6 +17,7 @@ typedef Future evalType(String text);
 class EvalBoxElement extends ObservatoryElement {
   @observable String text;
   @observable String lineMode = "1-line";
+  int _exprCount = 0;
 
   @published evalType callback;
   @observable ObservableList results = toObservable([]);
@@ -39,6 +40,7 @@ class EvalBoxElement extends ObservatoryElement {
     // Use provided callback to eval the expression.
     if (callback != null) {
       var map = toObservable({});
+      map['id'] = (_exprCount++).toString();
       map['expr'] = expr;
       results.insert(0, map);
       callback(expr).then((result) {
@@ -56,5 +58,12 @@ class EvalBoxElement extends ObservatoryElement {
     text = targetElement.getAttribute('expr');
   }
 
+  void closeItem(MouseEvent e) {
+    assert(e.target is Element);
+    Element targetElement = e.target;
+    var closeId = targetElement.getAttribute('closeId');
+    results.removeWhere((item) => item['id'] == closeId);
+  }
+
   EvalBoxElement.created() : super.created();
 }

runtime/observatory/lib/src/elements/eval_box.html

@@ -42,6 +42,22 @@
         display: block;
         padding: 6px 6px;
       }
+      a.boxclose {
+        margin-left: 20px;
+        valign: top;
+        display: block;
+        height: 18px;
+        width: 18px;
+        line-height: 16px;
+        border-radius: 9px;
+        color: black;
+        font-size: 18px;
+        cursor: pointer;
+        text-align: center;
+      }
+      a.boxclose:hover {
+        background: lightgray;
+      }
     </style>
     <form style="display:flex; flex-direction:row; align-items:flex-end">
       <template if="{{ lineMode == '1-line' }}">
@@ -86,6 +102,10 @@
               </template>
             </template>
           </td>
+          <td>
+            <a class="boxclose" on-click="{{ closeItem }}"
+               closeId="{{ result['id'] }}">&times;</a>
+          </td>
         </tr>
       </table>
     </template>