Fix extension browser action webview displaying no content when first opened

Fix #13633 via a workaround to hide and show the webview after the first time it is attached to a new WebContents.
Also avoid flash of different sizes by only setting a new size once the page has finished load (success or fail).

Author: petemill

app/renderer/components/main/popupWindow.js

@@ -18,6 +18,16 @@ const windowActions = require('../../../../js/actions/windowActions')
 
 // Styles
 const globalStyles = require('../styles/global')
+const shouldDebugWebviewEvents = false
+const waitForFrame = () => new Promise(resolve => window.requestAnimationFrame(resolve))
+
+async function forceDrawWebview (webview) {
+  await waitForFrame()
+  webview.style.visibility = 'hidden'
+  await waitForFrame()
+  webview.style.visibility = ''
+  await waitForFrame()
+}
 
 class PopupWindow extends React.Component {
   constructor (props) {
@@ -47,8 +57,39 @@ class PopupWindow extends React.Component {
       })
       webview.addEventListener('did-attach', () => {
         webview.enablePreferredSizeMode(true)
+        // Workaround first-draw blankness by forcing hide and show.
+        if (!this.hasDrawn) {
+          forceDrawWebview(webview)
+          this.hasDrawn = true
+        }
+      })
+      webview.addEventListener('load-start', () => {
+        if (shouldDebugWebviewEvents) {
+          console.log('load-start')
+        }
+      })
+      webview.addEventListener('did-finish-load', () => {
+        if (shouldDebugWebviewEvents) {
+          console.log('did-finish-load')
+        }
+        windowActions.setPopupWindowLoaded()
+      })
+      webview.addEventListener('did-fail-load', () => {
+        if (shouldDebugWebviewEvents) {
+          console.log('did-fail-load')
+        }
+        windowActions.setPopupWindowLoaded()
+      })
+      webview.addEventListener('did-fail-provisional-load', () => {
+        if (shouldDebugWebviewEvents) {
+          console.log('did-fail-provisional-load')
+        }
+        windowActions.setPopupWindowLoaded()
       })
       webview.addEventListener('preferred-size-changed', () => {
+        if (shouldDebugWebviewEvents) {
+          console.log('preferred-size-changed')
+        }
         webview.getPreferredSize((preferredSize) => {
           const width = preferredSize.width
           const height = preferredSize.height
@@ -84,6 +125,7 @@ class PopupWindow extends React.Component {
     props.height = parseInt(detail.get('height'))
     props.top = parseInt(detail.get('top'))
     props.left = parseInt(detail.get('left'))
+    props.loaded = detail.get('didFinishLoad')
 
     // used in other functions
     props.src = detail.get('src')
@@ -122,6 +164,7 @@ class PopupWindow extends React.Component {
       data-popup-window
       className={css(
         styles.popupWindow,
+        !this.props.loaded && styles.popupWindow_notLoaded,
         style.right !== undefined && styles.popupWindow_reverseExpand
       )}
       style={style} />
@@ -145,6 +188,10 @@ const styles = StyleSheet.create({
     zIndex: globalStyles.zindex.zindexPopupWindow
   },
 
+  popupWindow_notLoaded: {
+    opacity: 0
+  },
+
   popupWindow_reverseExpand: {
     flexDirection: 'row-reverse'
   }

js/actions/windowActions.js

@@ -520,6 +520,12 @@ const windowActions = {
     })
   },
 
+  setPopupWindowLoaded: function () {
+    dispatch({
+      actionType: windowConstants.WINDOW_SET_POPUP_WINDOW_LOADED
+    })
+  },
+
   /**
    * Dispatches a message to indicate that the frame should be muted
    *

js/constants/windowConstants.js

@@ -44,6 +44,7 @@ const windowConstants = {
   WINDOW_SET_CONTEXT_MENU_DETAIL: _, // If set, also indicates that the context menu is shown
   WINDOW_SET_CONTEXT_MENU_SELECTED_INDEX: _,
   WINDOW_SET_POPUP_WINDOW_DETAIL: _, // If set, also indicates that the popup window is shown
+  WINDOW_SET_POPUP_WINDOW_LOADED: _,
   WINDOW_HIDE_BOOKMARK_HANGER: _,
   WINDOW_SET_AUDIO_MUTED: _,
   WINDOW_SET_FAVICON: _,

js/stores/windowStore.js

@@ -509,7 +509,16 @@ const doAction = (action) => {
       if (!action.detail) {
         windowState = windowState.delete('popupWindowDetail')
       } else {
+        const alreadyFinishedLoad = windowState.getIn(['popupWindowDetail', 'didFinishLoad'])
         windowState = windowState.set('popupWindowDetail', action.detail)
+        if (alreadyFinishedLoad) {
+          windowState = windowState.setIn(['popupWindowDetail', 'didFinishLoad'], true)
+        }
+      }
+      break
+    case windowConstants.WINDOW_SET_POPUP_WINDOW_LOADED:
+      if (windowState.has('popupWindowDetail')) {
+        windowState = windowState.setIn(['popupWindowDetail', 'didFinishLoad'], true)
       }
       break
     case windowConstants.WINDOW_SET_AUDIO_MUTED: