Add diff to hydrate warnings (#10085)

Renders DOM attributes in the tags mentioned in the warnings. Borrows the idea and partially implementation of `getNodeSignature` from @giles-v #12115

Renders DOM diff showing visually the location where the hydration failed. Example warning with a diff:
```
Warning: Expected server HTML to contain a matching <div>{['children ', …]}</div> in <div>nested<!-- --> <p>children <b>text</b></p></div>.
  <div>
    {'nested'}
    {' '}
    <p>children <b>text</b></p>
+   <div>{['children ', …]}</div>
  </div>
    in div (at SSRMismatchTest.js:280)
    in div (at SSRMismatchTest.js:275)
    in div (at SSRMismatchTest.js:308)
    in SSRMismatchTest (at App.js:14)
    in div (at App.js:11)
    in body (at Chrome.js:17)
    in html (at Chrome.js:9)
    in Chrome (at App.js:10)
    in App (at index.js:8)
```

Requires changes to ReactFiberReconciler interface functions that handle hydration errors to distinguish insertion from replacement and show insertion as one added line in the diff; show replacement as one removed, one added line, at correct position among the parentInstance's DOM children:
- add `index` (use `fiber.index`) to point at which child node the insertion or replacement occurs;
- add `isReplaced` to distinguish insertion from replacement.

Extends the proof-of-concept at commit 6c425e7

https://user-images.githubusercontent.com/498274/36652198-11bb46fe-1a62-11e8-9fa2-a612827d1463.gif

Author: sompylasar

fixtures/ssr/src/components/SSRMismatchTest.js

@@ -145,7 +145,7 @@ const testCases = [
     key: 'ssr-warnForDeletedHydratableElement-didNotHydrateInstance',
     renderServer: () => (
       <div>
-        <div />
+        <div>SSRMismatchTest default text</div>
         <span />
       </div>
     ),
@@ -243,18 +243,43 @@ const testCases = [
     ),
   },
   {
-    key: 'ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance',
+    key: 'ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance-replacement',
     renderServer: () => (
       <div>
-        <span />
-        <span />
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
       </div>
     ),
     renderBrowser: () => (
       <div>
-        <span />
-        SSRMismatchTest client text
-        <span />
+        nested{' '}
+        <div>
+          children <b>text</b>
+        </div>
+      </div>
+    ),
+  },
+  {
+    key: 'ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance-insertion',
+    renderServer: () => (
+      <div>
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
+      </div>
+    ),
+    renderBrowser: () => (
+      <div>
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
+        <div>
+          children <b>text</b>
+        </div>
       </div>
     ),
   },