Polymer transformer logs now show on the frontend for pub serve.

pkg/polymer/lib/src/build/log_injector.dart

+/// This library provides a single function called injectLogs which when called

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

+ copyright notice above this

[jakemac, 2014/08/04 19:49:59]

Done.

+/// will request a logs json file and build a small widget out of them which
+/// groups the logs by level.
+library polymer.build.log_injector;
+
+import 'dart:convert';
+import 'dart:html';
+
+import 'package:path/path.dart' as path;
+
+injectLogs() {

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

Consider adding a note in a comment here to indicate that we are not using
polymer here to make sure this page works even if the app fails for some other
reason. I hope in the future, when we can have multiple Dart scripts on a page
that are independent of each other, we might be able to do this with Polymer
instead.

[jakemac, 2014/08/04 19:49:59]

Done.

+  var buildLogsUrl = '${window.location.href}._buildLogs';
+  var r = HttpRequest.getString(buildLogsUrl).then((data) {
+    // Group all logs by level.
+    var logsByLevel = {};
+    JSON.decode(data).forEach((log) {
+      logsByLevel.putIfAbsent(log['level'], () => []);
+      logsByLevel[log['level']].add(log);
+    });

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

maybe return here if there are no messages?

[jakemac, 2014/08/04 19:49:59]

Done.

+
+    // Build the wrapper, menu, and content divs.
+    var wrapperDiv = new DivElement()..classes.add('build-logs');

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

or wrapperDiv = new Element.html('<div class="build-logs"></div>');

[jakemac, 2014/08/04 19:49:58]

But mine is shorter! (and a little faster?)

[Siggi Cherem (dart-lang), 2014/08/04 20:38:37]

:-) let's keep it as you have it. 

As of speed goes, I'm not sure - in this case I don't think it matters, but more
generally browsers are optimized for innerHTML, so doing new Element.html('.....
') with a very long html is often faster than creating that HTML programatically
using the DOM APIs.

+    var menuWrapper = new DivElement()..classes.add('menu');
+    var contentWrapper = new DivElement()..classes.add('content');
+    wrapperDiv..append(menuWrapper)..append(contentWrapper);
+
+    // For each log level, add a menu item, content section, and all the logs.
+    logsByLevel.forEach((level, logs) {
+      var levelClassName = level.toLowerCase();
+
+      // Add the menu item and content item.
+      var menuItem = new DivElement()
+          ..classes.add(levelClassName)
+          ..appendHtml('$level <span class="num">(${logs.length})</span>');

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

how about:
menuItem = new Element.html(
    '<div class="$levelClassName">'
    '$level <span class="num">(...)</span>'
    '</div>');

[jakemac, 2014/08/04 19:49:59]

Done.

+      menuWrapper.append(menuItem);
+      var contentItem = new DivElement()..classes.add(levelClassName);
+      contentWrapper.append(contentItem);
+
+      // Set up the click handlers.
+      menuItem.onClick.listen((event) {
+        // Clear active class from everything, then add it to ourselves.
+        wrapperDiv.querySelectorAll('.menu > div, .content > div')

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

alternatively:
 - save a list of items/contents? so we don't do a selector all every time?
 - save the lastActiveItem and remove the 'active' class directly just on those
two nodes?

[jakemac, 2014/08/04 19:49:58]

Done, keeping track of the currently selected items now.

+            .where((e) => !identical(e, menuItem) && !identical(e, contentItem))
+            .forEach((e) { e.classes.remove('active'); });
+
+        menuItem.classes.toggle('active');
+        contentItem.classes.toggle('active');
+      });
+
+      // Add the logs to the content item.
+      logs.forEach((log) {

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

for long blocks, we tend to use a normal loop instead:

for (var log in logs) {
  ...
}

[jakemac, 2014/08/04 19:49:58]

Done.

+        var logHtml = new StringBuffer();
+        logHtml.write(
+            '<div class="message $levelClassName">${log['message']}</div>');
+        var assetId = log['assetId'];
+        if (assetId != null) {
+          logHtml.write(
+              '<div class="asset">'
+              '  <span class="package">${assetId['package']}</span>:'
+              '  <span class="path">${assetId['path']}</span>'
+              '</div>');
+        }
+        var span = log['span'];
+        if (span != null) {
+          logHtml.write(
+              '<div class="span">'
+              '  <div class="location">${span['location']}</div>'
+              '  <code class="text">${span['text']}</code>'
+              '</div>');
+        }
+
+        var logElement = new DivElement()

[Siggi Cherem (dart-lang), 2014/08/01 21:31:52]

How about at the beginning do:
logHtml.write('<div class="log">);

and here do
logHtml.write('</div>);
contentItemp.append(new Element.html(logHtml.toString());

[jakemac, 2014/08/04 19:49:59]

Done.

+          ..classes.add('log')
+          ..appendHtml(logHtml.toString());
+
+        contentItem.append(logElement);
+      });
+    });
+
+    document.body.append(wrapperDiv);
+  });
+}