Polishing up the attribute table

.eslintignore

@@ -13,8 +13,8 @@ fixtures/
 # Ignore built files.
 build/
 coverage/
-scripts/attribute-behavior/public/react-dom.production.min.js
-scripts/attribute-behavior/public/react.production.min.js
+fixtures/attribute-behavior/public/react-dom.production.min.js
+fixtures/attribute-behavior/public/react.production.min.js
 scripts/bench/benchmarks/**/*.js
 scripts/bench/remote-repo/
 vendor/*

fixtures/attribute-behavior/src/App.css

@@ -0,0 +1 @@
+

scripts/attribute-behavior/src/App.js → fixtures/attribute-behavior/src/App.js

@@ -1,6 +1,5 @@
 import {createElement} from 'glamor/react'; // eslint-disable-line
 /* @jsx createElement */
-import './App.css';
 
 import {MultiGrid, AutoSizer} from 'react-virtualized';
 import 'react-virtualized/styles.css';
@@ -1254,11 +1253,12 @@ function getRenderedAttributeValue(renderer, attribute, type) {
     container = document.createElement(containerTagName);
   }
 
+  let testValue;
   let defaultValue;
   try {
     const read = attribute.read || getProperty(attribute.name);
 
-    let testValue = type.testValue;
+    testValue = type.testValue;
     if (attribute.overrideStringValue !== undefined) {
       switch (type.name) {
         case 'string':
@@ -1286,13 +1286,17 @@ function getRenderedAttributeValue(renderer, attribute, type) {
     const result = read(container.firstChild);
 
     return {
+      testValue,
+      defaultValue,
       defaultValue,
       result,
       didWarn: _didWarn,
       didError: false,
     };
   } catch (error) {
     return {
+      testValue,
+      defaultValue,
       defaultValue,
       result: null,
       didWarn: _didWarn,
@@ -1380,17 +1384,17 @@ function RendererResult({version, result, defaultValue, didWarn, didError}) {
       displayResult = '<symbol>';
       break;
     case 'number':
-      displayResult = `<Number: ${result}>`;
+      displayResult = `<number: ${result}>`;
       break;
     case 'string':
       if (result === '') {
         displayResult = '<empty string>';
         break;
       }
-      displayResult = result;
+      displayResult = '"' + result + '"';
       break;
     case 'boolean':
-      displayResult = `<Boolean: ${result}>`;
+      displayResult = `<boolean: ${result}>`;
       break;
     default:
       throw new Error('Switch statement should be exhaustive.');
@@ -1399,23 +1403,110 @@ function RendererResult({version, result, defaultValue, didWarn, didError}) {
   return <div css={style}>{displayResult}</div>;
 }
 
-function Result(props) {
-  const {react15, react16, hasSameBehavior} = props;
-  const style = {position: 'absolute', width: '100%', height: '100%'};
-  if (!hasSameBehavior) {
-    style.border = '4px solid purple';
-  }
+function ResultPopover(props) {
   return (
-    <div css={style}>
-      <div css={{position: 'absolute', width: '50%', height: '100%'}}>
-        <RendererResult version={15} {...react15} />
-      </div>
+    <pre
+      css={{
+        padding: '1em',
+        width: '25em',
+      }}>
+      {JSON.stringify(
+        {
+          react15: props.react15,
+          react16: props.react16,
+          hasSameBehavior: props.hasSameBehavior,
+        },
+        null,
+        2
+      )}
+    </pre>
+  );
+}
+
+class Result extends React.Component {
+  state = {showInfo: false};
+  onMouseEnter = () => {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.timeout = setTimeout(() => {
+      this.setState({showInfo: true});
+    }, 250);
+  };
+  onMouseLeave = () => {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.setState({showInfo: false});
+  };
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.interval);
+    }
+  }
+
+  render() {
+    const {react15, react16, hasSameBehavior} = this.props;
+    const style = {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+    };
+
+    let highlight = null;
+    let popover = null;
+    if (this.state.showInfo) {
+      highlight = (
+        <div
+          css={{
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            border: '2px solid blue',
+          }}
+        />
+      );
+
+      popover = (
+        <div
+          css={{
+            backgroundColor: 'white',
+            border: '1px solid black',
+            position: 'absolute',
+            top: '100%',
+            zIndex: 999,
+          }}>
+          <ResultPopover {...this.props} />
+        </div>
+      );
+    }
+
+    if (!hasSameBehavior) {
+      style.border = '4px solid purple';
+    }
+    return (
       <div
-        css={{position: 'absolute', width: '50%', left: '50%', height: '100%'}}>
-        <RendererResult version={16} {...react16} />
+        css={style}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}>
+        <div css={{position: 'absolute', width: '50%', height: '100%'}}>
+          <RendererResult version={15} {...react15} />
+        </div>
+        <div
+          css={{
+            position: 'absolute',
+            width: '50%',
+            left: '50%',
+            height: '100%',
+          }}>
+          <RendererResult version={16} {...react16} />
+        </div>
+        {highlight}
+        {popover}
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 function ColumnHeader({children}) {

scripts/attribute-behavior/src/App.css → fixtures/attribute-behavior/src/index.css

@@ -3,6 +3,6 @@
 }
 
 body {
-  font-family: 'PragmataPro';
+  font-family: monospace;
   font-size: 12px;
 }

scripts/attribute-behavior/src/index.js → fixtures/attribute-behavior/src/index.js

@@ -1,4 +1,5 @@
 import {loadScript} from './react-loader';
+import './index.css';
 
 (async function foo() {
   await loadScript('https://unpkg.com/react@15.6.1/dist/react.min.js');

scripts/prettier/index.js

@@ -41,8 +41,8 @@ const config = {
     patterns: ['scripts/**/*.js', 'fixtures/**/*.js'],
     ignore: [
       'scripts/bench/benchmarks/**',
-      'scripts/attribute-behavior/public/react.production.min.js',
-      'scripts/attribute-behavior/public/react-dom.production.min.js',
+      'fixtures/attribute-behavior/public/react.production.min.js',
+      'fixtures/attribute-behavior/public/react-dom.production.min.js',
     ],
     options: {
       'trailing-comma': 'es5',