fix: Bugs related to focused webContents (#1525)

* Handle webcontents focus/blur

* Use focused webcontents on menu bar

* Add editFlags reducer

* Add WebViewComponent

* Use Loading component from Fuselage

* Add ReparentingContainer

* Add FailureImage

* Add better webContents handling on WebViewComponent

* Fix ids in FailureImage

* Update navigation events for webviews

* Add wrapper on ServerPane

* Add Shell

* Fix reloading state

Author: tassoevan

package.json

@@ -65,7 +65,7 @@
     "@babel/preset-react": "^7.8.3",
     "@fiahfy/icns-convert": "^0.0.8",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rocket.chat/fuselage": "^0.2.0-dev.106",
+    "@rocket.chat/fuselage": "^0.2.0-dev.111",
     "@rocket.chat/fuselage-hooks": "^0.2.0-dev.94",
     "babel-eslint": "^10.0.3",
     "builtin-modules": "^3.0.0",

src/actions.js

@@ -11,8 +11,10 @@ export const DEEP_LINK_TRIGGERED = 'deep-link/triggered';
 export const DEEP_LINKS_SERVER_ADDED = 'deep-links/server-added';
 export const DEEP_LINKS_SERVER_FOCUSED = 'deep-links/server-focused';
 export const LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED = 'loading-error-view/reload-server-clicked';
+export const MAIN_WINDOW_EDIT_FLAGS_CHANGED = 'main-window/edit-flags-changed';
 export const MAIN_WINDOW_INSTALL_UPDATE_CLICKED = 'main-window/install-update-clicked';
 export const MAIN_WINDOW_STATE_CHANGED = 'main-window/state-changed';
+export const MAIN_WINDOW_WEBCONTENTS_FOCUSED = 'main-window/webcontents-focused';
 export const MENU_BAR_ABOUT_CLICKED = 'menu-bar/about-clicked';
 export const MENU_BAR_ADD_NEW_SERVER_CLICKED = 'menu-bar/add-new-server-clicked';
 export const MENU_BAR_CLEAR_TRUSTED_CERTIFICATES_CLICKED = 'menu-bar/clear-trusted-certificates-clicked';
@@ -65,6 +67,7 @@ export const UPDATES_UPDATE_DOWNLOADED = 'updates/update-downloaded';
 export const WEBVIEW_CERTIFICATE_DENIED = 'webview/certificate-denied';
 export const WEBVIEW_CERTIFICATE_TRUSTED = 'webview/certificate-trusted';
 export const WEBVIEW_DID_NAVIGATE = 'webview/did-navigate';
+export const WEBVIEW_EDIT_FLAGS_CHANGED = 'webview/edit-flags-changed';
 export const WEBVIEW_FAVICON_CHANGED = 'webview/favicon-changed';
 export const WEBVIEW_FOCUS_REQUESTED = 'webview/focus-requested';
 export const WEBVIEW_FOCUSED = 'webview/focused';

src/components/AboutDialog/index.js

@@ -1,4 +1,4 @@
-import { Box, Button, Field, Flex, Margins, ToggleSwitch } from '@rocket.chat/fuselage';
+import { Box, Button, Field, Flex, Loading, Margins, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { remote } from 'electron';
 import React, { useState, useRef, useEffect, useMemo } from 'react';
@@ -18,10 +18,6 @@ import {
 } from '../../actions';
 import { RocketChatLogo } from '../RocketChatLogo.js';
 import { useSaga } from '../SagaMiddlewareProvider';
-import {
-	LoadingIndicator,
-	LoadingIndicatorDot,
-} from './styles.js';
 import { Dialog } from '../Dialog/index.js';
 
 export function AboutDialog() {
@@ -130,15 +126,11 @@ export function AboutDialog() {
 
 					<Margins inline='auto' block='x8'>
 						{checkingForUpdates && <Box>
-							{checkingForUpdatesMessage
-								? <Margins block='x12'>
-									<Box textStyle='c1' textColor='info'>{checkingForUpdatesMessage}</Box>
-								</Margins>
-								: <LoadingIndicator>
-									<LoadingIndicatorDot />
-									<LoadingIndicatorDot />
-									<LoadingIndicatorDot />
-								</LoadingIndicator>}
+							<Margins block='x12'>
+								{checkingForUpdatesMessage
+									? <Box textStyle='c1' textColor='info'>{checkingForUpdatesMessage}</Box>
+									: <Loading size='x16' />}
+							</Margins>
 						</Box>}
 
 						<Field.Row>

src/components/AboutDialog/styles.js

@@ -27,7 +27,6 @@ const defaultServerUrl = 'https://open.rocket.chat';
 
 export function AddServerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === null);
-	const isFull = useSelector(({ servers, isSideBarEnabled }) => !(servers.length > 0 && isSideBarEnabled));
 	const dispatch = useDispatch();
 	const { t } = useTranslation();
 	const [input, setInput] = useState('');
@@ -129,7 +128,7 @@ export function AddServerView() {
 		inputRef.current.focus();
 	}, [isVisible]);
 
-	return <Wrapper isVisible={isVisible} isFull={isFull}>
+	return <Wrapper isVisible={isVisible}>
 		<Content>
 			<Margins block='x16'>
 				<Box>

src/components/AddServerView/index.js

@@ -2,18 +2,19 @@ import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.section`
-	position: fixed;
+	position: absolute;
+	left: 0;
 	top: 0;
 	right: 0;
 	bottom: 0;
-	overflow-y: auto;
 	background-color: #2f343d;
+
+	overflow-y: auto;
 	align-items: center;
 	-webkit-app-region: drag;
 	justify-content: center;
 
 	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
-	${ ({ isFull }) => css`left: ${ isFull ? '0' : '68px' };` }
 `;
 
 export const Content = styled.div`

src/components/AddServerView/styles.js

@@ -1,6 +1,6 @@
 import { remote } from 'electron';
 import i18n from 'i18next';
-import React, { useEffect, useState, Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { Provider, useDispatch } from 'react-redux';
 import { call, put, select, takeEvery } from 'redux-saga/effects';
@@ -17,20 +17,15 @@ import {
 	WEBVIEW_CERTIFICATE_TRUSTED,
 } from '../actions';
 import { MainWindow } from './MainWindow';
-import { AboutDialog } from './AboutDialog';
-import { ScreenSharingDialog } from './ScreenSharingDialog';
-import { UpdateDialog } from './UpdateDialog';
-import { SideBar } from './SideBar';
-import { ServersView } from './ServersView';
-import { AddServerView } from './AddServerView';
 import { TrayIcon } from './TrayIcon';
 import { MenuBar } from './MenuBar';
 import { Dock } from './Dock';
 import { TouchBar } from './TouchBar';
 import { createReduxStoreAndSagaMiddleware } from '../storeAndEffects';
 import { SagaMiddlewareProvider, useSaga } from './SagaMiddlewareProvider';
 import { validateServerUrl } from '../sagas/servers';
-import { SelectClientCertificateDialog } from './SelectClientCertificateDialog';
+import { Shell } from './Shell';
+import { ErrorCatcher } from './utils/ErrorCatcher';
 
 function AppContent() {
 	const { t } = useTranslation();
@@ -148,34 +143,13 @@ function AppContent() {
 
 	return <MainWindow>
 		<MenuBar />
-		<SideBar />
-		<ServersView />
-		<AddServerView />
-		<AboutDialog />
-		<ScreenSharingDialog />
-		<SelectClientCertificateDialog />
-		<UpdateDialog />
+		<Shell />
 		<Dock />
 		<TrayIcon />
 		<TouchBar />
 	</MainWindow>;
 }
 
-class ErrorCatcher extends Component {
-	componentDidCatch(error, errorInfo) {
-		console.error(error);
-		console.error(errorInfo.componentStack);
-		remote.dialog.showErrorBox(error.message, error.stack);
-		process.exit(1);
-	}
-
-	render() {
-		return <>
-			{this.props.children}
-		</>;
-	}
-}
-
 export function App() {
 	const [[store, sagaMiddleware]] = useState(() => createReduxStoreAndSagaMiddleware());