Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Fix extension browser action webview displaying no content when first…
Browse files Browse the repository at this point in the history
… 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).
  • Loading branch information
petemill committed Jul 20, 2018
1 parent 7370c81 commit e1944b3
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 0 deletions.
47 changes: 47 additions & 0 deletions app/renderer/components/main/popupWindow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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} />
Expand All @@ -145,6 +188,10 @@ const styles = StyleSheet.create({
zIndex: globalStyles.zindex.zindexPopupWindow
},

popupWindow_notLoaded: {
opacity: 0
},

popupWindow_reverseExpand: {
flexDirection: 'row-reverse'
}
Expand Down
6 changes: 6 additions & 0 deletions js/actions/windowActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down
1 change: 1 addition & 0 deletions js/constants/windowConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: _,
Expand Down
9 changes: 9 additions & 0 deletions js/stores/windowStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit e1944b3

Please sign in to comment.