Logging page

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

Index: runtime/observatory/lib/src/elements/logging.html
diff --git a/runtime/observatory/lib/src/elements/logging.html b/runtime/observatory/lib/src/elements/logging.html
new file mode 100644
index 0000000000000000000000000000000000000000..9ee9d0b6d369cae79d3e441782da7890556021e9
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/logging.html
@@ -0,0 +1,70 @@
+<link rel="import" href="../../../../packages/polymer/polymer.html">
+<link rel="import" href="code_ref.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="sliding_checkbox.html">
+<link rel="import" href="view_footer.html">
+
+<polymer-element name="logging-page" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+    .outlined {
+      -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
+      -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
+      box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
+      margin: 4px;
+    }
+    .logItem {
+      font: normal 14px consolas, courier, monospace;
+      white-space: pre;
+      line-height: 125%;
+      width: 100%;
+    }
+    .FINEST {
+      background-color: #FAFAFA;
+    }
+    .FINER {
+      background-color: #ECEFF1;
+    }
+    .FINE {
+      background-color: #EFEBE9;
+    }
+    .CONFIG {
+      background-color: #FFF3E0;
+    }
+    .INFO {
+      background-color: #F1F8E9;
+    }
+    .WARNING {
+      background-color: #FFE0B2;
+    }
+    .SEVERE {
+      background-color: #FFCCBC;
+    }
+    .SHOUT {
+      background-color: #FFCDD2;
+    }
+    #log {
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+      padding: 8px;
+    }
+    </style>
+    <nav-bar>
+      <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('/logging', isolate) }}" anchor="logging" last="{{ true }}"></nav-menu>
+      <nav-refresh callback="{{ clear }}" label="Clear"></nav-refresh>
+    </nav-bar>
+    <div id="page" class="content-centered-big flex-row">
+      <select id="severityLevelSelector" value="{{ severityLevel }}"></select>

[rmacnak, 2015/07/22 00:29:26]

This results in a very-vertically-stretched box left of the messages.
It would be better the put the select above the messages with a label.

<div>Log filter: <select ...></select></div>
<div id=log></div>

[Cutch, 2015/07/22 21:33:32]

Done.

+      <div id="log" class="outlined"></div>
+    </div>
+  </template>
+</polymer-element>
+
+<script type="application/dart" src="logging.dart"></script>