UIP-1164 (OR): Provide easy access to DOM node in ValidationUtil.warn messages

lib/src/component/abstract_transition.dart

@@ -182,14 +182,15 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps, S
         warningMessage += ' Instead of setting this prop to 0, override the `hasTransition` getter to return false.';
       }
 
-      assert(ValidationUtil.warn(warningMessage));
+      assert(ValidationUtil.warn(warningMessage, this));
 
       skipCount = 0;
     }
 
     var timer = new Timer(transitionTimeout, () {
       assert(ValidationUtil.warn(
-        'The number of transitions expected to complete have not completed. Something is most likely wrong.'
+          'The number of transitions expected to complete have not completed. Something is most likely wrong.',
+          this
       ));
 
       complete();

lib/src/component/resize_sensor.dart

@@ -113,7 +113,8 @@ class ResizeSensorComponent extends UiComponent<ResizeSensorProps> with _SafeAni
   void componentDidMount() {
     if (props.quickMount) {
       assert(props.onInitialize == null || ValidationUtil.warn(
-          'props.onInitialize will not be called when props.quickMount is true.'
+          'props.onInitialize will not be called when props.quickMount is true.',
+          this
       ));
 
       // [1] Initialize/reset the sensor in the next animation frame after mount

lib/src/component_declaration/component_base.dart

@@ -401,7 +401,7 @@ abstract class UiProps
         );
 
         // TODO: Remove ValidationUtil.warn call when https://github.com/dart-lang/sdk/issues/26093 is resolved.
-        ValidationUtil.warn(errorMessage);
+        ValidationUtil.warn(errorMessage, this);
         throw new ArgumentError(errorMessage);
       }
     }

lib/src/util/dom_util.dart

@@ -138,7 +138,7 @@ void setSelectionRange(/* TextInputElement | TextAreaElement */Element input, in
             Google Chrome does not support `setSelectionRange` on email or number inputs.
             See: https://bugs.chromium.org/p/chromium/issues/detail?id=324360
             '''
-        )));
+        ), input));
 
         return;
       }

lib/src/util/validation_util.dart

@@ -16,6 +16,10 @@ library over_react.validation_util;
 
 import 'dart:html';
 
+import 'package:over_react/src/util/pretty_print.dart';
+import 'package:over_react/src/util/react_wrappers.dart';
+import 'package:react/react.dart' as react;
+
 typedef void ValidationUtilWarningCallback(String message);
 
 /// Utility for logging validation errors or warning.
@@ -28,10 +32,16 @@ class ValidationUtil {
   /// Use this to log warnings to the console in dev mode only.
   /// This is to be used in assert calls for dev help only so that it gets
   /// compiled out for production.
+  ///
   ///     assert(ValidationUtil.warn('Some warning message'));
   ///
-  /// The message will get print out to the console.
-  static bool warn(String message) {
+  /// Optionally, a component or element can be passed as the second parameter
+  /// to provide additional information in the console.
+  ///
+  ///     assert(ValidationUtil.warn('Some warning message', component));
+  ///
+  /// The message will be printed out to the console.
+  static bool warn(String message, [dynamic data]) {
     WARNING_COUNT += 1;
 
     if (onWarning != null) {
@@ -44,6 +54,19 @@ class ValidationUtil {
       }
 
       window.console.warn('VALIDATION WARNING: $message');
+
+      if (data != null) {
+          window.console.groupCollapsed('(Warning info)');
+          window.console.log(data);
+
+          if (isValidElement(data)) {
+            window.console.log('props: ${prettyPrintMap(getProps(data))}');
+          } else if (data is react.Component) {
+            window.console.log('props: ${data.props}');
+          }
+
+          window.console.groupEnd();
+      }
     }
 
     return true;

web/src/demo_components/button_group.dart

@@ -100,14 +100,16 @@ class ButtonGroupComponent<T extends ButtonGroupProps, S extends ButtonGroupStat
     if (isValidElement(child)) {
       if (!isComponentOfType(child, childFactory)) {
         assert(ValidationUtil.warn(
-            'An unexpected child type was found within this component.'
+            'An unexpected child type was found within this component.',
+            this
         ));
       }
 
       isCloneable = true;
     } else if (child != null) {
       assert(ValidationUtil.warn(
-          'You are not using a valid ReactElement.'
+          'You are not using a valid ReactElement.',
+          this
       ));
     }