check javascript heap memory; “devtools” hack

README-zhCN.md

@@ -0,0 +1,33 @@
+[English](README.md) **简体中文**
+
+# Resource Han Rounded《魔兽世界》可变字体包
+
+## 用户指南
+
+### 系统要求
+
+* 64 位 Windows、Linux 或 macOS 操作系统。
+* 64 位 “常青” 浏览器：
+  * Firefox（快速发布版和 ESR）；
+  * Edge、Chrome 等及时更新的基于 Chromium 的浏览器。
+* Firefox 需要 8 GiB 系统内存；基于 Chromium 的浏览器需要 16 GiB 系统内存。
+  * 基于 Chromium 的浏览器在 ≥ 8 GiB 系统内存的情况下可以运行，请按照此应用程序中的指示操作。
+
+说明：
+* 虽然本项目基于 Web 技术构建，但下载的 HTML 文件已经包含了所有需要的资源，使用时不需要连接网络。
+* 要启用实时预览，Firefox 必须运行在支持可变字体的操作系统上，包括 Windows 10 1809 (LTSC)、Windows 10 21H2+、macOS 10.15+、带有 FreeType 2.8+ 的 Linux。
+* 不建议使用国产双核浏览器，它们背负着沉重的历史负担，而本项目重度依赖现代 Web 技术——这注定是难以调和的矛盾。具体问题体现在：
+  * 大多数双核浏览器至今尚未发布 64 位版本；
+  * 双核浏览器为了优化内核切换，对 Chromium 进行了很多修改，难以及时跟进新版本，对现代 Web 技术的支持参差不齐；
+  * 某些浏览器倾向于追求最小内存占用，运行此应用时会频繁启动垃圾回收机制，影响性能。
+
+### 操作步骤
+
+1. Download `RHR-VF-<version>.zip` and unzip it.<br>下载 `RHR-VF-<version>.zip` 并解压。
+1. Open the HTML file with **64-bit** browser.<br>使用 **64 位**浏览器打开这个 HTML 文件。
+1. Follow the instruction to generate OTF file.<br>根据界面提示操作以生成 OTF 字体。
+1. Download the font and copy it to `World of Warcraft/_retail_/Fonts/` with proper filename.<br>下载字体文件，复制到 `World of Warcraft/_retail_/Fonts/` 并按要求重命名。
+
+## 构建此项目
+
+见[英语文档#How to Build](README.md#how-to-build)。

README.md

@@ -1,28 +1,28 @@
-# Resource Han Rounded: Variable Font Distribution for _World of Warcraft_<br>Resource Han Rounded《魔兽世界》可变字体包
+**English** [简体中文](README-zhCN.md)
 
-## How to Use<br>使用方法
+# Resource Han Rounded: Variable Font Distribution for _World of Warcraft_
 
-### System requirements<br>系统要求
+## User Guide
 
-* 8 GiB RAM.<br>8 GiB 内存。
-* 64-bit Windows, Linux or macOS.<br>64 位 Windows、Linux 或 macOS 操作系统。
-* 64-bit evergreen browser:<br>64 位 “常青” 浏览器：
-  * Chrome, Edge and other up-to-date Chromium-based browsers;<br>Chrome、Edge 等及时更新的基于 Chromium 的浏览器；
-  * Firefox (both rapid release and ESR).<br>Firefox（快速发布版和 ESR）。
+### System requirements
 
-Notes 说明
-* Although this project is based on Web technology, the downloaded HTML file is self-contained, network not required.<br>虽然本项目基于 Web 技术构建，但下载的 HTML 文件已经包含了所有需要的资源，使用时不需要连接网络。
-* To enable live preview, Firefox must be run on OS that supports variable font, including Windows 10 1809 (LTSC), Windows 10 21H2+, macOS 10.15+, Linux with FreeType 2.8+.<br>要启用实时预览，Firefox 必须运行在支持可变字体的操作系统上，包括 Windows 10 1809 (LTSC)、Windows 10 21H2+、macOS 10.15+、带有 FreeType 2.8+ 的 Linux。
-* _(This note applies only to Chinese users.)_<br>国产双核浏览器通常不是 “常青” 浏览器。
-  * 360 极速浏览器 X 21.0.1094.0 经测试会崩溃。
-  * 大多数双核浏览器至今尚未发布 64 位版本。
+* 64-bit Windows, Linux or macOS.
+* 64-bit evergreen browser:
+  * Firefox (both rapid release and ESR);
+  * Up-to-date Chromium-based browsers, such as Chrome, Edge, Opera, Vivaldi, Brave, etc.
+* 8 GiB system RAM for Firefox; 16 GiB system RAM for Chromium-based browsers.
+  * It is possible to run the app in Chromium-based browsers with ≥ 8 GiB RAM. Follow the instruction given in the app.
 
-### How to Use<br>操作步骤
+Notes:
+* Although this project is based on Web technology, the downloaded HTML file is self-contained, network not required.
+* To enable live preview, Firefox must be run on OS that supports variable font, including Windows 10 1809 (LTSC), Windows 10 21H2+, macOS 10.15+, Linux with FreeType 2.8+.
 
-1. Download `RHR-VF-<version>.zip` and unzip it.<br>下载 `RHR-VF-<version>.zip` 并解压。
-1. Open the HTML file with **64-bit** browser.<br>使用 **64 位**浏览器打开这个 HTML 文件。
-1. Follow the instruction to generate OTF file.<br>根据界面提示操作以生成 OTF 字体。
-1. Download the font and copy it to `World of Warcraft/_retail_/Fonts/` with proper filename.<br>下载字体文件，复制到 `World of Warcraft/_retail_/Fonts/` 并按要求重命名。
+### How to Use
+
+1. Download `RHR-VF-<version>.zip` and unzip it.
+1. Open the HTML file with **64-bit** browser.
+1. Follow the instruction to generate OTF file.
+1. Download the font and copy it to `World of Warcraft/_retail_/Fonts/` with proper filename.
 
 ## How to Build
 

src/index.html

@@ -20,10 +20,24 @@
 		.live-preview .card {
 			height: 100%;
 			max-height: 14em;
-			overflow: clip;
+			overflow: hidden;
 			text-align: justify;
 			hyphens: auto;
 		}
+
+		#status-pane-parent {
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+
+		#status-pane .alert {
+			margin-bottom: 0;
+			padding: .375rem .75rem;
+		}
+
+		#status-pane ol {
+			margin-bottom: 0;
+		}
 	</style>
 </head>
 
@@ -75,9 +89,11 @@ <h2 class="card-title mb-2">月神镰刀</h2>
 					</div>
 				</div>
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="status-pane">Status 运行状态</label>
-				<div class="form-control" id="status-pane"></div>
+				<div class="container-xxl form-control" id="status-pane-parent">
+					<div class="row" id="status-pane"></div>
+				</div>
 			</div>
 		</form>
 
@@ -130,6 +146,7 @@ <h2 class="card-title mb-2">月神镰刀</h2>
 		previewWeightAndRoundness();
 
 		let worker;
+		let requestDevTools = false;
 
 		function clearDownload() {
 			downloadButtonA.removeAttribute('href');
@@ -146,8 +163,37 @@ <h2 class="card-title mb-2">月神镰刀</h2>
 		}
 
 		function setStatus(klass, textEn, textZh) {
-			statusPane.className = `form-control alert alert-${klass}`;
-			statusPane.innerText = textEn + '\n' + textZh;
+			statusPane.innerHTML = `<div class="col-lg alert alert-${klass}">${textEn}</div><div class="col-lg alert alert-${klass}">${textZh}</div>`;
+		}
+
+		function checkHeapSize() {
+			if (typeof performance.memory != 'object') {
+				// performance.memory is Chromium-only. notice user on non-Chromium browsers.
+				setStatus('warning', 'Note: unknown memory limit. This app requires approx 4 GiB JavaScript heap memory.', '提示：无法检测内存限制。此应用程序大约需要 4 GiB JavaScript 堆内存。');
+				return true;
+			}
+			const memoryInGibibyte = performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024;
+			const memoryForDisplay = memoryInGibibyte.toFixed(2);
+			if (memoryInGibibyte < 2) {
+				// definitely not work
+				// 64-bit browser reports somewhat > 2 GiB (generally 2072 MiB or 2.19×10⁹ bytes at least)
+				setStatus('danger', `错误: insufficient memory. Your browser provides ${memoryForDisplay} GiB JavaScript heap memory, but app requires approx 4 GiB memory.`, `错误：内存不足。浏览器 JavaScript 堆内存限制为 ${memoryForDisplay} GiB，但此应用程序大约需要 4 GiB 内存。`);
+				return false;
+			}
+			if (memoryInGibibyte < 3.5) {
+				// most hard piece
+				// with devtools on, the JavaScript heap can be increased
+				setStatus(
+					'warning',
+					`Note: possibly insufficient memory. The app requires approx 4 GiB memory, but your browser reports its memory limit is ${memoryForDisplay} GiB.<br>You can try running this app with developer tools on.<ol><li>Press <code>F12</code> to open developer tools.</li><li>Switch to “Console” tab and excute <code>enableRunButton()</code> to unlock the “Run” button.</li><li>Run the app.</li><li>When the app reaches the memory limit, the browser will pause it, and the developer tool switches to <b>“Sources” tab</b>.</li><li>Press <code>F8</code> to resume.</li></ol>`,
+					`提示：内存可能不足。此应用程序大约需要 4 GiB JavaScript 堆内存，但浏览器报告的内存限制为 ${memoryForDisplay} GiB。<br>您可以尝试在打开开发者工具的情况下运行此程序。<ol><li>按下 <code>F12</code> 打开开发者工具；</li><li>切换到 “控制台”（Console）选项卡并执行 <code>enableRunButton()</code> 解锁 “开始运行” 按钮；</li><li>开始运行此程序；</li><li>当此程序消耗的内存达到限制时，浏览器会暂停运行此程序，开发者工具会切换到 <b>“源代码”（Sources，或误译作 “来源”）选项卡</b>；</li><li>按下 <code>F8</code> 恢复运行。</li></ol>`
+				);
+				requestDevTools = true;
+				return false;
+			}
+			// with enough heap memory it works
+			setStatus('success', 'Ready.', '准备就绪。');
+			return true;
 		}
 
 		function setupWorker() {
@@ -171,22 +217,24 @@ <h2 class="card-title mb-2">月神镰刀</h2>
 				const status = data.status;
 				switch (status) {
 					case 'load-font':
-						setStatus('primary', '1/5: loading Resource Han Rounded...', '1/5：正在加载 Resource Han Rounded……');
+						if (requestDevTools)
+							setStatus('primary', '1/4: loading Resource Han Rounded...<br>Note that the app cannot prompt on pause. Please watch the developer tool yourself and press <code>F8</code> when it switches to “Sources” tab', '1/4：正在加载 Resource Han Rounded……<br>注意，程序无法在暂停执行时给出提示，请您自行关注开发者工具，在切换到 “源代码”（Sources，或误译作 “来源”）选项卡后按 <code>F8</code> 继续。');
+						else
+							setStatus('primary', '1/4: loading Resource Han Rounded...', '1/4：正在加载 Resource Han Rounded……');
 						break;
 					case 'instance-font':
-						setStatus('primary', '2/5: instancing Resource Han Rounded...', '2/5：正在提取单一样式……');
+						setStatus('primary', '2/4: instancing Resource Han Rounded...', '2/4：正在提取单一样式……');
 						break;
 					case 'generate-metadata':
-						setStatus('primary', '3/5: generating metadata for your instance...', '3/5：正在生成元数据……');
 						break;
 					case 'save-otf':
-						setStatus('primary', '4/5: generating OTF file...', '4/5：正在生成 OTF 文件……');
+						setStatus('primary', '3/4: generating OTF file...', '3/4：正在生成 OTF 文件……');
 						break;
 					case 'done':
 						const url = data.url;
 						showDownload(url, `Nowar-ResourceHanRoundedSC-R${roundness}W${weight}.otf`);
 						const timeElapsed = (Date.now() - timeBegin) / 1000;
-						setStatus('success', `5/5: success. Download link ready. Time elapsed: ${timeElapsed} s.`, `5/5：成功，下载链接已准备就绪。耗时 ${timeElapsed} 秒。`);
+						setStatus('success', `4/4: success. Download link ready. Time elapsed: ${timeElapsed} s.`, `4/4：成功，下载链接已准备就绪。耗时 ${timeElapsed} 秒。`);
 						disableTerminateButton();
 						enableRunButton();
 						break;
@@ -225,8 +273,7 @@ <h2 class="card-title mb-2">月神镰刀</h2>
 		}
 
 		setupWorker();
-		enableRunButton();
-		setStatus('success', 'Ready.', '准备就绪。');
+		checkHeapSize() && enableRunButton();
 	</script>
 </body>