1283712 - Part 11.1: Show notes in devtools console.

devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js

@@ -34,6 +34,7 @@ function EvaluationResult(props) {
     id: messageId,
     exceptionDocURL,
     frame,
+    notes,
   } = message;
 
   let messageBody;
@@ -57,6 +58,7 @@ function EvaluationResult(props) {
     serviceContainer,
     exceptionDocURL,
     frame,
+    notes,
   };
   return Message(childProps);
 }

devtools/client/webconsole/new-console-output/components/message-types/page-error.js

@@ -44,6 +44,7 @@ function PageError(props) {
     stacktrace,
     frame,
     exceptionDocURL,
+    notes,
   } = message;
 
   const childProps = {
@@ -62,6 +63,7 @@ function PageError(props) {
     stacktrace,
     serviceContainer,
     exceptionDocURL,
+    notes,
   };
   return Message(childProps);
 }

devtools/client/webconsole/new-console-output/components/message.js

@@ -47,6 +47,10 @@ const Message = createClass({
       onViewSourceInDebugger: PropTypes.func.isRequired,
       sourceMapService: PropTypes.any,
     }),
+    notes: PropTypes.arrayOf(PropTypes.shape({
+      messageBody: PropTypes.string.isRequired,
+      frame: PropTypes.any,
+    })),
   },
 
   getDefaultProps: function () {
@@ -90,6 +94,7 @@ const Message = createClass({
       serviceContainer,
       dispatch,
       exceptionDocURL,
+      notes,
     } = this.props;
 
     topLevelClasses.push("message", source, type, level);
@@ -127,6 +132,29 @@ const Message = createClass({
       });
     }
 
+    let notesNodes;
+    if (notes) {
+      notes.map(note => dom.span(
+        { className: "message-flex-body error-note" },
+        dom.span({ className: "message-body devtools-monospace" },
+          "note: " + note.messageBody
+        ),
+        dom.span({ className: "message-location devtools-monospace" },
+          note.frame ? FrameView({
+            frame: note.frame,
+            onClick: serviceContainer
+              ? serviceContainer.onViewSourceInDebugger
+              : undefined,
+            showEmptyPathAsHost: true,
+            sourceMapService: serviceContainer
+              ? serviceContainer.sourceMapService
+              : undefined
+          }) : null
+        )));
+    } else {
+      notesNodes = [];
+    }
+
     const repeat = this.props.repeat ? MessageRepeat({repeat: this.props.repeat}) : null;
 
     // Configure the location.
@@ -167,7 +195,8 @@ const Message = createClass({
           repeat,
           location
         ),
-        attachment
+        attachment,
+        ...notesNodes
       )
     );
   }

devtools/client/webconsole/new-console-output/selectors/messages.js

@@ -126,6 +126,15 @@ function matchSearchFilters(message, filters) {
     || (message.parameters !== null
         && message.parameters.join("").toLocaleLowerCase()
             .includes(text.toLocaleLowerCase()))
+    // Look for a match in notes.
+    || (Array.isArray(message.notes) && message.notes.some(note =>
+          // Look for a match in location.
+          isTextInFrame(text, note.frame)
+          // Look for a match in messageBody.
+          || (note.messageBody !== null
+                && note.messageBody.toLocaleLowerCase()
+                     .includes(text.toLocaleLowerCase()))
+        ))
   );
 }
 

devtools/client/webconsole/new-console-output/types.js

@@ -38,6 +38,7 @@ exports.ConsoleMessage = Immutable.Record({
   groupId: null,
   exceptionDocURL: null,
   userProvidedStyles: null,
+  notes: null,
 });
 
 exports.NetworkEventMessage = Immutable.Record({

devtools/client/webconsole/new-console-output/utils/messages.js

@@ -165,6 +165,7 @@ function transformPacket(packet) {
         stacktrace: pageError.stacktrace ? pageError.stacktrace : null,
         frame,
         exceptionDocURL: pageError.exceptionDocURL,
+        notes: pageError.notes,
       });
     }
 
@@ -185,7 +186,8 @@ function transformPacket(packet) {
         exceptionMessage: messageText,
         exceptionDocURL,
         frame,
-        result: parameters
+        result: parameters,
+        notes,
       } = packet;
 
       const level = messageText ? MESSAGE_LEVEL.ERROR : MESSAGE_LEVEL.LOG;
@@ -197,6 +199,7 @@ function transformPacket(packet) {
         parameters,
         exceptionDocURL,
         frame,
+        notes,
       });
     }
   }