Context messages (#1770)

* Display diagnostic messages

* Show links on issues if available, add hover CSS to issues

* Add correction messages

* Tweak layout of analysis errors + correction messages

* oops'd the server urls

* remove outdated parameter

* Run dart format --fix

* format protobuf file

* fix link styles

* Rename LineInfo -> Location

* keep periods at the end of analyzer messages

* change - line x to (line x)

Author: johnpryan

lib/elements/analysis_results_controller.dart

@@ -25,10 +25,10 @@ class AnalysisResultsController {
   final DElement toggle;
   bool _flashHidden;
 
-  final StreamController<AnalysisIssue> _onClickController =
+  final StreamController<Location> _onClickController =
       StreamController.broadcast();
 
-  Stream<AnalysisIssue> get onIssueClick => _onClickController.stream;
+  Stream<Location> get onItemClicked => _onClickController.stream;
 
   AnalysisResultsController(this.flash, this.message, this.toggle) {
     // Show issues by default, but hide the flash element (otherwise an empty
@@ -70,29 +70,80 @@ class AnalysisResultsController {
     message.text = '$amount ${amount == 1 ? 'issue' : 'issues'}';
 
     flash.clearChildren();
-    for (var elem in issues.map(_issueElement)) {
+    for (var issue in issues) {
+      var elem = _issueElement(issue);
       flash.add(elem);
+
+      for (var diagnostic in issue.diagnosticMessages) {
+        var diagnosticElement = _diagnosticElement(diagnostic);
+        flash.add(diagnosticElement);
+      }
     }
   }
 
   Element _issueElement(AnalysisIssue issue) {
     var message = issue.message;
-    if (issue.message.endsWith('.')) {
-      message = message.substring(0, message.length - 1);
-    }
 
-    var elem = DivElement()..classes.add('issue');
+    var elem = DivElement()..classes.addAll(['issue', 'clickable']);
 
     elem.children.add(SpanElement()
       ..text = issue.kind
       ..classes.addAll(_classesForType[issue.kind]));
 
+    var columnElem = DivElement()..classes.add('issue-column');
+
+    var messageSpan = DivElement()
+      ..text = '$message (line ${issue.line})'
+      ..classes.add('message');
+    columnElem.children.add(messageSpan);
+
+    // Add the correction, if any.
+    if (issue.correction != null && issue.correction.isNotEmpty) {
+      columnElem.children.add(DivElement()
+        ..text = issue.correction
+        ..classes.add('message'));
+    }
+
+    // Add a link to the documentation
+    if (issue.url != null && issue.url.isNotEmpty) {
+      columnElem.children.add(AnchorElement()
+        ..href = issue.url
+        ..text = ' Open Documentation'
+        ..target = '_blank'
+        ..classes.add('issue-anchor'));
+    }
+
+    elem.children.add(columnElem);
+
+    elem.onClick.listen((_) {
+      _onClickController.add(Location(
+          line: issue.line,
+          charStart: issue.charStart,
+          charLength: issue.charLength));
+    });
+
+    return elem;
+  }
+
+  Element _diagnosticElement(DiagnosticMessage diagnosticMessage) {
+    var message = diagnosticMessage.message;
+    if (message.endsWith('.')) {
+      message = message.substring(0, message.length - 1);
+    }
+
+    var elem = DivElement()..classes.addAll(['issue', 'clickable']);
+
+    elem.children.add(SpanElement()..classes.add('issue-indent'));
+
     elem.children.add(SpanElement()
-      ..text = '$message - line ${issue.line}'
+      ..text = message
       ..classes.add('message'));
 
     elem.onClick.listen((_) {
-      _onClickController.add(issue);
+      _onClickController.add(Location(
+          line: diagnosticMessage.line,
+          charStart: diagnosticMessage.charStart,
+          charLength: diagnosticMessage.charLength));
     });
 
     return elem;
@@ -118,3 +169,16 @@ class AnalysisResultsController {
     toggle.text = _hideMsg;
   }
 }
+
+/// A range of text in the file.
+class Location {
+  final int line;
+  final int charStart;
+  final int charLength;
+
+  Location({
+    this.line,
+    this.charStart,
+    this.charLength,
+  });
+}

lib/embed.dart

@@ -400,8 +400,8 @@ class Embed {
         DElement(querySelector('#issues')),
         DElement(querySelector('#issues-message')),
         DElement(querySelector('#issues-toggle')))
-      ..onIssueClick.listen((issue) {
-        _jumpTo(issue.line, issue.charStart, issue.charLength, focus: true);
+      ..onItemClicked.listen((item) {
+        _jumpTo(item.line, item.charStart, item.charLength, focus: true);
       });
 
     if (options.mode == EmbedMode.flutter || options.mode == EmbedMode.html) {

lib/playground.dart

@@ -600,8 +600,8 @@ class Playground implements GistContainer, GistController {
         DElement(querySelector('#issues')),
         DElement(querySelector('#issues-message')),
         DElement(querySelector('#issues-toggle')))
-      ..onIssueClick.listen((issue) {
-        _jumpTo(issue.line, issue.charStart, issue.charLength, focus: true);
+      ..onItemClicked.listen((item) {
+        _jumpTo(item.line, item.charStart, item.charLength, focus: true);
       });
 
     _finishedInit();

lib/scss/shared.scss

@@ -3,6 +3,12 @@
 @import 'package:dart_pad/scss/colors';
 @import 'package:dart_pad/scss/variables';
 
+a {
+  text-decoration: none;
+  cursor: pointer;
+  font-family: Roboto, sans-serif;
+}
+
 // Flashes
 #flash-container > div + div {
   // Adds space between the flashes in the flash container, if more than one is displayed.
@@ -69,16 +75,23 @@
 
 // Issues
 #issues {
-  padding: 8px;
   overflow-y: auto;
   max-height: 50vh;
 }
 
 #issues .issue {
   display: flex;
   flex-direction: row;
+  align-items: start;
   line-height: 20px;
   border-radius: 3px;
+  padding: 4px;
+  margin: 0;
+}
+
+
+
+.clickable {
   cursor: pointer;
 }
 
@@ -91,10 +104,20 @@
   font-size: $embed-editor-font-size;
   display: inline-block;
   border-radius: 3px;
-  padding: 2px 5px;
+  padding: 0 5px 2px 5px;
+  min-width: 62px;
+}
+
+.issue-indent {
+  border: 1px;
+  padding: 2px 5px; // to match size of issuelabel
   min-width: 62px;
 }
 
+.issue-anchor {
+  margin: 0 4px;
+}
+
 .issue .issuelabel.error {
   color: $issue-error-color;
   border: 1px solid $issue-error-color;

lib/services/common.dart

@@ -12,6 +12,7 @@ const nullSafetyServerUrl = 'https://nullsafety.api.dartpad.dev/';
 
 // A URL to use while debugging.
 // final serverUrl = 'http://127.0.0.1:8082/';
+// const nullSafetyServerUrl = 'http://127.0.0.1:8082/';
 
 const Duration serviceCallTimeout = Duration(seconds: 10);
 const Duration longServiceCallTimeout = Duration(seconds: 60);