WebView.render = Component('WebView', (state, handlers) => {
const {onOpen, onOpenBg, onClose, edit} = handlers;
// Do not render anything unless viewer has an `uri`
if (!state.uri) return null;
let style = mix(styleIframe);
if (state.contentOverflows && state.isActive)
style.minHeight = '100vh';
if (!state.isActive)
style.display = 'none';
/*
This is a workaround for Bug #266 that prevents capturing
screenshots if iframe or it's ancesstors have `display: none`.
Until that's fixed on platform we just hide such elements with
negative index and absolute position.
*/
if (!state.isActive && !state.thumbnail) {
style = mix(style, {
zIndex: -1,
display: 'block !important',
position: 'absolute',
width: '100vw',
height: '100vh'
});
}
return IFrame({
style: style,
isBrowser: true,
isRemote: true,
mozApp: isPrivileged(state.uri) ? getManifestURL().href : null,
allowFullScreen: true,
isVisible: state.isActive || state.isSelected,
zoom: state.zoom,
isFocused: state.isFocused,
uri: state.uri,
readyState: state.readyState,
onCanGoBackChange: event => edit(WebView.setCanGoBack(event.detail)),
onCanGoForwardChange: event => edit(WebView.setCanGoForward(event.detail)),
onBlur: event => edit(WebView.blur),
onFocus: event => edit(WebView.focus),
// onAsyncScroll: WebView.onUnhandled,
onClose: event => {
handlers.endVisit({webView: state,
time: event.timeStamp});
onClose(state.id);
},
onOpenWindow: event => onOpen(event.detail.url),
onOpenTab: event => onOpenBg(event.detail.url),
onContextMenu: event => console.log(event),
onError: event => console.error(event),
onLoadStart: event => {
edit(WebView.startLoad)
},
onLoadEnd: event => {
edit(WebView.endLoad);
handlers.beginVisit({webView: state,
time: event.timeStamp});
},
onMetaChange: event => edit(WebView.setMetaData(event.detail)),
onIconChange: event => {
edit(WebView.changeIcon(event.detail));
handlers.changeIcon({webView: state,
icon: event.detail.href});
},
onLocationChange: event => {
// Whe iframe src is set during page load location change event will
// be triggered but we do not interpret that as end of visit.
if (state.uri !== event.detail) {
handlers.endVisit({webView: state,
time: event.timeStamp});
}
edit(WebView.changeLocation(event.detail));
requestThumbnail(event.target)
.then(WebView.onThumbnailChanged(edit));
},
onSecurityChange: event => edit(WebView.changeSecurity(event.detail)),
onTitleChange: event => {
edit(WebView.setTitle(event.detail))
handlers.changeTitle({webView: state, title: event.detail});
},
onPrompt: event => console.log(event),
onAuthentificate: event => console.log(event),
// This will trigger a resize. If the content react to the resize by changing its
// layout, this might change the scrollarea again, triggering a resize… infinite
// loop.
// So we only allow contentOverflows to transition from false (default value) to true.
onScrollAreaChange: !state.contentOverflows && (event =>
edit(WebView.setContentOverflows(event.detail.height >
event.target.parentNode.clientHeight))),
onLoadProgressChange: event => edit(WebView.changeProgress(event))
});
});
WebView.render = Component('WebView', (state, {onOpen, onOpenBg, onClose, edit}) => {
// Do not render anything unless viewer has an `uri`
if (!state.uri) return null;
return IFrame({
className: ClassSet({
'iframes-frame': true,
webview: true,
contentoverflows: state.contentOverflows,
// We need to style hidden iframes that don't have tiles differntly
// to workaround #266 & be able to capture screenshots.
rendered: state.thumbnail
}),
style: {
MozUserSelect: 'none'
},
isBrowser: true,
isRemote: true,
mozApp: isPrivileged(state.uri) ? getManifestURL().href : null,
allowFullScreen: true,
isVisible: state.isActive || state.isSelected,
hidden: !state.isActive,
zoom: state.zoom,
isFocused: state.isFocused,
uri: state.uri,
readyState: state.readyState,
onCanGoBackChange: event => edit(WebView.setCanGoBack(event.detail)),
onCanGoForwardChange: event => edit(WebView.setCanGoForward(event.detail)),
onBlur: event => edit(WebView.blur),
onFocus: event => edit(WebView.focus),
// onAsyncScroll: WebView.onUnhandled,
onClose: event => onClose(state.id),
onOpenWindow: event => onOpen(event.detail.url),
onOpenTab: event => onOpenBg(event.detail.url),
onContextMenu: event => console.log(event),
onError: event => console.error(event),
onLoadStart: event => edit(WebView.startLoad),
onLoadEnd: event => edit(WebView.endLoad),
onMetaChange: event => edit(WebView.setMetaData(event.detail)),
onIconChange: event => edit(WebView.changeIcon(event.detail)),
onLocationChange: event => {
edit(WebView.changeLocation(event.detail));
requestThumbnail(event.target).
then(WebView.onThumbnailChanged(edit));
},
onSecurityChange: event => edit(WebView.changeSecurity(event.detail)),
onTitleChange: event => edit(WebView.setTitle(event.detail)),
onPrompt: event => console.log(event),
onAuthentificate: event => console.log(event),
onScrollAreaChange: event =>
edit(WebView.setContentOverflows(event.detail.height >
event.target.parentNode.clientHeight)),
onLoadProgressChange: event => edit(WebView.changeProgress(event))
});
});
LocationBar.render = Component(function LocationBarView(state, handlers) {
const {input, tabStrip, webView, suggestions, theme} = state;
const {onNavigate, editTabStrip, onGoBack, editSelectedWebView,
editInput, editSuggestions} = handlers;
const isInputFocused = input.isFocused;
return DOM.div({
style: mix(styleLocationBar, theme.locationBar),
onMouseEnter: event => editTabStrip(Previews.activate)
}, [
DOM.div({
style: mix(styleButton,
{left: 0},
theme.backButton,
!webView.canGoBack && styleDisabledButton),
key: 'back',
onClick: event => editSelectedWebView(WebView.goBack)
}, '\uf053'), // UTF8 "back" icon
Editable.renderField({
key: 'input',
style: mix(styleUrlInput,
theme.urlInput,
!isInputFocused && styleCollapse),
placeholder: 'Search or enter address',
value: Suggestions.selected(suggestions) || webView.userInput,
type: 'text',
submitKey: 'Enter',
isFocused: input.isFocused,
selectionStart: input.selectionStart,
selectionEnd: input.selectionEnd,
selectionDirection: input.selectionDirection,
onFocus: event => {
LocationBar.suggest(event.target.value, editSuggestions);
editInput(Editable.focus);
},
onBlur: event => {
editSuggestions(Suggestions.reset);
editInput(Editable.blur);
},
onSelect: event => editInput(Editable.select(event.target)),
onChange: event => {
// Reset suggestions & compute new ones from the changed input value.
editSuggestions(Suggestions.unselect);
LocationBar.suggest(event.target.value, editSuggestions);
// Also reflect changed value onto webViews useInput.
editSelectedWebView(viewer => viewer.set('userInput', event.target.value));
},
onSubmit: event => {
editSuggestions(Suggestions.reset);
onNavigate(event.target.value);
},
onKeyDown: compose(onInputNavigation(editInput, editSelectedWebView),
onSuggetionNavigation(editSuggestions))
}),
DOM.p({key: 'page-info',
style: mix(stylePageSummary,
theme.pageInfoText,
isInputFocused && styleCollapse),
onClick: event => editInput(compose(Editable.selectAll, Editable.focus))}, [
DOM.span({
key: 'securityicon',
style: {
fontFamily: 'FontAwesome',
fontWeight: 'normal',
marginRight: 6,
verticalAlign: 'middle'
}
}, isPrivileged(webView.uri) ? '\uf013' : // Gear
webView.securityState == 'secure' ? '\uf023' : ''), // Lock
DOM.span({
key: 'location',
style: theme.locationText,
style: {
fontWeight: 'bold'
}
},
webView.uri ? getDomainName(webView.uri) : ''),
DOM.span({
key: 'title',
style: mix(theme.titleText, {padding: 5})
},
webView.title ? webView.title :
webView.isLoading ? 'Loading...' :
webView.uri ? webView.uri :
'New Tab')
]),
DOM.div({key: 'reload-button',
style: mix(styleButton,
theme.reloadButton,
{right: 0},
webView.isLoading && {display:'none'},
!webView.uri && styleDisabledButton),
onClick: event => editSelectedWebView(WebView.reload)
}, '\uf01e'), // UTF8 "reload" icon
DOM.div({key: 'stop-button',
style: mix(styleButton,
theme.stopButton,
{right: 0},
!webView.isLoading && {display:'none'}),
onClick: event => editSelectedWebView(WebView.stop)
}, '\uf00d') // UTF8 "stop" icon
])});