misc logging improvements

lib/logging/logging.dart

@@ -129,13 +129,21 @@ class LoggingScreen extends Screen {
 
     // Log GC events.
     service.onGCEvent.listen((Event e) {
-      final String summary =
-          '${e.json['reason']} collection, ${e.json['isolate']['name']}';
+      final Map<dynamic, dynamic> newSpace = e.json['new'];
+      final Map<dynamic, dynamic> oldSpace = e.json['old'];
+      final Map<dynamic, dynamic> isolateRef = e.json['isolate'];
+
+      final int usedBytes = newSpace['used'] + oldSpace['used'];
+      final int capacityBytes = newSpace['capacity'] + oldSpace['capacity'];
+
+      final String summary = '${isolateRef['name']} • '
+          '${e.json['reason']} collection • '
+          '${printMb(usedBytes)} MB used of ${printMb(capacityBytes)} MB';
       final Map<String, dynamic> event = <String, dynamic>{
         'reason': e.json['reason'],
-        'new': e.json['new'],
-        'old': e.json['old'],
-        'isolate': e.json['isolate'],
+        'new': newSpace,
+        'old': oldSpace,
+        'isolate': isolateRef,
       };
       final String message = jsonEncode(event);
       _log(new LogData('gc', message, e.timestamp, summary: summary));
@@ -165,7 +173,14 @@ class LoggingScreen extends Screen {
 
       final bool isError =
           level != null && level >= Level.SEVERE.value ? true : false;
-      _log(new LogData(loggerName, message, e.timestamp, isError: isError));
+
+      _log(new LogData(
+        loggerName,
+        jsonEncode(logRecord),
+        e.timestamp,
+        isError: isError,
+        summary: message,
+      ));
     });
 
     // Log Flutter frame events.
@@ -174,18 +189,19 @@ class LoggingScreen extends Screen {
         final FrameInfo frame = FrameInfo.from(e.extensionData.data);
 
         final String frameInfo =
-            '<span class="pre">frame ${frame.number} ${frame.elapsedMs.toStringAsFixed(1).padLeft(4)}ms </span>';
+            '<span class="pre">${frame.elapsedMs.toStringAsFixed(1).padLeft(4)}ms </span>';
         final String div = createFrameDivHtml(frame);
 
+        _log(new LogData('${e.extensionKind.toLowerCase()}',
+            jsonEncode(e.extensionData.data), e.timestamp,
+            summaryHtml: '$frameInfo$div'));
+      } else {
         _log(new LogData(
           '${e.extensionKind.toLowerCase()}',
-          '',
+          jsonEncode(e.json),
           e.timestamp,
-          extraHtml: '$frameInfo$div',
+          summary: e.json.toString(),
         ));
-      } else {
-        _log(new LogData('${e.extensionKind.toLowerCase()}', e.json.toString(),
-            e.timestamp));
       }
     });
   }
@@ -241,16 +257,16 @@ class LogData {
   final String message;
   final int timestamp;
   final bool isError;
-  final String extraHtml;
   final String summary;
+  final String summaryHtml;
 
   LogData(
     this.kind,
     this.message,
     this.timestamp, {
     this.isError = false,
-    this.extraHtml,
     this.summary,
+    this.summaryHtml,
   });
 }
 
@@ -314,11 +330,10 @@ class LogMessageColumn extends Column<LogData> {
   String render(dynamic value) {
     final LogData log = value;
 
-    if (log.extraHtml != null) {
-      return '${log.summary ?? log.message} ${log.extraHtml}';
+    if (log.summaryHtml != null) {
+      return log.summaryHtml;
     } else {
-      // TODO(devoncarew): escape html
-      return log.summary ?? log.message;
+      return escape(log.summary ?? log.message);
     }
   }
 }
@@ -335,6 +350,7 @@ String getCssClassForEventKind(LogData item) {
   } else if (item.kind == 'gc') {
     cssClass = 'gc';
   }
+
   return cssClass;
 }
 

lib/memory/memory.dart

@@ -313,12 +313,12 @@ class MemoryChart extends LineChart<MemoryTracker> {
     }
 
     // display the process usage
-    final String rss = '${_printMb(data.processRss ?? 0, 0)} MB RSS';
+    final String rss = '${printMb(data.processRss ?? 0, 0)} MB RSS';
     processLabel.text = rss;
 
     // display the dart heap usage
     final String used =
-        '${_printMb(data.currentHeap, 1)} of ${_printMb(data.heapMax, 1)} MB';
+        '${printMb(data.currentHeap, 1)} of ${printMb(data.heapMax, 1)} MB';
     heapLabel.text = used;
 
     // re-render the svg
@@ -489,9 +489,6 @@ class HeapSample {
   HeapSample(this.bytes, this.time, this.isGC);
 }
 
-String _printMb(num bytes, int fractionDigits) =>
-    (bytes / (1024 * 1024)).toStringAsFixed(fractionDigits);
-
 // {
 //   type: ClassHeapStats,
 //   class: {type: @Class, fixedId: true, id: classes/5, name: Class},

lib/tables.dart

@@ -327,7 +327,7 @@ class Table<T> extends Object with SetStateMixin {
         }
 
         if (column.usesHtml) {
-          tableCell..setInnerHtml(column.render(column.getValue(row)));
+          tableCell.setInnerHtml(column.render(column.getValue(row)));
         } else {
           tableCell.text = column.render(column.getValue(row));
         }

lib/utils.dart

@@ -51,6 +51,10 @@ String percent(double d) => '${(d * 100).toStringAsFixed(1)}%';
 
 String percent2(double d) => '${(d * 100).toStringAsFixed(2)}%';
 
+String printMb(num bytes, [int fractionDigits = 1]) {
+  return (bytes / (1024 * 1024)).toStringAsFixed(fractionDigits);
+}
+
 String isolateName(IsolateRef ref) {
   // analysis_server.dart.snapshot$main
   String name = ref.name;
@@ -100,7 +104,8 @@ Directory getDartPrefsDirectory() {
 
 /// Return the user's home directory.
 String getUserHomeDir() {
-  final String envKey = Platform.operatingSystem == 'windows' ? 'APPDATA' : 'HOME';
+  final String envKey =
+      Platform.operatingSystem == 'windows' ? 'APPDATA' : 'HOME';
   final String value = Platform.environment[envKey];
   return value == null ? '.' : value;
 }

test/test.md

@@ -1,4 +1,3 @@
-
 ## plan for integration tests
 
 Integration tests are expected to be heavyweight and test broad areas of a

test/utils_test.dart

@@ -0,0 +1,24 @@
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:devtools/utils.dart';
+import 'package:test/test.dart';
+
+void main() {
+  group('utils', () {
+    test('printMb', () {
+      const int MB = 1024 * 1024;
+
+      expect(printMb(10 * MB, 0), '10');
+      expect(printMb(10 * MB), '10.0');
+      expect(printMb(10 * MB, 1), '10.0');
+      expect(printMb(10 * MB, 2), '10.00');
+
+      expect(printMb(1000 * MB, 0), '1000');
+      expect(printMb(1000 * MB), '1000.0');
+      expect(printMb(1000 * MB, 1), '1000.0');
+      expect(printMb(1000 * MB, 2), '1000.00');
+    });
+  });
+}

web/styles.css

@@ -203,6 +203,10 @@ table tr.selected {
     border-radius: 1px;
 }
 
+tr.selected .frame-bar {
+    background: #fff;
+}
+
 .frame-bar.over-budget {
     background: #f97c7c;
 }
@@ -469,7 +473,7 @@ div.tabnav {
 
 
 .log-details {
-    height: 120px;
+    height: 126px;
     overflow-y: scroll;
     overflow-wrap: break-word;
 }