v1.5.112

Merge pull request #3362 from balena-io/112
112
2025-08-30 21:40:22 +00:00 · 2020-12-03 17:19:22 +02:00 · 2020-12-03 15:17:28 +00:00 · 2020-12-02 20:23:04 +01:00 · 2020-12-02 20:23:04 +01:00 · 2020-12-02 20:23:04 +01:00
35 changed files with 2637 additions and 1349 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,264 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).

+# v1.5.112
+## (2020-12-02)
+
+* Add rendition and sys-class-rgb-led to repo.yml [Alexis Svinartchouk]
+
+<details>
+<summary> Update sys-class-rgb-led from 2.1.0 to 2.1.1 [Alexis Svinartchouk] </summary>
+
+> ## sys-class-rgb-led-2.1.1
+> ### (2020-12-01)
+> 
+> * Replace resin-lint with @balena/lint [Alexis Svinartchouk]
+> * Update typescript to v4.1.2 [Alexis Svinartchouk]
+> * Add versionbot changelog [Alexis Svinartchouk]
+> 
+</details>
+
+* Fix layout when the featured project is not showing [Alexis Svinartchouk]
+* Improve flashing error handling [Alexis Svinartchouk]
+* Fix modal content height on Windows [Alexis Svinartchouk]
+
+<details>
+<summary> Update etcher-sdk from 5.1.5 to 5.1.10 [Alexis Svinartchouk] </summary>
+
+> ## etcher-sdk-5.1.10
+> ### (2020-12-02)
+> 
+> 
+> <details>
+> <summary> Update balena-image-fs from 7.0.5 to 7.0.6 [Alexis Svinartchouk] </summary>
+> 
+>> ### balena-image-fs-7.0.6
+>> #### (2020-12-02)
+>> 
+>> 
+>> <details>
+>> <summary> Update ext2fs from 3.0.4 to 3.0.5 [Alexis Svinartchouk] </summary>
+>> 
+>>> #### node-ext2fs-3.0.5
+>>> ##### (2020-12-02)
+>>> 
+>>> * Fix reading and discarding with offsets > 32 bits [Alexis Svinartchouk]
+>>> 
+>> </details>
+>> 
+>> 
+> </details>
+> 
+> 
+> ## etcher-sdk-5.1.9
+> ### (2020-12-01)
+> 
+> * Add repo.yml file [Alexis Svinartchouk]
+> * Update @balena/udif from 1.1.0 to 1.1.1 [Alexis Svinartchouk]
+> 
+> <details>
+> <summary> Update zip-part-stream from 1.0.2 to 1.0.3 [Alexis Svinartchouk] </summary>
+> 
+>> ### zip-part-stream-1.0.3
+>> #### (2020-11-30)
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update node-raspberrypi-usbboot from 0.2.9 to 0.2.10 [Alexis Svinartchouk] </summary>
+> 
+>> ### node-raspberrypi-usbboot-0.2.10
+>> #### (2020-11-30)
+>> 
+>> * Update typescript to v4.1.2 [Alexis Svinartchouk]
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update mountutils from 1.3.19 to 1.3.20 [Alexis Svinartchouk] </summary>
+> 
+>> ### mountutils-1.3.20
+>> #### (2020-11-30)
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update gzip-stream from 1.1.1 to 1.1.2 [Alexis Svinartchouk] </summary>
+> 
+>> ### gzip-stream-1.1.2
+>> #### (2020-11-30)
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update drivelist from 9.2.1 to 9.2.2 [Alexis Svinartchouk] </summary>
+> 
+>> ### drivelist-9.2.2
+>> #### (2020-11-30)
+>> 
+>> * Update typescript to v4.1.2 [Alexis Svinartchouk]
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update blockmap from 4.0.2 to 4.0.3 [Alexis Svinartchouk] </summary>
+> 
+>> ### blockmap-4.0.3
+>> #### (2020-11-30)
+>> 
+>> * Update typescript to v4.1.2 [Alexis Svinartchouk]
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update partitioninfo from 6.0.1 to 6.0.2 [Alexis Svinartchouk] </summary>
+> 
+>> ### partitioninfo-6.0.2
+>> #### (2020-11-27)
+>> 
+>> 
+>> <details>
+>> <summary> Update file-disk from 8.0.0 to 8.0.1 [Alexis Svinartchouk] </summary>
+>> 
+>>> #### file-disk-8.0.1
+>>> ##### (2020-11-26)
+>>> 
+>>> * Add versionbot changelog [Alexis Svinartchouk]
+>>> 
+>> </details>
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update file-disk from 8.0.0 to 8.0.1 [Alexis Svinartchouk] </summary>
+> 
+>> ### file-disk-8.0.1
+>> #### (2020-11-26)
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+>> ### file-disk-8.0.1
+>> #### (2020-11-26)
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> <details>
+> <summary> Update balena-image-fs from 7.0.4 to 7.0.5 [Alexis Svinartchouk] </summary>
+> 
+>> ### balena-image-fs-7.0.5
+>> #### (2020-11-27)
+>> 
+>> 
+>> <details>
+>> <summary> Update file-disk from 8.0.0 to 8.0.1 [Alexis Svinartchouk] </summary>
+>> 
+>>> #### file-disk-8.0.1
+>>> ##### (2020-11-26)
+>>> 
+>>> * Add versionbot changelog [Alexis Svinartchouk]
+>>> 
+>> </details>
+>> 
+>> 
+>> <details>
+>> <summary> Update ext2fs from 3.0.3 to 3.0.4 [Alexis Svinartchouk] </summary>
+>> 
+>>> #### node-ext2fs-3.0.4
+>>> ##### (2020-11-26)
+>>> 
+>>> * Add versionbot changelog [Alexis Svinartchouk]
+>>> 
+>> </details>
+>> 
+>> 
+>> <details>
+>> <summary> Update partitioninfo from 6.0.1 to 6.0.2 [Alexis Svinartchouk] </summary>
+>> 
+>>> #### partitioninfo-6.0.2
+>>> ##### (2020-11-27)
+>>> 
+>>> 
+>>> <details>
+>>> <summary> Update file-disk from 8.0.0 to 8.0.1 [Alexis Svinartchouk] </summary>
+>>> 
+>>>> ##### file-disk-8.0.1
+>>>> ###### (2020-11-26)
+>>>> 
+>>>> * Add versionbot changelog [Alexis Svinartchouk]
+>>>> 
+>>> </details>
+>>> 
+>>> * Add versionbot changelog [Alexis Svinartchouk]
+>>> 
+>> </details>
+>> 
+>> * Add versionbot changelog [Alexis Svinartchouk]
+>> 
+> </details>
+> 
+> 
+> ## etcher-sdk-5.1.8
+> ### (2020-11-26)
+> 
+> * Add versionbot changelog [Alexis Svinartchouk]
+> 
+> ## etcher-sdk-5.1.7
+> ### (2020-11-25)
+> 
+> * Don't start opening drives in advance to avoid unhandled rejections [Alexis Svinartchouk]
+> * Update generated docs [Alexis Svinartchouk]
+> 
+> ## etcher-sdk-5.1.6
+> ### (2020-11-24)
+> 
+> * Do not unmount source drives [Alexis Svinartchouk]
+> * Factorize retrying transient errors [Alexis Svinartchouk]
+> * Retry opening files & block devices on transient errors [Alexis Svinartchouk]
+> * Update generated docs [Alexis Svinartchouk]
+> 
+</details>
+
+* Set useContentSize to true so the size is the same on all platforms [Alexis Svinartchouk]
+
+# v1.5.111
+## (2020-11-23)
+
+* Warn when the source drive has no partition table [Alexis Svinartchouk]
+* Use a different icon when no source drive is available [Alexis Svinartchouk]
+* Allow selecting a locked SD card as the source drive [Alexis Svinartchouk]
+* Remove "Validate write on success" setting. Validation is always enabled, press the "skip" button to skip it. [Alexis Svinartchouk]
+* Update electron to v9.3.3 [Alexis Svinartchouk]
+* Update etcher-sdk to 5.1.1, use WASM ext2fs module [Alexis Svinartchouk]
+
+# v1.5.110
+## (2020-11-04)
+
+* Remove console.log in tests [Lorenzo Alberto Maria Ambrosi]
+* Fix URL not being selected with custom protocol [Lorenzo Alberto Maria Ambrosi]
+* Add skip function to validation [Lorenzo Alberto Maria Ambrosi]
+* Rework success screen [Lorenzo Alberto Maria Ambrosi]
+
 # v1.5.109
 ## (2020-09-14)

--- a/lib/gui/app/app.ts
+++ b/lib/gui/app/app.ts
@@ -23,17 +23,13 @@ import * as ReactDOM from 'react-dom';
 import { v4 as uuidV4 } from 'uuid';

 import * as packageJSON from '../../../package.json';
-import {
-	DrivelistDrive,
-	isDriveValid,
-	isSourceDrive,
-} from '../../shared/drive-constraints';
+import { DrivelistDrive, isSourceDrive } from '../../shared/drive-constraints';
 import * as EXIT_CODES from '../../shared/exit-codes';
 import * as messages from '../../shared/messages';
 import * as availableDrives from './models/available-drives';
 import * as flashState from './models/flash-state';
 import { init as ledsInit } from './models/leds';
-import { deselectImage, getImage, selectDrive } from './models/selection-state';
+import { deselectImage, getImage } from './models/selection-state';
 import * as settings from './models/settings';
 import { Actions, observe, store } from './models/store';
 import * as analytics from './modules/analytics';
@@ -251,14 +247,6 @@ async function addDrive(drive: Drive) {
 	const drives = getDrives();
 	drives[preparedDrive.device] = preparedDrive;
 	setDrives(drives);
-	if (
-		(await settings.get('autoSelectAllDrives')) &&
-		drive instanceof sdk.sourceDestination.BlockDevice &&
-		// @ts-ignore BlockDevice.drive is private
-		isDriveValid(drive.drive, getImage())
-	) {
-		selectDrive(drive.device);
-	}
 }

 function removeDrive(drive: Drive) {
@@ -356,6 +344,16 @@ async function main() {
 	ReactDOM.render(
 		React.createElement(MainPage),
 		document.getElementById('main'),
+		// callback to set the correct zoomFactor for webviews as well
+		async () => {
+			const fullscreen = await settings.get('fullscreen');
+			const width = fullscreen ? window.screen.width : window.outerWidth;
+			try {
+				electron.webFrame.setZoomFactor(width / settings.DEFAULT_WIDTH);
+			} catch (err) {
+				// noop
+			}
+		},
 	);
 }

--- a/lib/gui/app/components/drive-selector/drive-selector.tsx
+++ b/lib/gui/app/components/drive-selector/drive-selector.tsx
@@ -18,15 +18,7 @@ import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exc
 import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
 import * as sourceDestination from 'etcher-sdk/build/source-destination/';
 import * as React from 'react';
-import {
-	Flex,
-	ModalProps,
-	Txt,
-	Badge,
-	Link,
-	Table,
-	TableColumn,
-} from 'rendition';
+import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from 'rendition';
 import styled from 'styled-components';

 import {
@@ -43,9 +35,13 @@ import { getImage, isDriveSelected } from '../../models/selection-state';
 import { store } from '../../models/store';
 import { logEvent, logException } from '../../modules/analytics';
 import { open as openExternal } from '../../os/open-external/services/open-external';
-import { Alert, Modal, ScrollableFlex } from '../../styled-components';
+import {
+	Alert,
+	GenericTableProps,
+	Modal,
+	Table,
+} from '../../styled-components';

-import DriveSVGIcon from '../../../assets/tgt.svg';
 import { SourceMetadata } from '../source-selector/source-selector';

 interface UsbbootDrive extends sourceDestination.UsbbootDrive {
@@ -75,74 +71,29 @@ function isDrivelistDrive(drive: Drive): drive is DrivelistDrive {
 	return typeof (drive as DrivelistDrive).size === 'number';
 }

-const DrivesTable = styled(({ refFn, ...props }) => (
-	<div>
-		<Table<Drive> ref={refFn} {...props} />
-	</div>
+const DrivesTable = styled((props: GenericTableProps<Drive>) => (
+	<Table<Drive> {...props} />
 ))`
-	[data-display='table-head']
-		> [data-display='table-row']
-		> [data-display='table-cell'] {
-		position: sticky;
-		top: 0;
-		background-color: ${(props) => props.theme.colors.quartenary.light};
-
-		input[type='checkbox'] + div {
-			display: ${({ multipleSelection }) =>
-				multipleSelection ? 'flex' : 'none'};
-		}
-
-		&:first-child {
-			padding-left: 15px;
-		}
-
-		&:nth-child(2) {
-			width: 38%;
-		}
-
-		&:nth-child(3) {
-			width: 15%;
-		}
-
-		&:nth-child(4) {
-			width: 15%;
-		}
-
-		&:nth-child(5) {
-			width: 32%;
-		}
-	}
-
-	[data-display='table-body'] > [data-display='table-row'] {
-		> [data-display='table-cell']:first-child {
-			padding-left: 15px;
-		}
-
-		> [data-display='table-cell']:last-child {
-			padding-right: 0;
-		}
-
-		&[data-highlight='true'] {
-			&.system {
-				background-color: ${(props) =>
-					props.showWarnings ? '#fff5e6' : '#e8f5fc'};
+	[data-display='table-head'],
+	[data-display='table-body'] {
+		> [data-display='table-row'] > [data-display='table-cell'] {
+			&:nth-child(2) {
+				width: 32%;
 			}

-			> [data-display='table-cell']:first-child {
-				box-shadow: none;
+			&:nth-child(3) {
+				width: 15%;
+			}
+
+			&:nth-child(4) {
+				width: 15%;
+			}
+
+			&:nth-child(5) {
+				width: 32%;
 			}
 		}
 	}
-
-	&& [data-display='table-row'] > [data-display='table-cell'] {
-		padding: 6px 8px;
-		color: #2a506f;
-	}
-
-	input[type='checkbox'] + div {
-		border-radius: ${({ multipleSelection }) =>
-			multipleSelection ? '4px' : '50%'};
-	}
 `;

 function badgeShadeFromStatus(status: string) {
@@ -186,12 +137,14 @@ const InitProgress = styled(

 export interface DriveSelectorProps
 	extends Omit<ModalProps, 'done' | 'cancel'> {
+	write: boolean;
 	multipleSelection: boolean;
 	showWarnings?: boolean;
 	cancel: () => void;
 	done: (drives: DrivelistDrive[]) => void;
 	titleLabel: string;
 	emptyListLabel: string;
+	emptyListIcon: JSX.Element;
 	selectedList?: DrivelistDrive[];
 	updateSelectedList?: () => DrivelistDrive[];
 }
@@ -306,7 +259,8 @@ export class DriveSelector extends React.Component<
 		return (
 			isUsbbootDrive(drive) ||
 			isDriverlessDrive(drive) ||
-			!isDriveValid(drive, image)
+			!isDriveValid(drive, image) ||
+			(this.props.write && drive.isReadOnly)
 		);
 	}

@@ -359,6 +313,7 @@ export class DriveSelector extends React.Component<
 		const statuses: DriveStatus[] = getDriveImageCompatibilityStatuses(
 			drive,
 			this.state.image,
+			this.props.write,
 		).slice(0, 2);
 		return (
 			// the column render fn expects a single Element
@@ -393,6 +348,16 @@ export class DriveSelector extends React.Component<
 		}
 	}

+	private deselectingAll(rows: DrivelistDrive[]) {
+		return (
+			rows.length > 0 &&
+			rows.length === this.state.selectedList.length &&
+			this.state.selectedList.every(
+				(d) => rows.findIndex((r) => d.device === r.device) > -1,
+			)
+		);
+	}
+
 	componentDidMount() {
 		this.unsubscribe = store.subscribe(() => {
 			const drives = getDrives();
@@ -453,95 +418,92 @@ export class DriveSelector extends React.Component<
 				}}
 				{...props}
 			>
-				<Flex width="100%" height="90%">
-					{!hasAvailableDrives() ? (
-						<Flex
-							flexDirection="column"
-							justifyContent="center"
-							alignItems="center"
-							width="100%"
-						>
-							<DriveSVGIcon width="40px" height="90px" />
-							<b>{this.props.emptyListLabel}</b>
-						</Flex>
-					) : (
-						<ScrollableFlex flexDirection="column" width="100%">
-							<DrivesTable
-								refFn={(t: Table<Drive>) => {
-									if (t !== null) {
-										t.setRowSelection(selectedList);
-									}
-								}}
-								multipleSelection={this.props.multipleSelection}
-								columns={this.tableColumns}
-								data={displayedDrives}
-								disabledRows={disabledDrives}
-								getRowClass={(row: Drive) =>
-									isDrivelistDrive(row) && row.isSystem ? ['system'] : []
+				{!hasAvailableDrives() ? (
+					<Flex
+						flexDirection="column"
+						justifyContent="center"
+						alignItems="center"
+						width="100%"
+					>
+						{this.props.emptyListIcon}
+						<b>{this.props.emptyListLabel}</b>
+					</Flex>
+				) : (
+					<>
+						<DrivesTable
+							refFn={(t) => {
+								if (t !== null) {
+									t.setRowSelection(selectedList);
 								}
-								rowKey="displayName"
-								onCheck={(rows: Drive[]) => {
-									const newSelection = rows.filter(isDrivelistDrive);
-									if (this.props.multipleSelection) {
-										this.setState({
-											selectedList: newSelection,
-										});
-										return;
+							}}
+							checkedRowsNumber={selectedList.length}
+							multipleSelection={this.props.multipleSelection}
+							columns={this.tableColumns}
+							data={displayedDrives}
+							disabledRows={disabledDrives}
+							getRowClass={(row: Drive) =>
+								isDrivelistDrive(row) && row.isSystem ? ['system'] : []
+							}
+							rowKey="displayName"
+							onCheck={(rows: Drive[]) => {
+								let newSelection = rows.filter(isDrivelistDrive);
+								if (this.props.multipleSelection) {
+									if (this.deselectingAll(newSelection)) {
+										newSelection = [];
 									}
 									this.setState({
-										selectedList: newSelection.slice(newSelection.length - 1),
+										selectedList: newSelection,
 									});
-								}}
-								onRowClick={(row: Drive) => {
-									if (
-										!isDrivelistDrive(row) ||
-										this.driveShouldBeDisabled(row, image)
-									) {
-										return;
-									}
-									if (this.props.multipleSelection) {
-										const newList = [...selectedList];
-										const selectedIndex = selectedList.findIndex(
-											(drive) => drive.device === row.device,
-										);
-										if (selectedIndex === -1) {
-											newList.push(row);
-										} else {
-											// Deselect if selected
-											newList.splice(selectedIndex, 1);
-										}
-										this.setState({
-											selectedList: newList,
-										});
-										return;
-									}
-									this.setState({
-										selectedList: [row],
-									});
-								}}
-							/>
-							{numberOfHiddenSystemDrives > 0 && (
-								<Link
-									mt={15}
-									mb={15}
-									fontSize="14px"
-									onClick={() => this.setState({ showSystemDrives: true })}
-								>
-									<Flex alignItems="center">
-										<ChevronDownSvg height="1em" fill="currentColor" />
-										<Txt ml={8}>Show {numberOfHiddenSystemDrives} hidden</Txt>
-									</Flex>
-								</Link>
-							)}
-						</ScrollableFlex>
-					)}
-					{this.props.showWarnings && hasSystemDrives ? (
-						<Alert className="system-drive-alert" style={{ width: '67%' }}>
-							Selecting your system drive is dangerous and will erase your
-							drive!
-						</Alert>
-					) : null}
-				</Flex>
+									return;
+								}
+								this.setState({
+									selectedList: newSelection.slice(newSelection.length - 1),
+								});
+							}}
+							onRowClick={(row: Drive) => {
+								if (
+									!isDrivelistDrive(row) ||
+									this.driveShouldBeDisabled(row, image)
+								) {
+									return;
+								}
+								const index = selectedList.findIndex(
+									(d) => d.device === row.device,
+								);
+								const newList = this.props.multipleSelection
+									? [...selectedList]
+									: [];
+								if (index === -1) {
+									newList.push(row);
+								} else {
+									// Deselect if selected
+									newList.splice(index, 1);
+								}
+								this.setState({
+									selectedList: newList,
+								});
+							}}
+						/>
+						{numberOfHiddenSystemDrives > 0 && (
+							<Link
+								mt={15}
+								mb={15}
+								fontSize="14px"
+								onClick={() => this.setState({ showSystemDrives: true })}
+							>
+								<Flex alignItems="center">
+									<ChevronDownSvg height="1em" fill="currentColor" />
+									<Txt ml={8}>Show {numberOfHiddenSystemDrives} hidden</Txt>
+								</Flex>
+							</Link>
+						)}
+					</>
+				)}
+				{this.props.showWarnings && hasSystemDrives ? (
+					<Alert className="system-drive-alert" style={{ width: '67%' }}>
+						Selecting your system drive is dangerous and will erase your drive!
+					</Alert>
+				) : null}

 				{missingDriversModal.drive !== undefined && (
 					<Modal
--- a/lib/gui/app/components/finish/finish.tsx
+++ b/lib/gui/app/components/finish/finish.tsx
@@ -14,22 +14,18 @@
 * limitations under the License.
 */

-import * as _ from 'lodash';
 import * as React from 'react';
 import { Flex } from 'rendition';
 import { v4 as uuidV4 } from 'uuid';

 import * as flashState from '../../models/flash-state';
 import * as selectionState from '../../models/selection-state';
+import * as settings from '../../models/settings';
 import { Actions, store } from '../../models/store';
 import * as analytics from '../../modules/analytics';
-import { open as openExternal } from '../../os/open-external/services/open-external';
 import { FlashAnother } from '../flash-another/flash-another';
-import { FlashResults } from '../flash-results/flash-results';
-
-import EtcherSvg from '../../../assets/etcher.svg';
-import LoveSvg from '../../../assets/love.svg';
-import BalenaSvg from '../../../assets/balena.svg';
+import { FlashResults, FlashError } from '../flash-results/flash-results';
+import { SafeWebview } from '../safe-webview/safe-webview';

 function restart(goToMain: () => void) {
 	selectionState.deselectAllDrives();
@@ -44,22 +40,67 @@ function restart(goToMain: () => void) {
 	goToMain();
 }

-function formattedErrors() {
-	const errors = _.map(
-		_.get(flashState.getFlashResults(), ['results', 'errors']),
-		(error) => {
-			return `${error.device}: ${error.message || error.code}`;
-		},
+async function getSuccessBannerURL() {
+	return (
+		(await settings.get('successBannerURL')) ??
+		'https://www.balena.io/etcher/success-banner?borderTop=false&darkBackground=true'
 	);
-	return errors.join('\n');
 }

 function FinishPage({ goToMain }: { goToMain: () => void }) {
-	const results = flashState.getFlashResults().results || {};
+	const [webviewShowing, setWebviewShowing] = React.useState(false);
+	const [successBannerURL, setSuccessBannerURL] = React.useState('');
+	(async () => {
+		setSuccessBannerURL(await getSuccessBannerURL());
+	})();
+	const flashResults = flashState.getFlashResults();
+	const errors: FlashError[] = (
+		store.getState().toJS().failedDeviceErrors || []
+	).map(([, error]: [string, FlashError]) => ({
+		...error,
+	}));
+	const {
+		averageSpeed,
+		blockmappedSize,
+		bytesWritten,
+		failed,
+		size,
+	} = flashState.getFlashState();
+	const {
+		skip,
+		results = {
+			bytesWritten,
+			sourceMetadata: {
+				size,
+				blockmappedSize,
+			},
+			averageFlashingSpeed: averageSpeed,
+			devices: { failed, successful: 0 },
+		},
+	} = flashResults;
 	return (
-		<Flex flexDirection="column" width="100%" color="#fff">
-			<Flex height="160px" alignItems="center" justifyContent="center">
-				<FlashResults results={results} errors={formattedErrors()} />
+		<Flex height="100%" justifyContent="space-between">
+			<Flex
+				width={webviewShowing ? '36.2vw' : '100vw'}
+				height="100vh"
+				alignItems="center"
+				justifyContent="center"
+				flexDirection="column"
+				style={{
+					position: 'absolute',
+					top: 0,
+					zIndex: 1,
+					boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
+				}}
+			>
+				<FlashResults
+					image={selectionState.getImage()?.name}
+					results={results}
+					skip={skip}
+					errors={errors}
+					mb="32px"
+					goToMain={goToMain}
+				/>

 				<FlashAnother
 					onClick={() => {
@@ -67,34 +108,20 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 					}}
 				/>
 			</Flex>
-
-			<Flex
-				flexDirection="column"
-				height="320px"
-				justifyContent="space-between"
-				alignItems="center"
-			>
-				<Flex fontSize="28px" mt="40px">
-					Thanks for using
-					<EtcherSvg
-						width="165px"
-						style={{ margin: '0 10px', cursor: 'pointer' }}
-						onClick={() =>
-							openExternal('https://balena.io/etcher?ref=etcher_offline_banner')
-						}
-					/>
-				</Flex>
-				<Flex mb="10px">
-					made with
-					<LoveSvg height="20px" style={{ margin: '0 10px' }} />
-					by
-					<BalenaSvg
-						height="20px"
-						style={{ margin: '0 10px', cursor: 'pointer' }}
-						onClick={() => openExternal('https://balena.io?ref=etcher_success')}
-					/>
-				</Flex>
-			</Flex>
+			{successBannerURL.length && (
+				<SafeWebview
+					src={successBannerURL}
+					onWebviewShow={setWebviewShowing}
+					style={{
+						display: webviewShowing ? 'flex' : 'none',
+						position: 'absolute',
+						right: 0,
+						bottom: 0,
+						width: '63.8vw',
+						height: '100vh',
+					}}
+				/>
+			)}
 		</Flex>
 	);
 }
--- a/lib/gui/app/components/flash-another/flash-another.tsx
+++ b/lib/gui/app/components/flash-another/flash-another.tsx
@@ -25,7 +25,7 @@ export interface FlashAnotherProps {
 export const FlashAnother = (props: FlashAnotherProps) => {
 	return (
 		<BaseButton primary onClick={props.onClick}>
-			Flash Another
+			Flash another
 		</BaseButton>
 	);
 };
--- a/lib/gui/app/components/flash-results/flash-results.tsx
+++ b/lib/gui/app/components/flash-results/flash-results.tsx
@@ -16,19 +16,106 @@

 import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
 import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
+import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg';
 import * as _ from 'lodash';
 import outdent from 'outdent';
 import * as React from 'react';
-import { Flex, Txt } from 'rendition';
+import { Flex, FlexProps, Link, TableColumn, Txt } from 'rendition';
+import styled from 'styled-components';

 import { progress } from '../../../../shared/messages';
 import { bytesToMegabytes } from '../../../../shared/units';

+import FlashSvg from '../../../assets/flash.svg';
+import { getDrives } from '../../models/available-drives';
+import { resetState } from '../../models/flash-state';
+import * as selection from '../../models/selection-state';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+import { Modal, Table } from '../../styled-components';
+
+const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
+	&&& [data-display='table-head'],
+	&&& [data-display='table-body'] {
+		> [data-display='table-row'] {
+			> [data-display='table-cell'] {
+				&:first-child {
+					width: 30%;
+				}
+
+				&:nth-child(2) {
+					width: 20%;
+				}
+
+				&:last-child {
+					width: 50%;
+				}
+			}
+		}
+	}
+`;
+const DoneIcon = (props: {
+	skipped: boolean;
+	color: string;
+	allFailed: boolean;
+}) => {
+	const svgProps = {
+		width: '28px',
+		fill: props.color,
+		style: {
+			marginTop: '-25px',
+			marginLeft: '13px',
+			zIndex: 1,
+		},
+	};
+	return props.allFailed && !props.skipped ? (
+		<TimesCircleSvg {...svgProps} />
+	) : (
+		<CheckCircleSvg {...svgProps} />
+	);
+};
+
+export interface FlashError extends Error {
+	description: string;
+	device: string;
+	code: string;
+}
+
+function formattedErrors(errors: FlashError[]) {
+	return errors
+		.map((error) => `${error.device}: ${error.message || error.code}`)
+		.join('\n');
+}
+
+const columns: Array<TableColumn<FlashError>> = [
+	{
+		field: 'description',
+		label: 'Target',
+	},
+	{
+		field: 'device',
+		label: 'Location',
+	},
+	{
+		field: 'message',
+		label: 'Error',
+		render: (message: string, { code }: FlashError) => {
+			return message ?? code;
+		},
+	},
+];
+
 export function FlashResults({
+	goToMain,
+	image = '',
 	errors,
 	results,
+	skip,
+	...props
 }: {
-	errors: string;
+	goToMain: () => void;
+	image?: string;
+	errors: FlashError[];
+	skip: boolean;
 	results: {
 		bytesWritten: number;
 		sourceMetadata: {
@@ -38,54 +125,67 @@ export function FlashResults({
 		averageFlashingSpeed: number;
 		devices: { failed: number; successful: number };
 	};
-}) {
-	const allDevicesFailed = results.devices.successful === 0;
+} & FlexProps) {
+	const [showErrorsInfo, setShowErrorsInfo] = React.useState(false);
+	const allFailed = !skip && results.devices.successful === 0;
+	const someFailed = results.devices.failed !== 0 || errors.length !== 0;
 	const effectiveSpeed = _.round(
 		bytesToMegabytes(
 			results.sourceMetadata.size /
-				(results.bytesWritten / results.averageFlashingSpeed),
+				(results.sourceMetadata.blockmappedSize / results.averageFlashingSpeed),
 		),
 		1,
 	);
 	return (
-		<Flex
-			flexDirection="column"
-			mr="80px"
-			height="90px"
-			style={{
-				position: 'relative',
-				top: '25px',
-			}}
-		>
-			<Flex alignItems="center">
-				<CheckCircleSvg
-					width="24px"
-					fill={allDevicesFailed ? '#c6c8c9' : '#1ac135'}
-					style={{
-						margin: '0 15px 0 0',
-					}}
-				/>
-				<Txt fontSize={24} color="#fff">
-					Flash Complete!
+		<Flex flexDirection="column" {...props}>
+			<Flex alignItems="center" flexDirection="column">
+				<Flex
+					alignItems="center"
+					mt="50px"
+					mb="32px"
+					color="#7e8085"
+					flexDirection="column"
+				>
+					<FlashSvg width="40px" height="40px" className="disabled" />
+					<DoneIcon
+						skipped={skip}
+						allFailed={allFailed}
+						color={allFailed || someFailed ? '#c6c8c9' : '#1ac135'}
+					/>
+					<Txt>{middleEllipsis(image, 24)}</Txt>
+				</Flex>
+				<Txt fontSize={24} color="#fff" mb="17px">
+					Flash {allFailed ? 'Failed' : 'Complete'}!
 				</Txt>
+				{skip ? <Txt color="#7e8085">Validation has been skipped</Txt> : null}
 			</Flex>
-			<Flex flexDirection="column" mr="0" mb="0" ml="40px" color="#7e8085">
-				{Object.entries(results.devices).map(([type, quantity]) => {
-					return quantity ? (
-						<Flex
-							alignItems="center"
-							tooltip={type === 'failed' ? errors : undefined}
-						>
-							<CircleSvg
-								width="14px"
-								fill={type === 'failed' ? '#ff4444' : '#1ac135'}
-							/>
-							<Txt ml={10}>{quantity}</Txt>
-							<Txt ml={10}>{progress[type](quantity)}</Txt>
-						</Flex>
-					) : null;
-				})}
-				{!allDevicesFailed && (
+			<Flex flexDirection="column" color="#7e8085">
+				{results.devices.successful !== 0 ? (
+					<Flex alignItems="center">
+						<CircleSvg width="14px" fill="#1ac135" />
+						<Txt ml="10px" color="#fff">
+							{results.devices.successful}
+						</Txt>
+						<Txt ml="10px">
+							{progress.successful(results.devices.successful)}
+						</Txt>
+					</Flex>
+				) : null}
+				{errors.length !== 0 ? (
+					<Flex alignItems="center">
+						<CircleSvg width="14px" fill="#ff4444" />
+						<Txt ml="10px" color="#fff">
+							{errors.length}
+						</Txt>
+						<Txt ml="10px" tooltip={formattedErrors(errors)}>
+							{progress.failed(errors.length)}
+						</Txt>
+						<Link ml="10px" onClick={() => setShowErrorsInfo(true)}>
+							more info
+						</Link>
+					</Flex>
+				) : null}
+				{!allFailed && (
 					<Txt
 						fontSize="10px"
 						style={{
@@ -101,6 +201,36 @@ export function FlashResults({
 					</Txt>
 				)}
 			</Flex>
+
+			{showErrorsInfo && (
+				<Modal
+					titleElement={
+						<Flex alignItems="baseline" mb={18}>
+							<Txt fontSize={24} align="left">
+								Failed targets
+							</Txt>
+						</Flex>
+					}
+					action="Retry failed targets"
+					cancel={() => setShowErrorsInfo(false)}
+					done={() => {
+						setShowErrorsInfo(false);
+						resetState();
+						getDrives()
+							.map((drive) => {
+								selection.deselectDrive(drive.device);
+								return drive.device;
+							})
+							.filter((driveDevice) =>
+								errors.some((error) => error.device === driveDevice),
+							)
+							.forEach((driveDevice) => selection.selectDrive(driveDevice));
+						goToMain();
+					}}
+				>
+					<ErrorsTable columns={columns} data={errors} />
+				</Modal>
+			)}
 		</Flex>
 	);
 }
--- a/lib/gui/app/components/progress-button/progress-button.tsx
+++ b/lib/gui/app/components/progress-button/progress-button.tsx
@@ -23,7 +23,7 @@ import { StepButton } from '../../styled-components';

 const FlashProgressBar = styled(ProgressBar)`
 	> div {
-		width: 220px;
+		width: 100%;
 		height: 12px;
 		color: white !important;
 		text-shadow: none !important;
@@ -33,7 +33,7 @@ const FlashProgressBar = styled(ProgressBar)`
 		}
 	}

-	width: 220px;
+	width: 100%;
 	height: 12px;
 	margin-bottom: 6px;
 	border-radius: 14px;
@@ -49,7 +49,7 @@ interface ProgressButtonProps {
 	percentage: number;
 	position: number;
 	disabled: boolean;
-	cancel: () => void;
+	cancel: (type: string) => void;
 	callback: () => void;
 	warning?: boolean;
 }
@@ -60,11 +60,14 @@ const colors = {
 	verifying: '#1ac135',
 } as const;

-const CancelButton = styled((props) => (
-	<Button plain {...props}>
-		Cancel
-	</Button>
-))`
+const CancelButton = styled(({ type, onClick, ...props }) => {
+	const status = type === 'verifying' ? 'Skip' : 'Cancel';
+	return (
+		<Button plain onClick={() => onClick(status)} {...props}>
+			{status}
+		</Button>
+	);
+})`
 	font-weight: 600;
 	&&& {
 		width: auto;
@@ -75,11 +78,14 @@ const CancelButton = styled((props) => (

 export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
 	public render() {
+		const percentage = this.props.percentage;
+		const warning = this.props.warning;
 		const { status, position } = fromFlashState({
 			type: this.props.type,
+			percentage,
 			position: this.props.position,
-			percentage: this.props.percentage,
 		});
+		const type = this.props.type || 'default';
 		if (this.props.active) {
 			return (
 				<>
@@ -96,21 +102,24 @@ export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
 					>
 						<Flex>
 							<Txt color="#fff">{status}&nbsp;</Txt>
-							<Txt color={colors[this.props.type]}>{position}</Txt>
+							<Txt color={colors[type]}>{position}</Txt>
 						</Flex>
-						<CancelButton onClick={this.props.cancel} color="#00aeef" />
+						{type && (
+							<CancelButton
+								type={type}
+								onClick={this.props.cancel}
+								color="#00aeef"
+							/>
+						)}
 					</Flex>
-					<FlashProgressBar
-						background={colors[this.props.type]}
-						value={this.props.percentage}
-					/>
+					<FlashProgressBar background={colors[type]} value={percentage} />
 				</>
 			);
 		}
 		return (
 			<StepButton
-				primary={!this.props.warning}
-				warning={this.props.warning}
+				primary={!warning}
+				warning={warning}
 				onClick={this.props.callback}
 				disabled={this.props.disabled}
 				style={{
--- a/lib/gui/app/components/settings/settings.tsx
+++ b/lib/gui/app/components/settings/settings.tsx
@@ -54,14 +54,10 @@ async function getSettingsList(): Promise<Setting[]> {
 			 */
 			label: `${platform === 'win32' ? 'Eject' : 'Auto-unmount'} on success`,
 		},
-		{
-			name: 'validateWriteOnSuccess',
-			label: 'Validate write on success',
-		},
 		{
 			name: 'updatesEnabled',
 			label: 'Auto-updates enabled',
-			hide: _.includes(['rpm', 'deb'], packageType),
+			hide: ['rpm', 'deb'].includes(packageType),
 		},
 	];
 }
@@ -121,9 +117,9 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 			done={() => toggleModal(false)}
 		>
 			<Flex flexDirection="column">
-				{_.map(settingsList, (setting: Setting, i: number) => {
+				{settingsList.map((setting: Setting, i: number) => {
 					return setting.hide ? null : (
-						<Flex key={setting.name}>
+						<Flex key={setting.name} mb={14}>
 							<Checkbox
 								toggle
 								tabIndex={6 + i}
@@ -135,12 +131,13 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 					);
 				})}
 				<Flex
-					mt={28}
+					mt={18}
 					alignItems="center"
 					color="#00aeef"
 					style={{
 						width: 'fit-content',
 						cursor: 'pointer',
+						fontSize: 14,
 					}}
 					onClick={() =>
 						openExternal(
--- a/lib/gui/app/components/source-selector/source-selector.tsx
+++ b/lib/gui/app/components/source-selector/source-selector.tsx
@@ -58,6 +58,7 @@ import { middleEllipsis } from '../../utils/middle-ellipsis';
 import { SVGIcon } from '../svg-icon/svg-icon';

 import ImageSvg from '../../../assets/image.svg';
+import SrcSvg from '../../../assets/src.svg';
 import { DriveSelector } from '../drive-selector/drive-selector';
 import { DrivelistDrive } from '../../../../shared/drive-constraints';

@@ -116,10 +117,11 @@ const ModalText = styled.p`
 `;

 function getState() {
+	const image = selectionState.getImage();
 	return {
 		hasImage: selectionState.hasImage(),
-		imageName: selectionState.getImageName(),
-		imageSize: selectionState.getImageSize(),
+		imageName: image?.name,
+		imageSize: image?.size,
 	};
 }

@@ -213,22 +215,28 @@ interface Flow {
 }

 const FlowSelector = styled(
-	({ flow, ...props }: { flow: Flow; props?: ButtonProps }) => {
-		return (
-			<StepButton
-				plain
-				onClick={(evt) => flow.onClick(evt)}
-				icon={flow.icon}
-				{...props}
-			>
-				{flow.label}
-			</StepButton>
-		);
-	},
+	({ flow, ...props }: { flow: Flow } & ButtonProps) => (
+		<StepButton
+			plain={!props.primary}
+			primary={props.primary}
+			onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
+				flow.onClick(evt)
+			}
+			icon={flow.icon}
+			{...props}
+		>
+			{flow.label}
+		</StepButton>
+	),
 )`
 	border-radius: 24px;
 	color: rgba(255, 255, 255, 0.7);

+	:enabled:focus,
+	:enabled:focus svg {
+		color: ${colors.primary.foreground} !important;
+	}
+
 	:enabled:hover {
 		background-color: ${colors.primary.background};
 		color: ${colors.primary.foreground};
@@ -269,6 +277,8 @@ interface SourceSelectorState {
 	showImageDetails: boolean;
 	showURLSelector: boolean;
 	showDriveSelector: boolean;
+	defaultFlowActive: boolean;
+	imageSelectorOpen: boolean;
 }

 export class SourceSelector extends React.Component<
@@ -285,7 +295,12 @@ export class SourceSelector extends React.Component<
 			showImageDetails: false,
 			showURLSelector: false,
 			showDriveSelector: false,
+			defaultFlowActive: true,
+			imageSelectorOpen: false,
 		};
+
+		// Bind `this` since it's used in an event's callback
+		this.onSelectImage = this.onSelectImage.bind(this);
 	}

 	public componentDidMount() {
@@ -404,6 +419,15 @@ export class SourceSelector extends React.Component<
 						}
 					}
 				} else {
+					if (selected.partitionTableType === null) {
+						analytics.logEvent('Missing partition table', { selected });
+						this.setState({
+							warning: {
+								message: messages.warning.driveMissingPartitionTable(),
+								title: 'Missing partition table',
+							},
+						});
+					}
 					metadata = {
 						path: selected.device,
 						displayName: selected.displayName,
@@ -469,6 +493,7 @@ export class SourceSelector extends React.Component<

 	private async openImageSelector() {
 		analytics.logEvent('Open image selector');
+		this.setState({ imageSelectorOpen: true });

 		try {
 			const imagePath = await osDialog.selectImage();
@@ -481,6 +506,8 @@ export class SourceSelector extends React.Component<
 			await this.selectSource(imagePath, sourceDestination.File).promise;
 		} catch (error) {
 			exceptionReporter.report(error);
+		} finally {
+			this.setState({ imageSelectorOpen: false });
 		}
 	}

@@ -519,7 +546,7 @@ export class SourceSelector extends React.Component<

 	private showSelectedImageDetails() {
 		analytics.logEvent('Show selected image tooltip', {
-			imagePath: selectionState.getImagePath(),
+			imagePath: selectionState.getImage()?.path,
 		});

 		this.setState({
@@ -527,6 +554,10 @@ export class SourceSelector extends React.Component<
 		});
 	}

+	private setDefaultFlowActive(defaultFlowActive: boolean) {
+		this.setState({ defaultFlowActive });
+	}
+
 	// TODO add a visual change when dragging a file over the selector
 	public render() {
 		const { flashing } = this.props;
@@ -593,12 +624,16 @@ export class SourceSelector extends React.Component<
 					) : (
 						<>
 							<FlowSelector
+								disabled={this.state.imageSelectorOpen}
+								primary={this.state.defaultFlowActive}
 								key="Flash from file"
 								flow={{
 									onClick: () => this.openImageSelector(),
 									label: 'Flash from file',
 									icon: <FileSvg height="1em" fill="currentColor" />,
 								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
 							/>
 							<FlowSelector
 								key="Flash from URL"
@@ -607,6 +642,8 @@ export class SourceSelector extends React.Component<
 									label: 'Flash from URL',
 									icon: <LinkSvg height="1em" fill="currentColor" />,
 								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
 							/>
 							<FlowSelector
 								key="Clone drive"
@@ -615,6 +652,8 @@ export class SourceSelector extends React.Component<
 									label: 'Clone drive',
 									icon: <CopySvg height="1em" fill="currentColor" />,
 								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
 							/>
 						</>
 					)}
@@ -692,9 +731,11 @@ export class SourceSelector extends React.Component<

 				{showDriveSelector && (
 					<DriveSelector
+						write={false}
 						multipleSelection={false}
 						titleLabel="Select source"
-						emptyListLabel="Plug a source"
+						emptyListLabel="Plug a source drive"
+						emptyListIcon={<SrcSvg width="40px" />}
 						cancel={() => {
 							this.setState({
 								showDriveSelector: false,
--- a/lib/gui/app/components/target-selector/target-selector-button.tsx
+++ b/lib/gui/app/components/target-selector/target-selector-button.tsx
@@ -24,7 +24,7 @@ import {
 } from '../../../../shared/drive-constraints';
 import { compatibility, warning } from '../../../../shared/messages';
 import * as prettyBytes from 'pretty-bytes';
-import { getSelectedDrives } from '../../models/selection-state';
+import { getImage, getSelectedDrives } from '../../models/selection-state';
 import {
 	ChangeButton,
 	DetailsText,
@@ -80,9 +80,11 @@ export function TargetSelectorButton(props: TargetSelectorProps) {

 	if (targets.length === 1) {
 		const target = targets[0];
-		const warnings = getDriveImageCompatibilityStatuses(target).map(
-			getDriveWarning,
-		);
+		const warnings = getDriveImageCompatibilityStatuses(
+			target,
+			getImage(),
+			true,
+		).map(getDriveWarning);
 		return (
 			<>
 				<StepNameButton plain tooltip={props.tooltip}>
@@ -106,9 +108,11 @@ export function TargetSelectorButton(props: TargetSelectorProps) {
 	if (targets.length > 1) {
 		const targetsTemplate = [];
 		for (const target of targets) {
-			const warnings = getDriveImageCompatibilityStatuses(target).map(
-				getDriveWarning,
-			);
+			const warnings = getDriveImageCompatibilityStatuses(
+				target,
+				getImage(),
+				true,
+			).map(getDriveWarning);
 			targetsTemplate.push(
 				<DetailsText
 					key={target.device}
--- a/lib/gui/app/components/target-selector/target-selector.tsx
+++ b/lib/gui/app/components/target-selector/target-selector.tsx
@@ -29,11 +29,11 @@ import {
 	deselectDrive,
 	selectDrive,
 } from '../../models/selection-state';
-import * as settings from '../../models/settings';
 import { observe } from '../../models/store';
 import * as analytics from '../../modules/analytics';
 import { TargetSelectorButton } from './target-selector-button';

+import TgtSvg from '../../../assets/tgt.svg';
 import DriveSvg from '../../../assets/drive.svg';
 import { warning } from '../../../../shared/messages';

@@ -45,12 +45,7 @@ export const getDriveListLabel = () => {
 		.join('\n');
 };

-const shouldShowDrivesButton = () => {
-	return !settings.getSync('disableExplicitDriveSelection');
-};
-
 const getDriveSelectionStateSlice = () => ({
-	showDrivesButton: shouldShowDrivesButton(),
 	driveListLabel: getDriveListLabel(),
 	targets: getSelectedDrives(),
 	image: getImage(),
@@ -59,13 +54,14 @@ const getDriveSelectionStateSlice = () => ({
 export const TargetSelectorModal = (
 	props: Omit<
 		DriveSelectorProps,
-		'titleLabel' | 'emptyListLabel' | 'multipleSelection'
+		'titleLabel' | 'emptyListLabel' | 'multipleSelection' | 'emptyListIcon'
 	>,
 ) => (
 	<DriveSelector
 		multipleSelection={true}
 		titleLabel="Select target"
 		emptyListLabel="Plug a target drive"
+		emptyListIcon={<TgtSvg width="40px" />}
 		showWarnings={true}
 		selectedList={getSelectedDrives()}
 		updateSelectedList={getSelectedDrives}
@@ -114,10 +110,9 @@ export const TargetSelector = ({
 	flashing,
 }: TargetSelectorProps) => {
 	// TODO: inject these from redux-connector
-	const [
-		{ showDrivesButton, driveListLabel, targets },
-		setStateSlice,
-	] = React.useState(getDriveSelectionStateSlice());
+	const [{ driveListLabel, targets }, setStateSlice] = React.useState(
+		getDriveSelectionStateSlice(),
+	);
 	const [showTargetSelectorModal, setShowTargetSelectorModal] = React.useState(
 		false,
 	);
@@ -141,7 +136,7 @@ export const TargetSelector = ({

 			<TargetSelectorButton
 				disabled={disabled}
-				show={!hasDrive && showDrivesButton}
+				show={!hasDrive}
 				tooltip={driveListLabel}
 				openDriveSelector={() => {
 					setShowTargetSelectorModal(true);
@@ -168,6 +163,7 @@ export const TargetSelector = ({

 			{showTargetSelectorModal && (
 				<TargetSelectorModal
+					write={true}
 					cancel={() => setShowTargetSelectorModal(false)}
 					done={(modalTargets) => {
 						selectAllTargets(modalTargets);
--- a/lib/gui/app/models/flash-state.ts
+++ b/lib/gui/app/models/flash-state.ts
@@ -75,14 +75,25 @@ export function setDevicePaths(devicePaths: string[]) {
 	});
 }

-export function addFailedDevicePath(devicePath: string) {
-	const failedDevicePathsSet = new Set(
-		store.getState().toJS().failedDevicePaths,
+export function addFailedDeviceError({
+	device,
+	error,
+}: {
+	device: sdk.scanner.adapters.DrivelistDrive;
+	error: Error;
+}) {
+	const failedDeviceErrorsMap = new Map(
+		store.getState().toJS().failedDeviceErrors,
 	);
-	failedDevicePathsSet.add(devicePath);
+	failedDeviceErrorsMap.set(device.device, {
+		description: device.description,
+		device: device.device,
+		devicePath: device.devicePath,
+		...error,
+	});
 	store.dispatch({
-		type: Actions.SET_FAILED_DEVICE_PATHS,
-		data: Array.from(failedDevicePathsSet),
+		type: Actions.SET_FAILED_DEVICE_ERRORS,
+		data: Array.from(failedDeviceErrorsMap),
 	});
 }

--- a/lib/gui/app/models/leds.ts
+++ b/lib/gui/app/models/leds.ts
@@ -188,12 +188,15 @@ function stateObserver(state: typeof DEFAULT_STATE) {
 	} else {
 		selectedDrivesPaths = s.devicePaths;
 	}
+	const failedDevicePaths = s.failedDeviceErrors.map(
+		([devicePath]: [string]) => devicePath,
+	);
 	const newLedsState = {
 		step,
 		sourceDrive: sourceDrivePath,
 		availableDrives: availableDrivesPaths,
 		selectedDrives: selectedDrivesPaths,
-		failedDrives: s.failedDevicePaths,
+		failedDrives: failedDevicePaths,
 	};
 	if (!_.isEqual(newLedsState, ledsState)) {
 		updateLeds(newLedsState);
--- a/lib/gui/app/models/selection-state.ts
+++ b/lib/gui/app/models/selection-state.ts
@@ -72,26 +72,6 @@ export function getImage(): SourceMetadata | undefined {
 	return store.getState().toJS().selection.image;
 }

-export function getImagePath() {
-	return getImage()?.path;
-}
-
-export function getImageSize() {
-	return getImage()?.size;
-}
-
-export function getImageName() {
-	return getImage()?.name;
-}
-
-export function getImageLogo() {
-	return getImage()?.logo;
-}
-
-export function getImageSupportUrl() {
-	return getImage()?.supportUrl;
-}
-
 /**
 * @summary Check if there is a selected drive
 */
--- a/lib/gui/app/models/settings.ts
+++ b/lib/gui/app/models/settings.ts
@@ -26,6 +26,9 @@ const debug = _debug('etcher:models:settings');

 const JSON_INDENT = 2;

+export const DEFAULT_WIDTH = 800;
+export const DEFAULT_HEIGHT = 480;
+
 /**
 * @summary Userdata directory path
 * @description
@@ -35,12 +38,12 @@ const JSON_INDENT = 2;
 * - `~/Library/Application Support/etcher` on macOS
 * See https://electronjs.org/docs/api/app#appgetpathname
 *
- * NOTE: The ternary is due to this module being loaded both,
- * Electron's main process and renderer process
+ * NOTE: We use the remote property when this module
+ * is loaded in the Electron's renderer process
 */
-const USER_DATA_DIR = electron.app
-	? electron.app.getPath('userData')
-	: electron.remote.app.getPath('userData');
+const app = electron.app || electron.remote.app;
+
+const USER_DATA_DIR = app.getPath('userData');

 const CONFIG_PATH = join(USER_DATA_DIR, 'config.json');

@@ -75,7 +78,6 @@ export async function writeConfigFile(
 const DEFAULT_SETTINGS: _.Dictionary<any> = {
 	errorReporting: true,
 	unmountOnSuccess: true,
-	validateWriteOnSuccess: true,
 	updatesEnabled: !_.includes(['rpm', 'deb'], packageJSON.packageType),
 	desktopNotifications: true,
 	autoBlockmapping: true,
--- a/lib/gui/app/models/store.ts
+++ b/lib/gui/app/models/store.ts
@@ -16,6 +16,7 @@

 import * as Immutable from 'immutable';
 import * as _ from 'lodash';
+import { basename } from 'path';
 import * as redux from 'redux';
 import { v4 as uuidV4 } from 'uuid';

@@ -62,7 +63,7 @@ export const DEFAULT_STATE = Immutable.fromJS({
 	},
 	isFlashing: false,
 	devicePaths: [],
-	failedDevicePaths: [],
+	failedDeviceErrors: [],
 	flashResults: {},
 	flashState: {
 		active: 0,
@@ -79,7 +80,7 @@ export const DEFAULT_STATE = Immutable.fromJS({
 */
 export enum Actions {
 	SET_DEVICE_PATHS,
-	SET_FAILED_DEVICE_PATHS,
+	SET_FAILED_DEVICE_ERRORS,
 	SET_AVAILABLE_TARGETS,
 	SET_FLASH_STATE,
 	RESET_FLASH_STATE,
@@ -133,11 +134,16 @@ function storeReducer(
 				});
 			}

+			// Drives order is a list of devicePaths
+			const drivesOrder = settings.getSync('drivesOrder') ?? [];
+
 			drives = _.sortBy(drives, [
 				// System drives last
 				(d) => !!d.isSystem,
 				// Devices with no devicePath first (usbboot)
 				(d) => !!d.devicePath,
+				// Sort as defined in the drivesOrder setting if there is one (only for Linux with udev)
+				(d) => drivesOrder.indexOf(basename(d.devicePath || '')),
 				// Then sort by devicePath (only available on Linux with udev) or device
 				(d) => d.devicePath || d.device,
 			]);
@@ -169,7 +175,7 @@ function storeReducer(
 			);

 			const shouldAutoselectAll = Boolean(
-				settings.getSync('disableExplicitDriveSelection'),
+				settings.getSync('autoSelectAllDrives'),
 			);
 			const AUTOSELECT_DRIVE_COUNT = 1;
 			const nonStaleSelectedDevices = nonStaleNewState
@@ -191,18 +197,13 @@ function storeReducer(
 					drives,
 					(accState, drive) => {
 						if (
-							_.every([
-								constraints.isDriveValid(drive, image),
-								constraints.isDriveSizeRecommended(drive, image),
-
-								// We don't want to auto-select large drives
-								!constraints.isDriveSizeLarge(drive),
-
-								// We don't want to auto-select system drives,
-								// even when "unsafe mode" is enabled
-								!constraints.isSystemDrive(drive),
-							]) ||
-							(shouldAutoselectAll && constraints.isDriveValid(drive, image))
+							constraints.isDriveValid(drive, image) &&
+							!drive.isReadOnly &&
+							constraints.isDriveSizeRecommended(drive, image) &&
+							// We don't want to auto-select large drives execpt is autoSelectAllDrives is true
+							(!constraints.isDriveSizeLarge(drive) || shouldAutoselectAll) &&
+							// We don't want to auto-select system drives
+							!constraints.isSystemDrive(drive)
 						) {
 							// Auto-select this drive
 							return storeReducer(accState, {
@@ -269,7 +270,7 @@ function storeReducer(
 				.set('flashState', DEFAULT_STATE.get('flashState'))
 				.set('flashResults', DEFAULT_STATE.get('flashResults'))
 				.set('devicePaths', DEFAULT_STATE.get('devicePaths'))
-				.set('failedDevicePaths', DEFAULT_STATE.get('failedDevicePaths'))
+				.set('failedDeviceErrors', DEFAULT_STATE.get('failedDeviceErrors'))
 				.set(
 					'lastAverageFlashingSpeed',
 					DEFAULT_STATE.get('lastAverageFlashingSpeed'),
@@ -295,6 +296,7 @@ function storeReducer(

 			_.defaults(action.data, {
 				cancelled: false,
+				skip: false,
 			});

 			if (!_.isBoolean(action.data.cancelled)) {
@@ -335,6 +337,12 @@ function storeReducer(
 				);
 			}

+			if (action.data.skip) {
+				return state
+					.set('isFlashing', false)
+					.set('flashResults', Immutable.fromJS(action.data));
+			}
+
 			return state
 				.set('isFlashing', false)
 				.set('flashResults', Immutable.fromJS(action.data))
@@ -509,8 +517,8 @@ function storeReducer(
 			return state.set('devicePaths', action.data);
 		}

-		case Actions.SET_FAILED_DEVICE_PATHS: {
-			return state.set('failedDevicePaths', action.data);
+		case Actions.SET_FAILED_DEVICE_ERRORS: {
+			return state.set('failedDeviceErrors', action.data);
 		}

 		default: {
--- a/lib/gui/app/modules/image-writer.ts
+++ b/lib/gui/app/modules/image-writer.ts
@@ -17,7 +17,7 @@
 import { Drive as DrivelistDrive } from 'drivelist';
 import * as electron from 'electron';
 import * as sdk from 'etcher-sdk';
-import * as _ from 'lodash';
+import { Dictionary } from 'lodash';
 import * as ipc from 'node-ipc';
 import * as os from 'os';
 import * as path from 'path';
@@ -131,7 +131,16 @@ function writerEnv() {
 }

 interface FlashResults {
+	skip?: boolean;
 	cancelled?: boolean;
+	results?: {
+		bytesWritten: number;
+		devices: {
+			failed: number;
+			successful: number;
+		};
+		errors: Error[];
+	};
 }

 async function performWrite(
@@ -140,10 +149,10 @@ async function performWrite(
 	onProgress: sdk.multiWrite.OnProgressFunction,
 ): Promise<{ cancelled?: boolean }> {
 	let cancelled = false;
+	let skip = false;
 	ipc.serve();
 	const {
 		unmountOnSuccess,
-		validateWriteOnSuccess,
 		autoBlockmapping,
 		decompressFirst,
 	} = await settings.getAll();
@@ -166,21 +175,22 @@ async function performWrite(
 			uuid: flashState.getFlashUuid(),
 			flashInstanceUuid: flashState.getFlashUuid(),
 			unmountOnSuccess,
-			validateWriteOnSuccess,
 		};

 		ipc.server.on('fail', ({ device, error }) => {
 			if (device.devicePath) {
-				flashState.addFailedDevicePath(device.devicePath);
+				flashState.addFailedDeviceError({ device, error });
 			}
 			handleErrorLogging(error, analyticsData);
 		});

 		ipc.server.on('done', (event) => {
-			event.results.errors = _.map(event.results.errors, (data) => {
-				return errors.fromJSON(data);
-			});
-			_.merge(flashResults, event);
+			event.results.errors = event.results.errors.map(
+				(data: Dictionary<any> & { message: string }) => {
+					return errors.fromJSON(data);
+				},
+			);
+			flashResults.results = event.results;
 		});

 		ipc.server.on('abort', () => {
@@ -188,6 +198,11 @@ async function performWrite(
 			cancelled = true;
 		});

+		ipc.server.on('skip', () => {
+			terminateServer();
+			skip = true;
+		});
+
 		ipc.server.on('state', onProgress);

 		ipc.server.on('ready', (_data, socket) => {
@@ -195,7 +210,6 @@ async function performWrite(
 				image,
 				destinations: drives,
 				SourceType: image.SourceType.name,
-				validateWriteOnSuccess,
 				autoBlockmapping,
 				unmountOnSuccess,
 				decompressFirst,
@@ -205,7 +219,7 @@ async function performWrite(
 		const argv = writerArgv();

 		ipc.server.on('start', async () => {
-			console.log(`Elevating command: ${_.join(argv, ' ')}`);
+			console.log(`Elevating command: ${argv.join(' ')}`);
 			const env = writerEnv();
 			try {
 				const results = await permissions.elevateCommand(argv, {
@@ -213,6 +227,7 @@ async function performWrite(
 					environment: env,
 				});
 				flashResults.cancelled = cancelled || results.cancelled;
+				flashResults.skip = skip;
 			} catch (error) {
 				// This happens when the child is killed using SIGKILL
 				const SIGKILL_EXIT_CODE = 137;
@@ -226,10 +241,11 @@ async function performWrite(
 			}
 			console.log('Flash results', flashResults);

-			// This likely means the child died halfway through
+			// The flash wasn't cancelled and we didn't get a 'done' event
 			if (
 				!flashResults.cancelled &&
-				!_.get(flashResults, ['results', 'bytesWritten'])
+				!flashResults.skip &&
+				flashResults.results === undefined
 			) {
 				reject(
 					errors.createUserError({
@@ -275,7 +291,6 @@ export async function flash(
 		status: 'started',
 		flashInstanceUuid: flashState.getFlashUuid(),
 		unmountOnSuccess: await settings.get('unmountOnSuccess'),
-		validateWriteOnSuccess: await settings.get('validateWriteOnSuccess'),
 	};

 	analytics.logEvent('Flash', analyticsData);
@@ -286,8 +301,7 @@ export async function flash(
 	} catch (error) {
 		flashState.unsetFlashingFlag({ cancelled: false, errorCode: error.code });
 		windowProgress.clear();
-		let { results } = flashState.getFlashResults();
-		results = results || {};
+		const { results = {} } = flashState.getFlashResults();
 		const eventData = {
 			...analyticsData,
 			errors: results.errors,
@@ -306,7 +320,7 @@ export async function flash(
 		};
 		analytics.logEvent('Elevation cancelled', eventData);
 	} else {
-		const { results } = flashState.getFlashResults();
+		const { results = {} } = flashState.getFlashResults();
 		const eventData = {
 			...analyticsData,
 			errors: results.errors,
@@ -322,17 +336,17 @@ export async function flash(
 /**
 * @summary Cancel write operation
 */
-export async function cancel() {
+export async function cancel(type: string) {
+	const status = type.toLowerCase();
 	const drives = selectionState.getSelectedDevices();
 	const analyticsData = {
-		image: selectionState.getImagePath(),
+		image: selectionState.getImage()?.path,
 		drives,
 		driveCount: drives.length,
 		uuid: flashState.getFlashUuid(),
 		flashInstanceUuid: flashState.getFlashUuid(),
 		unmountOnSuccess: await settings.get('unmountOnSuccess'),
-		validateWriteOnSuccess: await settings.get('validateWriteOnSuccess'),
-		status: 'cancel',
+		status,
 	};
 	analytics.logEvent('Cancel', analyticsData);

@@ -342,7 +356,7 @@ export async function cancel() {
 		// @ts-ignore (no Server.sockets in @types/node-ipc)
 		const [socket] = ipc.server.sockets;
 		if (socket !== undefined) {
-			ipc.server.emit(socket, 'cancel');
+			ipc.server.emit(socket, status);
 		}
 	} catch (error) {
 		analytics.logException(error);
--- a/lib/gui/app/pages/main/Flash.tsx
+++ b/lib/gui/app/pages/main/Flash.tsx
@@ -59,6 +59,27 @@ const getErrorMessageFromCode = (errorCode: string) => {
 	return '';
 };

+function notifySuccess(
+	iconPath: string,
+	basename: string,
+	drives: any,
+	devices: { successful: number; failed: number },
+) {
+	notification.send(
+		'Flash complete!',
+		messages.info.flashComplete(basename, drives, devices),
+		iconPath,
+	);
+}
+
+function notifyFailure(iconPath: string, basename: string, drives: any) {
+	notification.send(
+		'Oops! Looks like the flash failed.',
+		messages.error.flashFailure(basename, drives),
+		iconPath,
+	);
+}
+
 async function flashImageToDrive(
 	isFlashing: boolean,
 	goToSuccess: () => void,
@@ -82,24 +103,22 @@ async function flashImageToDrive(
 	try {
 		await imageWriter.flash(image, drives);
 		if (!flashState.wasLastFlashCancelled()) {
-			const flashResults: any = flashState.getFlashResults();
-			notification.send(
-				'Flash complete!',
-				messages.info.flashComplete(
-					basename,
-					drives as any,
-					flashResults.results.devices,
-				),
-				iconPath,
-			);
+			const {
+				results = { devices: { successful: 0, failed: 0 } },
+				skip,
+				cancelled,
+			} = flashState.getFlashResults();
+			if (!skip && !cancelled) {
+				if (results.devices.successful > 0) {
+					notifySuccess(iconPath, basename, drives, results.devices);
+				} else {
+					notifyFailure(iconPath, basename, drives);
+				}
+			}
 			goToSuccess();
 		}
 	} catch (error) {
-		notification.send(
-			'Oops! Looks like the flash failed.',
-			messages.error.flashFailure(path.basename(image.path), drives),
-			iconPath,
-		);
+		notifyFailure(iconPath, basename, drives);
 		let errorMessage = getErrorMessageFromCode(error.code);
 		if (!errorMessage) {
 			error.image = basename;
@@ -137,6 +156,7 @@ interface FlashStepProps {
 	failed: number;
 	speed?: number;
 	eta?: number;
+	width: string;
 }

 export interface DriveWithWarnings extends constraints.DrivelistDrive {
@@ -201,7 +221,11 @@ export class FlashStep extends React.PureComponent<
 		const drives = selection.getSelectedDrives().map((drive) => {
 			return {
 				...drive,
-				statuses: constraints.getDriveImageCompatibilityStatuses(drive),
+				statuses: constraints.getDriveImageCompatibilityStatuses(
+					drive,
+					undefined,
+					true,
+				),
 			};
 		});
 		if (drives.length === 0 || this.props.isFlashing) {
@@ -239,6 +263,7 @@ export class FlashStep extends React.PureComponent<
 				<Flex
 					flexDirection="column"
 					alignItems="start"
+					width={this.props.width}
 					style={this.props.style}
 				>
 					<FlashSvg
@@ -310,6 +335,7 @@ export class FlashStep extends React.PureComponent<
 				)}
 				{this.state.showDriveSelectorModal && (
 					<TargetSelectorModal
+						write={true}
 						cancel={() => this.setState({ showDriveSelectorModal: false })}
 						done={(modalTargets) => {
 							selectAllTargets(modalTargets);
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -25,7 +25,6 @@ import styled from 'styled-components';

 import FinishPage from '../../components/finish/finish';
 import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
-import { SafeWebview } from '../../components/safe-webview/safe-webview';
 import { SettingsModal } from '../../components/settings/settings';
 import {
 	SourceMetadata,
@@ -48,6 +47,7 @@ import {
 import { FlashStep } from './Flash';

 import EtcherSvg from '../../../assets/etcher.svg';
+import { SafeWebview } from '../../components/safe-webview/safe-webview';

 const Icon = styled(BaseIcon)`
 	margin-right: 20px;
@@ -132,12 +132,13 @@ export class MainPage extends React.Component<
 	}

 	private stateHelper(): MainPageStateFromStore {
+		const image = selectionState.getImage();
 		return {
 			isFlashing: flashState.isFlashing(),
 			hasImage: selectionState.hasImage(),
 			hasDrive: selectionState.hasDrive(),
-			imageLogo: selectionState.getImageLogo(),
-			imageSize: selectionState.getImageSize(),
+			imageLogo: image?.logo,
+			imageSize: image?.size,
 			imageName: getImageBasename(selectionState.getImage()),
 			driveTitle: getDrivesTitle(),
 			driveLabel: getDriveListLabel(),
@@ -169,7 +170,105 @@ export class MainPage extends React.Component<
 		const notFlashingOrSplitView =
 			!this.state.isFlashing || !this.state.isWebviewShowing;
 		return (
-			<>
+			<Flex
+				m={`110px ${this.state.isWebviewShowing ? 35 : 55}px`}
+				justifyContent="space-between"
+			>
+				{notFlashingOrSplitView && (
+					<>
+						<SourceSelector flashing={this.state.isFlashing} />
+						<Flex>
+							<StepBorder disabled={shouldDriveStepBeDisabled} left />
+						</Flex>
+						<TargetSelector
+							disabled={shouldDriveStepBeDisabled}
+							hasDrive={this.state.hasDrive}
+							flashing={this.state.isFlashing}
+						/>
+						<Flex>
+							<StepBorder disabled={shouldFlashStepBeDisabled} right />
+						</Flex>
+					</>
+				)}
+
+				{this.state.isFlashing && this.state.isWebviewShowing && (
+					<Flex
+						style={{
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							width: '36.2vw',
+							height: '100vh',
+							zIndex: 1,
+							boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
+						}}
+					>
+						<ReducedFlashingInfos
+							imageLogo={this.state.imageLogo}
+							imageName={this.state.imageName}
+							imageSize={
+								typeof this.state.imageSize === 'number'
+									? prettyBytes(this.state.imageSize)
+									: ''
+							}
+							driveTitle={this.state.driveTitle}
+							driveLabel={this.state.driveLabel}
+							style={{
+								position: 'absolute',
+								color: '#fff',
+								left: 35,
+								top: 72,
+							}}
+						/>
+					</Flex>
+				)}
+				{this.state.isFlashing && this.state.featuredProjectURL && (
+					<SafeWebview
+						src={this.state.featuredProjectURL}
+						onWebviewShow={(isWebviewShowing: boolean) => {
+							this.setState({ isWebviewShowing });
+						}}
+						style={{
+							position: 'absolute',
+							right: 0,
+							bottom: 0,
+							width: '63.8vw',
+							height: '100vh',
+						}}
+					/>
+				)}
+
+				<FlashStep
+					width={this.state.isWebviewShowing ? '220px' : '200px'}
+					goToSuccess={() => this.setState({ current: 'success' })}
+					shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
+					isFlashing={this.state.isFlashing}
+					step={state.type}
+					percentage={state.percentage}
+					position={state.position}
+					failed={state.failed}
+					speed={state.speed}
+					eta={state.eta}
+					style={{ zIndex: 1 }}
+				/>
+			</Flex>
+		);
+	}
+
+	private renderSuccess() {
+		return (
+			<FinishPage
+				goToMain={() => {
+					flashState.resetState();
+					this.setState({ current: 'main' });
+				}}
+			/>
+		);
+	}
+
+	public render() {
+		return (
+			<ThemedProvider style={{ height: '100%', width: '100%' }}>
 				<Flex
 					justifyContent="space-between"
 					alignItems="center"
@@ -213,7 +312,7 @@ export class MainPage extends React.Component<
 								icon={<QuestionCircleSvg height="1em" fill="currentColor" />}
 								onClick={() =>
 									openExternal(
-										selectionState.getImageSupportUrl() ||
+										selectionState.getImage()?.supportUrl ||
 											'https://github.com/balena-io/etcher/blob/master/SUPPORT.md',
 									)
 								}
@@ -233,117 +332,6 @@ export class MainPage extends React.Component<
 						}}
 					/>
 				)}
-
-				<Flex
-					m={`110px ${this.state.isWebviewShowing ? 35 : 55}px`}
-					justifyContent="space-between"
-				>
-					{notFlashingOrSplitView && (
-						<>
-							<SourceSelector flashing={this.state.isFlashing} />
-							<Flex>
-								<StepBorder disabled={shouldDriveStepBeDisabled} left />
-							</Flex>
-							<TargetSelector
-								disabled={shouldDriveStepBeDisabled}
-								hasDrive={this.state.hasDrive}
-								flashing={this.state.isFlashing}
-							/>
-							<Flex>
-								<StepBorder disabled={shouldFlashStepBeDisabled} right />
-							</Flex>
-						</>
-					)}
-
-					{this.state.isFlashing && this.state.isWebviewShowing && (
-						<Flex
-							style={{
-								position: 'absolute',
-								top: 0,
-								left: 0,
-								width: '36.2vw',
-								height: '100vh',
-								zIndex: 1,
-								boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
-							}}
-						>
-							<ReducedFlashingInfos
-								imageLogo={this.state.imageLogo}
-								imageName={this.state.imageName}
-								imageSize={
-									typeof this.state.imageSize === 'number'
-										? prettyBytes(this.state.imageSize)
-										: ''
-								}
-								driveTitle={this.state.driveTitle}
-								driveLabel={this.state.driveLabel}
-								style={{
-									position: 'absolute',
-									color: '#fff',
-									left: 35,
-									top: 72,
-								}}
-							/>
-						</Flex>
-					)}
-					{this.state.isFlashing && this.state.featuredProjectURL && (
-						<SafeWebview
-							src={this.state.featuredProjectURL}
-							onWebviewShow={(isWebviewShowing: boolean) => {
-								this.setState({ isWebviewShowing });
-							}}
-							style={{
-								position: 'absolute',
-								right: 0,
-								bottom: 0,
-								width: '63.8vw',
-								height: '100vh',
-							}}
-						/>
-					)}
-
-					<FlashStep
-						goToSuccess={() => this.setState({ current: 'success' })}
-						shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
-						isFlashing={this.state.isFlashing}
-						step={state.type}
-						percentage={state.percentage}
-						position={state.position}
-						failed={state.failed}
-						speed={state.speed}
-						eta={state.eta}
-						style={{ zIndex: 1 }}
-					/>
-				</Flex>
-			</>
-		);
-	}
-
-	private renderSuccess() {
-		return (
-			<Flex flexDirection="column" alignItems="center" height="100%">
-				<FinishPage
-					goToMain={() => {
-						flashState.resetState();
-						this.setState({ current: 'main' });
-					}}
-				/>
-				<SafeWebview
-					src="https://www.balena.io/etcher/success-banner/"
-					style={{
-						width: '100%',
-						height: '320px',
-						position: 'absolute',
-						bottom: 0,
-					}}
-				/>
-			</Flex>
-		);
-	}
-
-	public render() {
-		return (
-			<ThemedProvider style={{ height: '100%', width: '100%' }}>
 				{this.state.current === 'main'
 					? this.renderMain()
 					: this.renderSuccess()}
--- a/lib/gui/app/styled-components.tsx
+++ b/lib/gui/app/styled-components.tsx
@@ -14,6 +14,7 @@
 * limitations under the License.
 */

+import * as _ from 'lodash';
 import * as React from 'react';
 import {
 	Alert as AlertBase,
@@ -23,27 +24,16 @@ import {
 	ButtonProps,
 	Modal as ModalBase,
 	Provider,
+	Table as BaseTable,
+	TableProps as BaseTableProps,
 	Txt,
-	Theme as renditionTheme,
 } from 'rendition';
 import styled, { css } from 'styled-components';

 import { colors, theme } from './theme';

-const defaultTheme = {
-	...renditionTheme,
-	...theme,
-	layer: {
-		extend: () => `
-			> div:first-child {
-				background-color: transparent;
-			}
-		`,
-	},
-};
-
 export const ThemedProvider = (props: any) => (
-	<Provider theme={defaultTheme} {...props}></Provider>
+	<Provider theme={theme} {...props}></Provider>
 );

 export const BaseButton = styled(Button)`
@@ -134,46 +124,37 @@ const modalFooterShadowCss = css`
 	background-attachment: local, local, scroll, scroll;
 `;

-export const Modal = styled(({ style, ...props }) => {
+export const Modal = styled(({ style, children, ...props }) => {
 	return (
-		<Provider
-			theme={{
-				...defaultTheme,
-				header: {
-					height: '50px',
-				},
-				layer: {
-					extend: () => `
-					${defaultTheme.layer.extend()}
-
-					> div:last-child {
-						top: 0;
-					}
-				`,
+		<ModalBase
+			position="top"
+			width="97vw"
+			cancelButtonProps={{
+				style: {
+					marginRight: '20px',
+					border: 'solid 1px #2a506f',
 				},
 			}}
+			style={{
+				height: '87.5vh',
+				...style,
+			}}
+			{...props}
 		>
-			<ModalBase
-				position="top"
-				width="97vw"
-				cancelButtonProps={{
-					style: {
-						marginRight: '20px',
-						border: 'solid 1px #2a506f',
-					},
-				}}
-				style={{
-					height: '87.5vh',
-					...style,
-				}}
-				{...props}
-			/>
-		</Provider>
+			<ScrollableFlex flexDirection="column" width="100%" height="90%">
+				{...children}
+			</ScrollableFlex>
+		</ModalBase>
 	);
 })`
 	> div {
 		padding: 0;
-		height: 100%;
+		height: 99%;
+
+		> div:first-child {
+			height: 81%;
+			padding: 24px 30px 0;
+		}

 		> h3 {
 			margin: 0;
@@ -188,11 +169,8 @@ export const Modal = styled(({ style, ...props }) => {

 		> div:nth-child(2) {
 			height: 61%;
-
-			> div:not(.system-drive-alert) {
-				padding: 0 30px;
-				${modalFooterShadowCss}
-			}
+			padding: 0 30px;
+			${modalFooterShadowCss}
 		}

 		> div:last-child {
@@ -249,3 +227,99 @@ export const Alert = styled((props) => (
 		display: none;
 	}
 `;
+
+export interface GenericTableProps<T> extends BaseTableProps<T> {
+	refFn: (t: BaseTable<T>) => void;
+	data: T[];
+	checkedRowsNumber?: number;
+	multipleSelection: boolean;
+	showWarnings?: boolean;
+}
+
+const GenericTable: <T>(
+	props: GenericTableProps<T>,
+) => React.ReactElement<GenericTableProps<T>> = <T extends {}>({
+	refFn,
+	...props
+}: GenericTableProps<T>) => (
+	<div>
+		<BaseTable<T> ref={refFn} {...props} />
+	</div>
+);
+
+function StyledTable<T>() {
+	return styled((props: GenericTableProps<T>) => (
+		<GenericTable<T> {...props} />
+	))`
+		[data-display='table-head']
+			> [data-display='table-row']
+			> [data-display='table-cell'] {
+			position: sticky;
+			background-color: #f8f9fd;
+			top: 0;
+			z-index: 1;
+
+			input[type='checkbox'] + div {
+				display: ${(props) => (props.multipleSelection ? 'flex' : 'none')};
+
+				${(props) =>
+					props.multipleSelection &&
+					props.checkedRowsNumber !== 0 &&
+					props.checkedRowsNumber !== props.data.length
+						? `
+						font-weight: 600;
+						color: ${colors.primary.foreground};
+						background: ${colors.primary.background};
+
+						::after {
+							content: '–';
+						}
+						`
+						: ''}
+				}
+			}
+		}
+
+		[data-display='table-head'] > [data-display='table-row'],
+		[data-display='table-body'] > [data-display='table-row'] {
+			> [data-display='table-cell']:first-child {
+				padding-left: 15px;
+				width: 6%;
+			}
+
+			> [data-display='table-cell']:last-child {
+				padding-right: 0;
+			}
+		}
+
+		[data-display='table-body'] > [data-display='table-row'] {
+			&:nth-of-type(2n) {
+				background: transparent;
+			}
+
+			&[data-highlight='true'] {
+				&.system {
+					background-color: ${(props) => (props.showWarnings ? '#fff5e6' : '#e8f5fc')};
+				}
+
+				> [data-display='table-cell']:first-child {
+					box-shadow: none;
+				}
+			}
+		}
+
+		&& [data-display='table-row'] > [data-display='table-cell'] {
+			padding: 6px 8px;
+			color: #2a506f;
+		}
+
+		input[type='checkbox'] + div {
+			border-radius: ${(props) => (props.multipleSelection ? '4px' : '50%')};
+		}
+	`;
+}
+
+export const Table = <T extends {}>(props: GenericTableProps<T>) => {
+	const TypedStyledFunctional = StyledTable<T>();
+	return <TypedStyledFunctional {...props} />;
+};
--- a/lib/gui/app/theme.ts
+++ b/lib/gui/app/theme.ts
@@ -14,6 +14,9 @@
 * limitations under the License.
 */

+import * as _ from 'lodash';
+import { Theme } from 'rendition';
+
 export const colors = {
 	dark: {
 		foreground: '#fff',
@@ -67,9 +70,12 @@ export const colors = {

 const font = 'SourceSansPro';

-export const theme = {
+export const theme = _.merge({}, Theme, {
 	colors,
 	font,
+	header: {
+		height: '40px',
+	},
 	global: {
 		font: {
 			family: font,
@@ -94,6 +100,7 @@ export const theme = {
 			font-size: 16px;

 			&& {
+				width: 200px;
 				height: 48px;
 			}

@@ -109,4 +116,11 @@ export const theme = {
 			}
 		`,
 	},
-};
+	layer: {
+		extend: () => `
+			> div:first-child {
+				background-color: transparent;
+			}
+		`,
+	},
+});
--- a/lib/gui/assets/src.svg
+++ b/lib/gui/assets/src.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 39 90" xmlns="http://www.w3.org/2000/svg">
+<g fill="none" fill-rule="evenodd">
+<g transform="translate(-380 -166)">
+<g transform="translate(380 166)">
+<path d="m30.88 39.87h-23.363v23.209c0 0.6909 0.56062 1.251 1.251 1.251h20.861c0.69114 0 1.251-0.55986 1.251-1.251v-23.209zm-22.363 0.9999h21.363l4e-4 22.209c0 0.13886-0.11214 0.251-0.251 0.251h-20.861l-0.057452-0.0066403c-0.11075-0.026055-0.19355-0.12572-0.19355-0.24436l-4e-4 -22.209z" fill="#2A506F" fill-rule="nonzero"/>
+<path d="m16.558 48.924h-3.967c-0.58314 0-1.055 0.47186-1.055 1.055v2.732c0 0.58235 0.47206 1.055 1.055 1.055h3.967c0.58223 0 1.054-0.47295 1.054-1.055v-2.732c0-0.58285-0.47156-1.055-1.054-1.055zm-3.967 1h3.967c0.029872 0 0.054 0.024158 0.054 0.055v2.732c0 0.030327-0.024612 0.055-0.054 0.055h-3.967c-0.030373 0-0.055-0.024658-0.055-0.055v-2.732c0-0.030858 0.024142-0.055 0.055-0.055z" fill="#2A506F" fill-rule="nonzero"/>
+<path d="m25.97 48.924h-3.967c-0.58314 0-1.055 0.47186-1.055 1.055v2.732c0 0.58235 0.47206 1.055 1.055 1.055h3.967c0.58223 0 1.054-0.47295 1.054-1.055v-2.732c0-0.58285-0.47156-1.055-1.054-1.055zm-3.967 1h3.967c0.029872 0 0.054 0.024158 0.054 0.055v2.732c0 0.030327-0.024612 0.055-0.054 0.055h-3.967c-0.030373 0-0.055-0.024658-0.055-0.055v-2.732c0-0.030858 0.024142-0.055 0.055-0.055z" fill="#2A506F" fill-rule="nonzero"/>
+<path d="m37.398 5.418v30.534c0 2.43-1.988 4.418-4.418 4.418h-27.562c-2.43 0-4.418-1.988-4.418-4.418v-30.534c0-2.43 1.988-4.418 4.418-4.418h27.562c2.43 0 4.418 1.988 4.418 4.418" fill="#2A506F"/>
+<path d="m32.98-5.6843e-14h-27.562c-2.9823 0-5.418 2.4357-5.418 5.418v30.534c0 2.9823 2.4357 5.418 5.418 5.418h27.562c2.9823 0 5.418-2.4357 5.418-5.418v-30.534c0-2.9823-2.4357-5.418-5.418-5.418zm-27.562 2h27.562c1.8777 0 3.418 1.5403 3.418 3.418v30.534c0 1.8777-1.5403 3.418-3.418 3.418h-27.562c-1.8777 0-3.418-1.5403-3.418-3.418v-30.534c0-1.8777 1.5403-3.418 3.418-3.418z" fill="#2A506F" fill-rule="nonzero"/>
+<path d="m19.147 73.551c0.24546 0 0.44961 0.17688 0.49194 0.41012l0.0080557 0.089876v14.882c0 0.27614-0.22386 0.5-0.5 0.5-0.24546 0-0.44961-0.17688-0.49194-0.41012l-0.0080557-0.089876v-14.882c0-0.27614 0.22386-0.5 0.5-0.5z" fill="#2A506F" fill-rule="nonzero"/>
+<line x1="19.147" x2="14.532" y1="88.933" y2="84.214" stroke="#2A506F" stroke-linecap="round"/>
+<line x1="19.147" x2="23.866" y1="88.933" y2="84.318" stroke="#2A506F" stroke-linecap="round"/>
+<path d="m14.007 26.177c0.51076 0 0.96749-0.071211 1.3702-0.21363s0.74649-0.33887 1.0313-0.58934 0.50339-0.54268 0.65564-0.87664 0.22837-0.69247 0.22837-1.0755c0-0.3536-0.051567-0.66546-0.1547-0.93557s-0.2431-0.50585-0.4199-0.7072-0.38798-0.37816-0.63354-0.5304-0.50585-0.2873-0.78087-0.40517l-1.3702-0.58934c-0.19645-0.078578-0.38798-0.16452-0.5746-0.25783s-0.35851-0.20136-0.51567-0.32413-0.28239-0.2652-0.3757-0.42727-0.13997-0.36097-0.13997-0.5967c0-0.442 0.16452-0.78824 0.49357-1.0387s0.76368-0.3757 1.3039-0.3757c0.45182 0 0.85699 0.081034 1.2155 0.2431s0.6851 0.38552 0.97977 0.67037l0.663-0.7956c-0.34378-0.3536-0.76123-0.6409-1.2523-0.8619s-1.0264-0.3315-1.6059-0.3315c-0.442 0-0.84717 0.063845-1.2155 0.19153s-0.68756 0.30695-0.95767 0.53777-0.48129 0.50339-0.63354 0.8177-0.22837 0.65318-0.22837 1.0166c0 0.3536 0.058934 0.66546 0.1768 0.93557s0.27011 0.50339 0.45674 0.69984 0.3978 0.36342 0.63354 0.50094 0.46656 0.25538 0.69247 0.3536l1.3849 0.60407c0.22591 0.10804 0.43709 0.21118 0.63354 0.3094s0.36588 0.20872 0.5083 0.3315 0.25538 0.27011 0.33887 0.442 0.12523 0.38061 0.12523 0.62617c0 0.47147-0.1768 0.85208-0.5304 1.1418s-0.84963 0.43464-1.4881 0.43464c-0.50094 0-0.98468-0.1105-1.4512-0.3315s-0.87173-0.51321-1.2155-0.87664l-0.73667 0.85454c0.42236 0.442 0.92329 0.79069 1.5028 1.0461s1.2081 0.38307 1.8859 0.38307zm6.2664-0.1768v-4.5968c0.24556-0.60898 0.53286-1.0362 0.8619-1.2818s0.64581-0.36834 0.9503-0.36834c0.14733 0 0.27011 0.0098223 0.36834 0.029467s0.20627 0.049111 0.32413 0.0884l0.23573-1.0608c-0.22591-0.098223-0.48129-0.14733-0.76614-0.14733-0.41254 0-0.79315 0.1326-1.1418 0.3978s-0.64581 0.62371-0.89137 1.0755h-0.0442l-0.10313-1.2965h-1.0019v7.1604h1.2081zm6.5758 0.1768c0.43218 0 0.84471-0.081034 1.2376-0.2431s0.7514-0.38552 1.0755-0.67037l-0.5304-0.81034c-0.22591 0.19645-0.47884 0.36588-0.75877 0.5083s-0.58688 0.21363-0.92084 0.21363c-0.32413 0-0.62371-0.0663-0.89874-0.1989s-0.5083-0.31922-0.69984-0.55987-0.34132-0.52795-0.44937-0.8619-0.16207-0.7072-0.16207-1.1197 0.056478-0.78824 0.16943-1.1271 0.26766-0.63108 0.4641-0.87664 0.43218-0.43464 0.7072-0.56724 0.5746-0.1989 0.89874-0.1989c0.28485 0 0.54268 0.058934 0.7735 0.1768s0.44937 0.27011 0.65564 0.45674l0.6188-0.7956c-0.25538-0.22591-0.55005-0.42236-0.884-0.58934s-0.73667-0.25047-1.2081-0.25047c-0.46165 0-0.90119 0.083489-1.3186 0.25047s-0.78333 0.41254-1.0976 0.73667-0.56478 0.71948-0.7514 1.186-0.27993 0.99942-0.27993 1.5986c0 0.58934 0.085945 1.1173 0.25783 1.5838s0.40762 0.85945 0.7072 1.1787 0.65564 0.56232 1.0682 0.7293 0.85454 0.25047 1.326 0.25047z" fill="#fff" fill-rule="nonzero"/>
+</g>
+</g>
+</g>
+</svg>
--- a/lib/gui/etcher.ts
+++ b/lib/gui/etcher.ts
@@ -122,8 +122,8 @@ interface AutoUpdaterConfig {

 async function createMainWindow() {
 	const fullscreen = Boolean(await settings.get('fullscreen'));
-	const defaultWidth = 800;
-	const defaultHeight = 480;
+	const defaultWidth = settings.DEFAULT_WIDTH;
+	const defaultHeight = settings.DEFAULT_HEIGHT;
 	let width = defaultWidth;
 	let height = defaultHeight;
 	if (fullscreen) {
@@ -133,7 +133,7 @@ async function createMainWindow() {
 		width,
 		height,
 		frame: !fullscreen,
-		useContentSize: false,
+		useContentSize: true,
 		show: false,
 		resizable: false,
 		maximizable: false,
--- a/lib/gui/modules/child-writer.ts
+++ b/lib/gui/modules/child-writer.ts
@@ -15,12 +15,23 @@
 */

 import { Drive as DrivelistDrive } from 'drivelist';
-import * as sdk from 'etcher-sdk';
+import {
+	BlockDevice,
+	File,
+	Http,
+	Metadata,
+	SourceDestination,
+} from 'etcher-sdk/build/source-destination';
+import {
+	MultiDestinationProgress,
+	OnProgressFunction,
+	OnFailFunction,
+	decompressThenFlash,
+} from 'etcher-sdk/build/multi-write';
 import { cleanupTmpFiles } from 'etcher-sdk/build/tmp';
 import * as ipc from 'node-ipc';
 import { totalmem } from 'os';

-import { BlockDevice, File, Http } from 'etcher-sdk/build/source-destination';
 import { toJSON } from '../../shared/errors';
 import { GENERAL_ERROR, SUCCESS } from '../../shared/exit-codes';
 import { delay } from '../../shared/utils';
@@ -55,8 +66,9 @@ function log(message: string) {
 /**
 * @summary Terminate the child writer process
 */
-function terminate(exitCode: number) {
+async function terminate(exitCode: number) {
 	ipc.disconnect(IPC_SERVER_ID);
+	await cleanupTmpFiles(Date.now());
 	process.nextTick(() => {
 		process.exit(exitCode || SUCCESS);
 	});
@@ -68,17 +80,28 @@ function terminate(exitCode: number) {
 async function handleError(error: Error) {
 	ipc.of[IPC_SERVER_ID].emit('error', toJSON(error));
 	await delay(DISCONNECT_DELAY);
-	terminate(GENERAL_ERROR);
+	await terminate(GENERAL_ERROR);
 }

-interface WriteResult {
-	bytesWritten: number;
-	devices: {
+export interface FlashError extends Error {
+	description: string;
+	device: string;
+	code: string;
+}
+
+export interface WriteResult {
+	bytesWritten?: number;
+	devices?: {
 		failed: number;
 		successful: number;
 	};
-	errors: Array<Error & { device: string }>;
-	sourceMetadata: sdk.sourceDestination.Metadata;
+	errors: FlashError[];
+	sourceMetadata?: Metadata;
+}
+
+export interface FlashResults extends WriteResult {
+	skip?: boolean;
+	cancelled?: boolean;
 }

 /**
@@ -100,19 +123,15 @@ async function writeAndValidate({
 	onProgress,
 	onFail,
 }: {
-	source: sdk.sourceDestination.SourceDestination;
-	destinations: sdk.sourceDestination.BlockDevice[];
+	source: SourceDestination;
+	destinations: BlockDevice[];
 	verify: boolean;
 	autoBlockmapping: boolean;
 	decompressFirst: boolean;
-	onProgress: sdk.multiWrite.OnProgressFunction;
-	onFail: sdk.multiWrite.OnFailFunction;
+	onProgress: OnProgressFunction;
+	onFail: OnFailFunction;
 }): Promise<WriteResult> {
-	const {
-		sourceMetadata,
-		failures,
-		bytesWritten,
-	} = await sdk.multiWrite.decompressThenFlash({
+	const { sourceMetadata, failures, bytesWritten } = await decompressThenFlash({
 		source,
 		destinations,
 		onFail,
@@ -136,8 +155,10 @@ async function writeAndValidate({
 		sourceMetadata,
 	};
 	for (const [destination, error] of failures) {
-		const err = error as Error & { device: string };
-		err.device = (destination as sdk.sourceDestination.BlockDevice).device;
+		const err = error as FlashError;
+		const drive = destination as BlockDevice;
+		err.device = drive.device;
+		err.description = drive.description;
 		result.errors.push(err);
 	}
 	return result;
@@ -147,7 +168,6 @@ interface WriteOptions {
 	image: SourceMetadata;
 	destinations: DrivelistDrive[];
 	unmountOnSuccess: boolean;
-	validateWriteOnSuccess: boolean;
 	autoBlockmapping: boolean;
 	decompressFirst: boolean;
 	SourceType: string;
@@ -163,22 +183,22 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 	// no flashing information is available, then it will
 	// assume that the child died halfway through.

-	process.once('SIGINT', () => {
-		terminate(SUCCESS);
+	process.once('SIGINT', async () => {
+		await terminate(SUCCESS);
 	});

-	process.once('SIGTERM', () => {
-		terminate(SUCCESS);
+	process.once('SIGTERM', async () => {
+		await terminate(SUCCESS);
 	});

 	// The IPC server failed. Abort.
-	ipc.of[IPC_SERVER_ID].on('error', () => {
-		terminate(SUCCESS);
+	ipc.of[IPC_SERVER_ID].on('error', async () => {
+		await terminate(SUCCESS);
 	});

 	// The IPC server was disconnected. Abort.
-	ipc.of[IPC_SERVER_ID].on('disconnect', () => {
-		terminate(SUCCESS);
+	ipc.of[IPC_SERVER_ID].on('disconnect', async () => {
+		await terminate(SUCCESS);
 	});

 	ipc.of[IPC_SERVER_ID].on('write', async (options: WriteOptions) => {
@@ -188,7 +208,7 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 		 * @example
 		 * writer.on('progress', onProgress)
 		 */
-		const onProgress = (state: sdk.multiWrite.MultiDestinationProgress) => {
+		const onProgress = (state: MultiDestinationProgress) => {
 			ipc.of[IPC_SERVER_ID].emit('state', state);
 		};

@@ -203,11 +223,20 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 			log('Abort');
 			ipc.of[IPC_SERVER_ID].emit('abort');
 			await delay(DISCONNECT_DELAY);
-			terminate(exitCode);
+			await terminate(exitCode);
+		};
+
+		const onSkip = async () => {
+			log('Skip validation');
+			ipc.of[IPC_SERVER_ID].emit('skip');
+			await delay(DISCONNECT_DELAY);
+			await terminate(exitCode);
 		};

 		ipc.of[IPC_SERVER_ID].on('cancel', onAbort);

+		ipc.of[IPC_SERVER_ID].on('skip', onSkip);
+
 		/**
 		 * @summary Failure handler (non-fatal errors)
 		 * @param {SourceDestination} destination - destination
@@ -215,10 +244,7 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 		 * @example
 		 * writer.on('fail', onFail)
 		 */
-		const onFail = (
-			destination: sdk.sourceDestination.SourceDestination,
-			error: Error,
-		) => {
+		const onFail = (destination: SourceDestination, error: Error) => {
 			ipc.of[IPC_SERVER_ID].emit('fail', {
 				// TODO: device should be destination
 				// @ts-ignore (destination.drive is private)
@@ -232,11 +258,10 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 		log(`Image: ${imagePath}`);
 		log(`Devices: ${destinations.join(', ')}`);
 		log(`Umount on success: ${options.unmountOnSuccess}`);
-		log(`Validate on success: ${options.validateWriteOnSuccess}`);
 		log(`Auto blockmapping: ${options.autoBlockmapping}`);
 		log(`Decompress first: ${options.decompressFirst}`);
 		const dests = options.destinations.map((destination) => {
-			return new sdk.sourceDestination.BlockDevice({
+			return new BlockDevice({
 				drive: destination,
 				unmountOnSuccess: options.unmountOnSuccess,
 				write: true,
@@ -263,7 +288,7 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 			const results = await writeAndValidate({
 				source,
 				destinations: dests,
-				verify: options.validateWriteOnSuccess,
+				verify: true,
 				autoBlockmapping: options.autoBlockmapping,
 				decompressFirst: options.decompressFirst,
 				onProgress,
@@ -275,9 +300,8 @@ ipc.connectTo(IPC_SERVER_ID, () => {
 			});
 			ipc.of[IPC_SERVER_ID].emit('done', { results });
 			await delay(DISCONNECT_DELAY);
-			terminate(exitCode);
+			await terminate(exitCode);
 		} catch (error) {
-			log(`Error: ${error.message}`);
 			exitCode = GENERAL_ERROR;
 			ipc.of[IPC_SERVER_ID].emit('error', toJSON(error));
 		}
--- a/lib/shared/drive-constraints.ts
+++ b/lib/shared/drive-constraints.ts
@@ -34,16 +34,6 @@ export type DrivelistDrive = Drive & {
 	displayName: string;
 };

-/**
- * @summary Check if a drive is locked
- *
- * @description
- * This usually points out a locked SD Card.
- */
-export function isDriveLocked(drive: DrivelistDrive): boolean {
-	return Boolean(drive.isReadOnly);
-}
-
 /**
 * @summary Check if a drive is a system drive
 */
@@ -73,9 +63,7 @@ export function isSourceDrive(
 ): boolean {
 	if (selection) {
 		if (selection.drive) {
-			const sourcePath = selection.drive.devicePath || selection.drive.device;
-			const drivePath = drive.devicePath || drive.device;
-			return pathIsInside(sourcePath, drivePath);
+			return selection.drive.device === drive.device;
 		}
 		if (selection.path) {
 			return sourceIsInsideDrive(selection.path, drive);
@@ -124,14 +112,13 @@ export function isDriveDisabled(drive: DrivelistDrive): boolean {
 }

 /**
- * @summary Check if a drive is valid, i.e. not locked and large enough for an image
+ * @summary Check if a drive is valid, i.e. large enough for an image
 */
 export function isDriveValid(
 	drive: DrivelistDrive,
 	image?: SourceMetadata,
 ): boolean {
 	return (
-		!isDriveLocked(drive) &&
 		isDriveLargeEnough(drive, image) &&
 		!isSourceDrive(drive, image as SourceMetadata) &&
 		!isDriveDisabled(drive)
@@ -215,17 +202,19 @@ export const statuses = {
 */
 export function getDriveImageCompatibilityStatuses(
 	drive: DrivelistDrive,
-	image?: SourceMetadata,
+	image: SourceMetadata | undefined,
+	write: boolean,
 ) {
 	const statusList = [];

 	// Mind the order of the if-statements if you modify.
-	if (isDriveLocked(drive)) {
+	if (drive.isReadOnly && write) {
 		statusList.push({
 			type: COMPATIBILITY_STATUS_TYPES.ERROR,
 			message: messages.compatibility.locked(),
 		});
-	} else if (
+	}
+	if (
 		!_.isNil(drive) &&
 		!_.isNil(drive.size) &&
 		!isDriveLargeEnough(drive, image)
@@ -264,10 +253,11 @@ export function getDriveImageCompatibilityStatuses(
 */
 export function getListDriveImageCompatibilityStatuses(
 	drives: DrivelistDrive[],
-	image: SourceMetadata,
+	image: SourceMetadata | undefined,
+	write: boolean,
 ) {
 	return drives.flatMap((drive) => {
-		return getDriveImageCompatibilityStatuses(drive, image);
+		return getDriveImageCompatibilityStatuses(drive, image, write);
 	});
 }

@@ -279,9 +269,12 @@ export function getListDriveImageCompatibilityStatuses(
 */
 export function hasDriveImageCompatibilityStatus(
 	drive: DrivelistDrive,
-	image: SourceMetadata,
+	image: SourceMetadata | undefined,
+	write: boolean,
 ) {
-	return Boolean(getDriveImageCompatibilityStatuses(drive, image).length);
+	return Boolean(
+		getDriveImageCompatibilityStatuses(drive, image, write).length,
+	);
 }

 export interface DriveStatus {
--- a/lib/shared/messages.ts
+++ b/lib/shared/messages.ts
@@ -117,6 +117,14 @@ export const warning = {
 		].join(' ');
 	},

+	driveMissingPartitionTable: () => {
+		return outdent({ newline: ' ' })`
+			It looks like this is not a bootable drive.
+			The drive does not appear to contain a partition table,
+			and might not be recognized or bootable by your device.
+		`;
+	},
+
 	largeDriveSize: () => {
 		return 'This is a large drive! Make sure it doesn\'t contain files that you want to keep.';
 	},
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "balena-etcher",
  "private": true,
  "displayName": "balenaEtcher",
-  "version": "1.5.109",
+  "version": "1.5.112",
  "packageType": "local",
  "main": "generated/etcher.js",
  "description": "Flash OS images to SD cards and USB drives, safely and easily.",
@@ -71,13 +71,13 @@
    "css-loader": "^4.2.1",
    "d3": "^4.13.0",
    "debug": "^4.2.0",
-    "electron": "9.2.1",
-    "electron-builder": "^22.7.0",
-    "electron-mocha": "^9.1.0",
+    "electron": "9.3.3",
+    "electron-builder": "^22.9.1",
+    "electron-mocha": "^9.3.2",
    "electron-notarize": "^1.0.0",
-    "electron-rebuild": "^1.11.0",
-    "electron-updater": "^4.3.2",
-    "etcher-sdk": "^4.1.30",
+    "electron-rebuild": "^2.3.2",
+    "electron-updater": "^4.3.5",
+    "etcher-sdk": "^5.1.10",
    "file-loader": "^6.0.0",
    "husky": "^4.2.5",
    "immutable": "^3.8.1",
@@ -94,7 +94,7 @@
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "redux": "^4.0.5",
-    "rendition": "^18.4.1",
+    "rendition": "^18.8.3",
    "resin-corvus": "^2.0.5",
    "semver": "^7.3.2",
    "simple-progress-webpack-plugin": "^1.1.2",
@@ -102,13 +102,13 @@
    "spectron": "^11.0.0",
    "string-replace-loader": "^2.3.0",
    "styled-components": "^5.1.0",
-    "sudo-prompt": "github:zvin/sudo-prompt#workaround-windows-amperstand-in-username",
-    "sys-class-rgb-led": "^2.1.0",
+    "sudo-prompt": "github:zvin/sudo-prompt#7cdede2f0da28fbcc2db48402d7d935f3a825c91",
+    "sys-class-rgb-led": "^2.1.1",
    "tmp": "^0.2.1",
    "ts-loader": "^8.0.0",
    "ts-node": "^9.0.0",
    "tslib": "^2.0.0",
-    "typescript": "^4.0.2",
+    "typescript": "^4.1.2",
    "uuid": "^8.1.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
--- a/repo.yml
+++ b/repo.yml
@@ -8,4 +8,13 @@ sentry:
 triggerNotification:
    version: 1.5.81
    stagingPercentage: 100
-
+upstream:
+  - repo: etcher-sdk
+    url: https://github.com/balena-io-modules/etcher-sdk
+    module: 'etcher-sdk'
+  - repo: sys-class-rgb-led
+    url: https://github.com/balena-io-modules/sys-class-rgb-led
+    module: sys-class-rgb-led
+  - repo: rendition
+    url: https://github.com/balena-io-modules/rendition
+    module: rendition
--- a/tests/gui/models/flash-state.spec.ts
+++ b/tests/gui/models/flash-state.spec.ts
@@ -393,6 +393,7 @@ describe('Model: flashState', function () {

 				expect(flashResults).to.deep.equal({
 					cancelled: false,
+					skip: false,
 					sourceChecksum: '1234',
 				});
 			});
--- a/tests/gui/models/selection-state.spec.ts
+++ b/tests/gui/models/selection-state.spec.ts
@@ -33,26 +33,6 @@ describe('Model: selectionState', function () {
 			expect(selectionState.getImage()).to.be.undefined;
 		});

-		it('getImagePath() should return undefined', function () {
-			expect(selectionState.getImagePath()).to.be.undefined;
-		});
-
-		it('getImageSize() should return undefined', function () {
-			expect(selectionState.getImageSize()).to.be.undefined;
-		});
-
-		it('getImageName() should return undefined', function () {
-			expect(selectionState.getImageName()).to.be.undefined;
-		});
-
-		it('getImageLogo() should return undefined', function () {
-			expect(selectionState.getImageLogo()).to.be.undefined;
-		});
-
-		it('getImageSupportUrl() should return undefined', function () {
-			expect(selectionState.getImageSupportUrl()).to.be.undefined;
-		});
-
 		it('hasDrive() should return false', function () {
 			const hasDrive = selectionState.hasDrive();
 			expect(hasDrive).to.be.false;
@@ -379,43 +359,6 @@ describe('Model: selectionState', function () {
 			});
 		});

-		describe('.getImagePath()', function () {
-			it('should return the image path', function () {
-				const imagePath = selectionState.getImagePath();
-				expect(imagePath).to.equal('foo.img');
-			});
-		});
-
-		describe('.getImageSize()', function () {
-			it('should return the image size', function () {
-				const imageSize = selectionState.getImageSize();
-				expect(imageSize).to.equal(999999999);
-			});
-		});
-
-		describe('.getImageName()', function () {
-			it('should return the image name', function () {
-				const imageName = selectionState.getImageName();
-				expect(imageName).to.equal('Raspbian');
-			});
-		});
-
-		describe('.getImageLogo()', function () {
-			it('should return the image logo', function () {
-				const imageLogo = selectionState.getImageLogo();
-				expect(imageLogo).to.equal(
-					'<svg><text fill="red">Raspbian</text></svg>',
-				);
-			});
-		});
-
-		describe('.getImageSupportUrl()', function () {
-			it('should return the image support url', function () {
-				const imageSupportUrl = selectionState.getImageSupportUrl();
-				expect(imageSupportUrl).to.equal('https://www.raspbian.org/forums/');
-			});
-		});
-
 		describe('.hasImage()', function () {
 			it('should return true', function () {
 				const hasImage = selectionState.hasImage();
@@ -435,9 +378,9 @@ describe('Model: selectionState', function () {
 					SourceType: File,
 				});

-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('bar.img');
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.equal(999999999);
 			});
 		});
@@ -446,9 +389,9 @@ describe('Model: selectionState', function () {
 			it('should clear the image', function () {
 				selectionState.deselectImage();

-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.be.undefined;
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.be.undefined;
 			});
 		});
@@ -472,9 +415,9 @@ describe('Model: selectionState', function () {
 			it('should be able to set an image', function () {
 				selectionState.selectSource(image);

-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.img');
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.equal(999999999);
 			});

@@ -485,7 +428,7 @@ describe('Model: selectionState', function () {
 					archiveExtension: 'zip',
 				});

-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.zip');
 			});

@@ -496,7 +439,7 @@ describe('Model: selectionState', function () {
 					archiveExtension: 'xz',
 				});

-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.xz');
 			});

@@ -507,7 +450,7 @@ describe('Model: selectionState', function () {
 					archiveExtension: 'gz',
 				});

-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('something.linux-x86-64.gz');
 			});

@@ -675,12 +618,12 @@ describe('Model: selectionState', function () {
 			});

 			it('getImagePath() should return undefined', function () {
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.be.undefined;
 			});

 			it('getImageSize() should return undefined', function () {
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.be.undefined;
 			});

@@ -700,12 +643,12 @@ describe('Model: selectionState', function () {
 			});

 			it('getImagePath() should return the image path', function () {
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.img');
 			});

 			it('getImageSize() should return the image size', function () {
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.equal(999999999);
 			});

--- a/tests/gui/modules/progress-status.spec.ts
+++ b/tests/gui/modules/progress-status.spec.ts
@@ -32,7 +32,6 @@ describe('Browser: progressStatus', function () {
 			};

 			settings.set('unmountOnSuccess', true);
-			settings.set('validateWriteOnSuccess', true);
 		});

 		it('should report 0% if percentage == 0 but speed != 0', function () {
@@ -105,25 +104,16 @@ describe('Browser: progressStatus', function () {
 			);
 		});

-		it('should handle percentage == 100, flashing, unmountOnSuccess, validateWriteOnSuccess', function () {
+		it('should handle percentage == 100, flashing, unmountOnSuccess', function () {
 			this.state.percentage = 100;
 			expect(progressStatus.titleFromFlashState(this.state)).to.equal(
 				'Finishing...',
 			);
 		});

-		it('should handle percentage == 100, flashing, unmountOnSuccess, !validateWriteOnSuccess', function () {
-			this.state.percentage = 100;
-			settings.set('validateWriteOnSuccess', false);
-			expect(progressStatus.titleFromFlashState(this.state)).to.equal(
-				'Finishing...',
-			);
-		});
-
-		it('should handle percentage == 100, flashing, !unmountOnSuccess, !validateWriteOnSuccess', function () {
+		it('should handle percentage == 100, flashing, !unmountOnSuccess', function () {
 			this.state.percentage = 100;
 			settings.set('unmountOnSuccess', false);
-			settings.set('validateWriteOnSuccess', false);
 			expect(progressStatus.titleFromFlashState(this.state)).to.equal(
 				'Finishing...',
 			);
--- a/tests/shared/drive-constraints.spec.ts
+++ b/tests/shared/drive-constraints.spec.ts
@@ -23,37 +23,6 @@ import * as constraints from '../../lib/shared/drive-constraints';
 import * as messages from '../../lib/shared/messages';

 describe('Shared: DriveConstraints', function () {
-	describe('.isDriveLocked()', function () {
-		it('should return true if the drive is read-only', function () {
-			const result = constraints.isDriveLocked({
-				device: '/dev/disk2',
-				size: 999999999,
-				isReadOnly: true,
-			} as constraints.DrivelistDrive);
-
-			expect(result).to.be.true;
-		});
-
-		it('should return false if the drive is not read-only', function () {
-			const result = constraints.isDriveLocked({
-				device: '/dev/disk2',
-				size: 999999999,
-				isReadOnly: false,
-			} as constraints.DrivelistDrive);
-
-			expect(result).to.be.false;
-		});
-
-		it("should return false if we don't know if the drive is read-only", function () {
-			const result = constraints.isDriveLocked({
-				device: '/dev/disk2',
-				size: 999999999,
-			} as constraints.DrivelistDrive);
-
-			expect(result).to.be.false;
-		});
-	});
-
 	describe('.isSystemDrive()', function () {
 		it('should return true if the drive is a system drive', function () {
 			const result = constraints.isSystemDrive({
@@ -700,11 +669,6 @@ describe('Shared: DriveConstraints', function () {
 				});

 				it('should return false if the drive is not large enough and is a source drive', function () {
-					console.log('YAYYY', {
-						...image,
-						path: path.join(this.mountpoint, 'rpi.img'),
-						size: 5000000000,
-					});
 					expect(
 						constraints.isDriveValid(this.drive, {
 							...image,
@@ -750,7 +714,7 @@ describe('Shared: DriveConstraints', function () {
 					this.drive.disabled = false;
 				});

-				it('should return false if the drive is not large enough and is a source drive', function () {
+				it('should return false if the drive is not large enough and is the source drive', function () {
 					expect(
 						constraints.isDriveValid(this.drive, {
 							...image,
@@ -760,7 +724,7 @@ describe('Shared: DriveConstraints', function () {
 					).to.be.false;
 				});

-				it('should return false if the drive is not large enough and is not a source drive', function () {
+				it('should return false if the drive is not large enough and is not the source drive', function () {
 					expect(
 						constraints.isDriveValid(this.drive, {
 							...image,
@@ -770,17 +734,17 @@ describe('Shared: DriveConstraints', function () {
 					).to.be.false;
 				});

-				it('should return false if the drive is large enough and is a source drive', function () {
-					expect(constraints.isDriveValid(this.drive, image)).to.be.false;
+				it('should return true if the drive is large enough and is the source drive', function () {
+					expect(constraints.isDriveValid(this.drive, image)).to.be.true;
 				});

-				it('should return false if the drive is large enough and is not a source drive', function () {
+				it('should return true if the drive is large enough and is not the source drive', function () {
 					expect(
 						constraints.isDriveValid(this.drive, {
 							...image,
 							path: path.resolve(this.mountpoint, '../bar/rpi.img'),
 						}),
-					).to.be.false;
+					).to.be.true;
 				});
 			});
 		});
@@ -988,6 +952,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);

 				expect(result).to.deep.equal([]);
@@ -1000,6 +965,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);

 				const expectedTuples: Array<['WARNING' | 'ERROR', string]> = [];
@@ -1014,6 +980,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
 				const expectedTuples = [['ERROR', 'containsImage']];
@@ -1030,6 +997,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				const expectedTuples = [['WARNING', 'system']];

@@ -1045,6 +1013,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				const expected = [
 					{
@@ -1065,6 +1034,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
 				const expectedTuples = [];
@@ -1081,6 +1051,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
 				const expectedTuples = [['ERROR', 'locked']];
@@ -1097,6 +1068,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
 				const expectedTuples = [['WARNING', 'sizeNotRecommended']];
@@ -1113,6 +1085,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				const expectedTuples = [['WARNING', 'largeDrive']];

@@ -1133,9 +1106,13 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
-				const expectedTuples = [['ERROR', 'locked']];
+				const expectedTuples = [
+					['ERROR', 'locked'],
+					['ERROR', 'containsImage'],
+				];

 				// @ts-ignore
 				expectStatusTypesAndMessagesToBe(result, expectedTuples);
@@ -1149,6 +1126,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
 				const expectedTuples = [['ERROR', 'locked']];
@@ -1166,6 +1144,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				const expected = [
 					{
@@ -1186,6 +1165,7 @@ describe('Shared: DriveConstraints', function () {
 				const result = constraints.getDriveImageCompatibilityStatuses(
 					this.drive,
 					this.image,
+					true,
 				);
 				// @ts-ignore
 				const expectedTuples = [
@@ -1292,7 +1272,7 @@ describe('Shared: DriveConstraints', function () {
 		describe('given no drives', function () {
 			it('should return no statuses', function () {
 				expect(
-					constraints.getListDriveImageCompatibilityStatuses([], image),
+					constraints.getListDriveImageCompatibilityStatuses([], image, true),
 				).to.deep.equal([]);
 			});
 		});
@@ -1303,6 +1283,7 @@ describe('Shared: DriveConstraints', function () {
 					constraints.getListDriveImageCompatibilityStatuses(
 						[drives[0]],
 						image,
+						true,
 					),
 				).to.deep.equal([
 					{
@@ -1317,6 +1298,7 @@ describe('Shared: DriveConstraints', function () {
 					constraints.getListDriveImageCompatibilityStatuses(
 						[drives[1]],
 						image,
+						true,
 					),
 				).to.deep.equal([
 					{
@@ -1331,6 +1313,7 @@ describe('Shared: DriveConstraints', function () {
 					constraints.getListDriveImageCompatibilityStatuses(
 						[drives[2]],
 						image,
+						true,
 					),
 				).to.deep.equal([
 					{
@@ -1345,6 +1328,7 @@ describe('Shared: DriveConstraints', function () {
 					constraints.getListDriveImageCompatibilityStatuses(
 						[drives[3]],
 						image,
+						true,
 					),
 				).to.deep.equal([
 					{
@@ -1359,6 +1343,7 @@ describe('Shared: DriveConstraints', function () {
 					constraints.getListDriveImageCompatibilityStatuses(
 						[drives[4]],
 						image,
+						true,
 					),
 				).to.deep.equal([
 					{
@@ -1373,6 +1358,7 @@ describe('Shared: DriveConstraints', function () {
 					constraints.getListDriveImageCompatibilityStatuses(
 						[drives[5]],
 						image,
+						true,
 					),
 				).to.deep.equal([
 					{
@@ -1386,7 +1372,11 @@ describe('Shared: DriveConstraints', function () {
 		describe('given multiple drives with all warnings/errors', function () {
 			it('should return all statuses', function () {
 				expect(
-					constraints.getListDriveImageCompatibilityStatuses(drives, image),
+					constraints.getListDriveImageCompatibilityStatuses(
+						drives,
+						image,
+						true,
+					),
 				).to.deep.equal([
 					{
 						message: 'Source drive',
--- a/tests/spectron/runner.spec.ts
+++ b/tests/spectron/runner.spec.ts
@@ -46,7 +46,10 @@ describe('Spectron', function () {
 			expect(bounds.height).to.be.above(0);
 			expect(bounds.width).to.be.above(0);
 			expect(await app.browserWindow.isMinimized()).to.be.false;
-			expect(await app.browserWindow.isVisible()).to.be.true;
+			expect(
+				(await app.browserWindow.isVisible()) ||
+					(await app.browserWindow.isFocused()),
+			).to.be.true;
 		});

 		it('should set a proper title', async () => {
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -108,6 +108,23 @@ function replace(test: RegExp, ...replacements: ReplacementRule[]) {
 	};
 }

+function fetchWasm(...where: string[]) {
+	const whereStr = where.map((x) => `'${x}'`).join(', ');
+	return outdent`
+		const Path = require('path');
+		let electron;
+		try {
+			// This doesn't exist in the child-writer
+			electron = require('electron');
+		} catch {
+		}
+		function appPath() {
+			return Path.isAbsolute(__dirname) ? __dirname : Path.join(electron.remote.app.getAppPath(), 'generated');
+		}
+		scriptDirectory = Path.join(appPath(), 'modules', ${whereStr}, '/');
+	`;
+}
+
 const commonConfig = {
 	mode: 'production',
 	optimization: {
@@ -193,11 +210,6 @@ const commonConfig = {
 				search: 'require(binding_path)',
 				replace: "require('./build/Release/usb_bindings.node')",
 			}),
-			// remove bindings magic from ext2fs
-			replace(/node_modules\/ext2fs\/lib\/(ext2fs|binding)\.js$/, {
-				search: "require('bindings')('bindings')",
-				replace: "require('../build/Release/bindings.node')",
-			}),
 			// remove bindings magic from mountutils
 			replace(/node_modules\/mountutils\/index\.js$/, {
 				search: outdent`
@@ -232,6 +244,18 @@ const commonConfig = {
 					return await readFile(Path.join((app || remote.app).getAppPath(), 'generated', __dirname.replace('node_modules', 'modules'), '..', 'blobs', filename));
 				`,
 			}),
+			// Use the libext2fs.wasm file in the generated folder
+			// The way to find the app directory depends on whether we run in the renderer or in the child-writer
+			// We use __dirname in the child-writer and electron.remote.app.getAppPath() in the renderer
+			replace(/node_modules\/ext2fs\/lib\/libext2fs\.js$/, {
+				search: 'scriptDirectory=__dirname+"/"',
+				replace: fetchWasm('ext2fs', 'lib'),
+			}),
+			// Same for node-crc-utils
+			replace(/node_modules\/@balena\/node-crc-utils\/crc32\.js$/, {
+				search: 'scriptDirectory=__dirname+"/"',
+				replace: fetchWasm('@balena', 'node-crc-utils'),
+			}),
 			// Copy native modules to generated folder
 			{
 				test: /\.node$/,
@@ -281,6 +305,14 @@ const guiConfigCopyPatterns = [
 		from: 'node_modules/node-raspberrypi-usbboot/blobs',
 		to: 'modules/node-raspberrypi-usbboot/blobs',
 	},
+	{
+		from: 'node_modules/ext2fs/lib/libext2fs.wasm',
+		to: 'modules/ext2fs/lib/libext2fs.wasm',
+	},
+	{
+		from: 'node_modules/@balena/node-crc-utils/crc32.wasm',
+		to: 'modules/@balena/node-crc-utils/crc32.wasm',
+	},
 ];

 if (os.platform() === 'win32') {
Author	SHA1	Message	Date
Balena CI	a0f07082f2	v1.5.112	2020-12-03 17:19:22 +02:00
bulldozer-balena[bot]	b7efa8e1f0	Merge pull request #3362 from balena-io/112 112	2020-12-03 15:17:28 +00:00
Alexis Svinartchouk	3647457bb5	Add rendition and sys-class-rgb-led to repo.yml Change-type: patch	2020-12-02 20:23:04 +01:00
Alexis Svinartchouk	2e5a39dcd8	Update sys-class-rgb-led from 2.1.0 to 2.1.1 Update sys-class-rgb-led from 2.1.0 to 2.1.1 Changelog-entry: Update sys-class-rgb-led from 2.1.0 to 2.1.1 Change-type: patch	2020-12-02 20:23:04 +01:00
Alexis Svinartchouk	edabacfb3a	Fix spectron test to work on Windows in all cases Change-type: none	2020-12-02 20:23:04 +01:00
Alexis Svinartchouk	f46176fd10	Fix layout when the featured project is not showing Changelog-entry: Fix layout when the featured project is not showing Change-type: patch	2020-12-02 20:23:04 +01:00
Alexis Svinartchouk	2158e20380	Improve flashing error handling Changelog-entry: Improve flashing error handling Change-type: patch	2020-12-02 20:23:04 +01:00
Alexis Svinartchouk	fa593e33d1	Update repo.yml to enable nested changelogs Change-type: none	2020-12-02 19:27:48 +01:00
Alexis Svinartchouk	50730bd3df	Fix imports in child-writer.ts Change-type: none	2020-12-02 19:27:48 +01:00
Alexis Svinartchouk	4e68955981	Target commit instead of branch name for sudo-prompt Change-type: none	2020-12-02 19:27:48 +01:00
Alexis Svinartchouk	3c0084d012	Fix modal content height on Windows Change-type: patch	2020-12-02 19:27:48 +01:00
Alexis Svinartchouk	8bd11a01ae	Update etcher-sdk from 5.1.5 to 5.1.10 Update etcher-sdk from 5.1.5 to 5.1.10 Changelog-entry: Update etcher-sdk from 5.1.5 to 5.1.10 Change-type: patch	2020-12-02 19:27:48 +01:00
Alexis Svinartchouk	da3a22d0f6	Set useContentSize to true so the size is the same on all platforms Changelog-entry: Set useContentSize to true so the size is the same on all platforms Change-type: patch	2020-11-24 17:10:17 +01:00
Balena CI	e708212d41	v1.5.111	2020-11-23 19:54:50 +02:00
bulldozer-balena[bot]	a5ceba8435	Merge pull request #3345 from balena-io/111 111	2020-11-23 17:52:38 +00:00
Alexis Svinartchouk	446e8e1253	Update bl Change-type: patch	2020-11-20 20:10:35 +01:00
Alexis Svinartchouk	c69b2fa053	Warn when the source drive has no partition table Changelog-entry: Warn when the source drive has no partition table Change-type: patch	2020-11-20 15:29:03 +01:00
Alexis Svinartchouk	0597c0e908	Update etcher-sdk to 5.1.5 Change-type: patch	2020-11-20 14:49:41 +01:00
Alexis Svinartchouk	af2b6bc8ca	Update typescript to 4.1.2 Change-type: patch	2020-11-20 14:45:44 +01:00
Alexis Svinartchouk	a2c7a542df	Use a different icon when no source drive is available Changelog-entry: Use a different icon when no source drive is available Change-type: patch	2020-11-20 14:45:18 +01:00
Alexis Svinartchouk	e37ae2743f	Update etcher-sdk to 5.1.3 Change-type: patch	2020-11-17 11:33:36 +01:00
Alexis Svinartchouk	644d955f08	Prevent opening more than one file selector Change-type: patch	2020-11-16 16:14:36 +01:00
Alexis Svinartchouk	e7b4f09021	Allow selecting a locked SD card as the source drive Changelog-entry: Allow selecting a locked SD card as the source drive Change-type: patch	2020-11-16 14:16:38 +01:00
Alexis Svinartchouk	1e0a6a3129	Removed disableExplicitDriveSelection setting, use autoSelectAllDrives instead Change-type: patch	2020-11-13 20:23:07 +01:00
Alexis Svinartchouk	ef3b8915d8	Update etcher-sdk to 5.1.2 Change-type: patch	2020-11-13 18:30:26 +01:00
Alexis Svinartchouk	e58cfd89c5	Add successBannerURL setting Change-type: patch	2020-11-11 13:31:04 +01:00
Alexis Svinartchouk	1c52379ee3	Add drivesOrder setting Change-type: patch	2020-11-11 13:30:54 +01:00
Alexis Svinartchouk	e2c2b40690	Remove "Validate write on success" setting Validation is always enabled, press the "skip" button to skip it. Changelog-entry: Remove "Validate write on success" setting. Validation is always enabled, press the "skip" button to skip it. Change-type: patch	2020-11-11 13:30:26 +01:00
Alexis Svinartchouk	bddb89e4a1	Update electron to v9.3.3 Changelog-entry: Update electron to v9.3.3 Change-type: patch	2020-11-11 13:30:18 +01:00
Alexis Svinartchouk	560ed91e2e	Update etcher-sdk to 5.1.1, use WASM ext2fs module Changelog-entry: Update etcher-sdk to 5.1.1, use WASM ext2fs module Change-type: patch	2020-11-11 13:29:44 +01:00
Balena CI	1f8f7ad7f8	v1.5.110	2020-11-05 13:56:29 +02:00
bulldozer-balena[bot]	a2a0f2ef41	Merge pull request #3325 from balena-io/new-success-screen-2 New success screen 2	2020-11-05 11:54:37 +00:00
Lorenzo Alberto Maria Ambrosi	40e5fb2287	Add primary colors to default flow Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-04 14:01:56 +01:00
Lorenzo Alberto Maria Ambrosi	6c49c71b3f	Remove console.log in tests Change-type: patch Changelog-entry: Remove console.log in tests Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:02:51 +01:00
Lorenzo Alberto Maria Ambrosi	deb3db0fff	Add more typings & refactor code accordingly Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:02:51 +01:00
Lorenzo Alberto Maria Ambrosi	4872fa3d6e	Fix URL not being selected with custom protocol Change-type: patch Changelog-entry: Fix URL not being selected with custom protocol Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:02:51 +01:00
Lorenzo Alberto Maria Ambrosi	640a7409ee	Add dash on table when selecting only some rows Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:02:51 +01:00
Lorenzo Alberto Maria Ambrosi	a7637ad8d4	Fix settings spacing Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:02:51 +01:00
Lorenzo Alberto Maria Ambrosi	31409c61ca	Use drive-selector's table for flash errors table Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:02:46 +01:00
Lorenzo Alberto Maria Ambrosi	e74dc9eb60	Update rendition to v18.8.3 Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:01:11 +01:00
Lorenzo Alberto Maria Ambrosi	06997fdf29	Fix zoomFactor in webviews Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:01:11 +01:00
Lorenzo Alberto Maria Ambrosi	611e659626	Add retry button to the errors modal in success screen Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-11-03 15:01:07 +01:00
Lorenzo Alberto Maria Ambrosi	e484ae9837	Cleanup after child-process is terminated Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-10-22 14:08:44 +02:00
Lorenzo Alberto Maria Ambrosi	7e7ca9524e	Add skip function to validation Change-type: patch Changelog-entry: Add skip function to validation Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-10-22 14:08:44 +02:00
Lorenzo Alberto Maria Ambrosi	db09b7440d	Rework success screen Change-type: patch Changelog-entry: Rework success screen Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>	2020-10-22 14:07:20 +02:00