Refactor single diff implmentation

src/js/components/tree/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Actions from '../actions'
-import { createFileTree, isElementVisible, StorageSync, getBrowserApi, isElementTargetAndVisible, hideAllDiffs } from '../../lib'
+import { createFileTree, isElementVisible, StorageSync, getBrowserApi, isElementTargetAndVisible } from '../../lib'
 import { createTree } from '../../createTree'
 
 const MIN_RESIZE_WIDTH = 55
@@ -64,18 +64,6 @@ class Tree extends React.Component {
     if (!this.unmounted) {
       this.setState({ options })
     }
-
-    if (options.singleDiff) {
-      hideAllDiffs()
-      document.getElementsByClassName('__better_github_pr')[0].style.height = 'auto'
-
-      // if we came from a link we should unhide the diff so perma linking works
-      const id = window.location.href.split('#')[1]
-      if (id) {
-        const currentDiff = document.getElementById(id)
-        currentDiff.style.display = 'block'
-      }
-    }
   }
 
   componentWillUnmount () {

src/js/index.jsx

@@ -1,12 +1,38 @@
 import React from 'react'
 import { render } from 'react-dom'
 import Tree from './components/tree'
-import { createFileTree, createRootElement, getBrowserApi } from './lib'
+import { createFileTree, createRootElement, getBrowserApi, hideAllDiffs, StorageSync } from './lib'
 
 import './style.css'
 
 const { document, MutationObserver, FontFace, parseInt = Number.parseInt } = window
 
+// div that contains the diffs
+const diffContainerElement = document.getElementsByClassName('js-diff-progressive-container')[1]
+
+// hide all diffs when content is added to this div
+const diffObserver = new MutationObserver(async () => {
+  const options = await StorageSync.get()
+  if (!options.singleDiff) {
+    return
+  }
+
+  hideAllDiffs()
+
+  const id = window.location.href.split('#')[1]
+
+  // if we have a diff ref try to unhide it
+  if (id) {
+    const currentDiff = document.getElementById(id)
+
+    if (currentDiff) {
+      currentDiff.style.display = 'block'
+    }
+  }
+})
+
+diffObserver.observe(diffContainerElement, { childList: true })
+
 let observer
 const observe = () => {
   observer && observer.disconnect()

src/js/lib.js

@@ -239,10 +239,9 @@ export const isFileViewed = diffElement => {
 
 // hide all the diff elements
 export const hideAllDiffs = () => {
-  const diffNodeList = document.querySelectorAll('.file-info > a')
+  const diffNodeList = document.getElementsByClassName('js-file')
 
-  diffNodeList.forEach(item => {
-    const diffElement = item.parentElement.parentElement.parentElement
-    diffElement.style.display = 'none'
-  })
+  for (let i = 0; i < diffNodeList.length; i++) {
+    diffNodeList[i].style.display = 'none'
+  }
 }