fixes for #79, #80 and other small Safari visual issues

_cache_service_worker.js

@@ -6,7 +6,7 @@
 */
 
 var PRECACHE_ID = 'rom-patcher-js';
-var PRECACHE_VERSION = 'v30rc4b';
+var PRECACHE_VERSION = 'v30rc5';
 var PRECACHE_URLS = [
 	'/RomPatcher.js/', '/RomPatcher.js/index.html',
 	'/RomPatcher.js/manifest.json',

index.html

@@ -151,7 +151,7 @@
 		<button id="button-settings" class="btn-transparent"><img src="./webapp/icon_settings.svg" loading="lazy" class="icon settings" /> <span data-localize="yes">Settings</span></button>
 	</div>
 
-	Rom Patcher JS <small>v3.0 <a style="color:rgb(255, 197, 7)" href="legacy/" rel="nofollow">RC4</a></small> by <a href="/">Marc Robledo</a>
+	Rom Patcher JS <small>v3.0 <a style="color:rgb(255, 197, 7)" href="legacy/" rel="nofollow">RC5</a></small> by <a href="/">Marc Robledo</a>
 	<br />
 	<img src="./webapp/icon_github.svg" loading="lazy" class="icon github" /> <a href="https://github.com/marcrobledo/RomPatcher.js/" target="_blank">See on GitHub</a>
 	<img src="./webapp/icon_heart.svg" loading="lazy" class="icon heart" /> <a href="https://www.paypal.me/marcrobledo/5" target="_blank" rel="nofollow">Donate</a>

index_template.html

@@ -26,7 +26,11 @@
 					outputName: 'Game (English v1.0)', //patched ROM name
 				});
 			} catch (err) {
-				document.getElementById('rom-patcher-container').innerHTML = err.message;
+				var message = err.message;
+				if (/incompatible browser/i.test(message) || /variable RomPatcherWeb/i.test(message))
+					message = 'Your browser is outdated and it is not compatible with this app.';
+
+				document.getElementById('rom-patcher-container').innerHTML = message;
 				document.getElementById('rom-patcher-container').style.color = 'red';
 			}
 		});

rom-patcher-js/RomPatcher.webapp.js

@@ -71,6 +71,8 @@ const RomPatcherWeb = (function () {
 	};
 	var romFile, patch;
 
+	const isBrowserSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); /* Safari userAgent does not include word Chrome, Chrome includes both! */
+	const isBrowserMobile = /Mobile(\/\S+)? /.test(navigator.userAgent);
 
 	/* embeded patches */
 	var currentEmbededPatches = null;
@@ -347,8 +349,7 @@ const RomPatcherWeb = (function () {
 			return fallback || 0;
 		},
 		setFakeFile: function (id, fileName) {
-			const isBrowserSafari = /Safari/i.test(navigator.userAgent); /* safari does not show fake file name: https://pqina.nl/blog/set-value-to-file-input/#but-safari */
+			if (!isBrowserSafari && document.getElementById('rom-patcher-input-file-' + id)) { /* safari does not show fake file name: https://pqina.nl/blog/set-value-to-file-input/#but-safari */
-			if (!isBrowserSafari && document.getElementById('rom-patcher-input-file-' + id)) {
 				try {
 					/* add a fake file to the input file, so it shows the chosen file name */
 					const fakeFile = new File(new Uint8Array(0), fileName);
@@ -575,9 +576,19 @@ const RomPatcherWeb = (function () {
 		const htmlInputFileRom = htmlElements.get('input-file-rom');
 		if (htmlInputFileRom && htmlInputFileRom.tagName === 'INPUT' && htmlInputFileRom.type === 'file') {
 			htmlInputFileRom.addEventListener('change', function (evt) {
-				htmlElements.disableAll();
+				if (this.files && this.files.length) {
-				new BinFile(this, RomPatcherWeb.provideRomFile);
+					htmlElements.disableAll();
+					new BinFile(this, RomPatcherWeb.provideRomFile);
+				} else if (romFile) {
+					/* Webkit browsers trigger the change event when user cancels file selection and resets the input file value */
+					/* since we keep a cached copy of ROM file as a BinFile, we do not lose data but the input text, so we try to set it back */
+					/* Firefox keeps the previously selected file and does not trigger the change event */
+					htmlElements.setFakeFile('rom', romFile.fileName);
+				}
 			});
+
+			if (!isBrowserSafari)
+				htmlInputFileRom.classList.add('no-file-selector-button');
 		} else {
 			console.error('Rom Patcher JS: input#rom-patcher-input-file-rom[type=file] not found');
 			throw new Error('Rom Patcher JS: input#rom-patcher-input-file-rom[type=file] not found');
@@ -605,13 +616,29 @@ const RomPatcherWeb = (function () {
 			const htmlInputFilePatch = htmlElements.get('input-file-patch');
 			if (htmlInputFilePatch && htmlInputFilePatch.tagName === 'INPUT' && htmlInputFilePatch.type === 'file') {
 				htmlInputFilePatch.addEventListener('change', function (evt) {
-					htmlElements.disableAll();
+					if (this.files && this.files.length) {
-					new BinFile(this, RomPatcherWeb.providePatchFile);
+						htmlElements.disableAll();
+						new BinFile(this, RomPatcherWeb.providePatchFile);
+					} else if (patch && patch._originalPatchFile) {
+						/* Webkit browsers trigger the change event when user cancels file selection and resets the input file value */
+						/* since we keep a cached copy of patch file as a BinFile, we do not lose data but the input text, so we try to set it back */
+						/* Firefox keeps the previously selected file and does not trigger the change event */
+						htmlElements.setFakeFile('patch', patch._originalPatchFile.fileName);
+					}
 				});
+
+				if (!isBrowserSafari)
+					htmlInputFilePatch.classList.add('no-file-selector-button');
 			} else {
 				console.error('Rom Patcher JS: input#rom-patcher-input-file-patch[type=file] not found');
 				throw new Error('Rom Patcher JS: input#rom-patcher-input-file-patch[type=file] not found');
 			}
+
+			/* dirty fix for iOS Safari, which only supports mimetypes in <input> accept attribute */
+			/* accept attribute compatibility: https://caniuse.com/input-file-accept */
+			if (isBrowserSafari && isBrowserMobile) {
+				htmlInputFilePatch.accept = 'application/zip, application/octet-stream, application/x-zip-compressed, multipart/x-zip';
+			}
 		}
 		const htmlButtonApply = htmlElements.get('button-apply');
 		if (htmlButtonApply && htmlButtonApply.tagName === 'BUTTON') {
@@ -1481,6 +1508,8 @@ const ZIPManager = (function (romPatcherWeb) {
 const PatchBuilderWeb = (function (romPatcherWeb) {
 	var originalRom, modifiedRom;
 
+	const isBrowserSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); /* Safari userAgent does not include word Chrome, Chrome includes both! */
+
 	/* localization */
 	const _ = function (str) {
 		const language = romPatcherWeb.getCurrentLanguage();
@@ -1561,20 +1590,24 @@ const PatchBuilderWeb = (function (romPatcherWeb) {
 				console.error('Patch Builder JS: input[type=file]#patch-builder-input-file-modified not found');
 				throw new Error('Patch Builder JS: input[type=file]#patch-builder-input-file-modified not found');
 			}
+			if (!isBrowserSafari) {
+				document.getElementById('patch-builder-input-file-original').classList.add('no-file-selector-button');
+				document.getElementById('patch-builder-input-file-modified').classList.add('no-file-selector-button');
+			}
 
 			webWorkerCreate = new Worker(ROM_PATCHER_JS_PATH + 'RomPatcher.webworker.create.js');
 			webWorkerCreate.onmessage = event => { // listen for events from the worker
 				//retrieve arraybuffers back from webworker
 				originalRom._u8array = event.data.originalRomU8Array;
 				modifiedRom._u8array = event.data.modifiedRomU8Array;
-		
+
 				_setElementsStatus(true);
 				_setCreateButtonSpinner(false);
-		
+
 				const patchFile = new BinFile(event.data.patchFileU8Array.buffer);
 				patchFile.fileName = modifiedRom.getName() + '.' + document.getElementById('patch-builder-select-patch-type').value;
 				patchFile.save();
-		
+
 				_setToastError();
 			};
 			webWorkerCreate.onerror = event => { // listen for events from the worker
@@ -1586,16 +1619,18 @@ const PatchBuilderWeb = (function (romPatcherWeb) {
 			document.getElementById('patch-builder-button-create').disabled = true;
 
 			document.getElementById('patch-builder-input-file-original').addEventListener('change', function () {
-				_setElementsStatus(false);
+				if (this.files && this.files.length) {
-				this.classList.remove('empty');
+					_setElementsStatus(false);
-				originalRom = new BinFile(this.files[0], function (evt) {
+					this.classList.remove('empty');
-					_setElementsStatus(true);
+					originalRom = new BinFile(this.files[0], function (evt) {
+						_setElementsStatus(true);
 
-					if (RomPatcher.isRomTooBig(originalRom))
+						if (RomPatcher.isRomTooBig(originalRom))
-						_setToastError(_('Using big files is not recommended'), 'warning');
+							_setToastError(_('Using big files is not recommended'), 'warning');
-					else if (ZIPManager.isZipFile(originalRom))
+						else if (ZIPManager.isZipFile(originalRom))
-						_setToastError(_('Patch creation is not compatible with zipped ROMs'), 'warning');
+							_setToastError(_('Patch creation is not compatible with zipped ROMs'), 'warning');
-				});
+					});
+				}
 			});
 			document.getElementById('patch-builder-input-file-modified').addEventListener('change', function () {
 				_setElementsStatus(false);

rom-patcher-js/style.css

@@ -152,7 +152,7 @@
 	padding: 6px 10px
 }
 
-#rom-patcher-container input[type=file]::file-selector-button {
+#rom-patcher-container input[type=file].no-file-selector-button::file-selector-button {
 	display: none
 }
 

webapp/style.css

@@ -213,7 +213,7 @@ input[type=checkbox].styled:focus:not(:disabled){
 #patch-builder-container input[type=file]
 {width:100%}
 input[type=file]{padding:6px 10px}
-input[type=file]::file-selector-button{display:none}
+input[type=file].no-file-selector-button::file-selector-button{display:none}
 select{
 	padding:6px 18px 6px 10px;
 	-webkit-appearance:none;

webapp/webapp.js

@@ -130,7 +130,7 @@ window.addEventListener('load', function (evt) {
 		RomPatcherWeb.initialize(initialSettings);
 	} catch (err) {
 		var message = err.message;
-		if (/incompatible browser/i.test(message))
+		if (/incompatible browser/i.test(message) || /variable RomPatcherWeb/i.test(message))
 			message = 'Your browser is outdated and it is not compatible with the latest version of Rom Patcher JS.<br/><a href="legacy/">Try the legacy version</a>';
 
 		document.getElementById('rom-patcher-container').innerHTML = message;