Imperat/index.html

## index.html
<!DOCTYPE html>
<html>
  <style>
    .memory-indicator {
      background: orange;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      position: absolute;
    }
  </style>
  <body class="memory-indicator">
    <div>Memory peak usage: <strong id="peak">0</strong></div>
    <div>Current usage: <strong id="current">0</strong></div>
    <script src="./renderer.js"></script>
  </body>
</html>

## main.js
const { app, BrowserWindow, BrowserView } = require('electron')
const path = require('path');

const WINDOW_HEIGHT = 600;
const WINDOW_WIDTH = 800;

const VIEW_HEIGHT = 500;
const VIEW_WIDTH = 800;
const VIEW_TOP = 100;
const VIEW_LEFT = 0;

const HEADER_VIEW_LEFT = 0;
const HEADER_VIEW_TOP = 0;
const HEADER_HEIGHT = 100;
const HEADER_WIDTH = 800;

const createBrowserView = async (url) => {
	const browserView = new BrowserView();
	browserView.webContents.loadURL(url);
	browserView.setAutoResize({
    	width: true,
    	height: true,
    	horizontal: false,
    	vertical: false,
  	});

	return browserView;
};

const urls = [
	'https://github.com',
	'https://www.youtube.com/',
	'https://en.wikipedia.org/wiki/Theodicy',
	'https://en.wikipedia.org/wiki/Main_Page',
	'https://www.electronjs.org/',
	'https://www.microsoft.com/en-au/',
	'https://web.archive.org/',
	'https://www.nytimes.com/international/',
	'https://www.reddit.com/',
	'https://www.yandex.ru/',
	'https://www.twitter.com',
	'https://www.gov.za/',
	'https://www.jetbrains.com/',
	'https://journal.tinkoff.ru/',
	'https://pikabu.ru/',
	'https://melbournecityfc.com.au/',
	'https://about.gitlab.com',
];


const HAVE_ALL_VIEWS_ATTACHED = 0;
const REATTACH_EVERY_TIME = 1;
const MOVE_OUT_OF_BOUNDS = 2;

const CURRENT_EXPERIMENT = HAVE_ALL_VIEWS_ATTACHED;

const getMemoryGPUPeakUsage = () => {
	const metric = app.getAppMetrics().find(x => x.type === 'GPU');
	return {
		peak: (metric?.memory?.peakWorkingSetSize || 0) / 1024,
		current: (metric?.memory?.workingSetSize || 0) / 1024,
	};
};

app.whenReady().then(async () => {
	const memoryInfoBrowserView = new BrowserView({
		webPreferences: {
      		preload: path.join(__dirname, 'preload.js'),
    	}
	});
	memoryInfoBrowserView.setAutoResize({
		width: true,
		height: false,
		horizontal: false,
		vertical: false,
	});
	memoryInfoBrowserView.webContents.loadFile('./index.html');

	const browserViews = await Promise.all(urls.map(createBrowserView));
	console.log('all browser views are created');

	const browserWindow = new BrowserWindow({
		width: WINDOW_WIDTH,
		height: WINDOW_HEIGHT,
		background: 'black',
	});

	browserWindow.addBrowserView(memoryInfoBrowserView);
	memoryInfoBrowserView.setBounds({
		x: HEADER_VIEW_LEFT, y: HEADER_VIEW_TOP, width: HEADER_WIDTH, height: HEADER_HEIGHT,
	});

	let currentBrowserViewIndex = 0;

	const getCurrentView = () => {
		return browserViews[currentBrowserViewIndex];
	};

	const getNextView = () => {
		currentBrowserViewIndex = (currentBrowserViewIndex + 1) % browserViews.length;
		return browserViews[currentBrowserViewIndex];
	};

	if (CURRENT_EXPERIMENT === HAVE_ALL_VIEWS_ATTACHED) {
		browserWindow.setTitle('all browserViews are attached');
		browserViews.forEach((browserView) => {
			browserWindow.addBrowserView(browserView);
			browserView.setBounds(
				{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
			);
		});

		setInterval(() => {
			const nextView = getNextView();
			browserWindow.setTopBrowserView(nextView);
		}, 100);

		setInterval(() => {
			memoryInfoBrowserView.webContents.send('update-memory-data', getMemoryGPUPeakUsage());
		}, 150);
	}

	if (CURRENT_EXPERIMENT === REATTACH_EVERY_TIME) {
		browserWindow.setTitle('only current browserView is attached');
		const currentView = getCurrentView();
		browserWindow.addBrowserView(currentView);
		currentView.setBounds(
			{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
		);
		setInterval(() => {
			const currentView = getCurrentView();
			const nextView = getNextView();
			browserWindow.addBrowserView(nextView);
			nextView.setBounds(
				{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
			);
			browserWindow.removeBrowserView(currentView);
		}, 100);

		setInterval(() => {
			memoryInfoBrowserView.webContents.send('update-memory-data', getMemoryGPUPeakUsage());
		}, 150);
	}

	if (CURRENT_EXPERIMENT === MOVE_OUT_OF_BOUNDS) {
		browserWindow.setTitle('hack with moving bounds');
		browserViews.forEach((browserView) => {
			browserWindow.addBrowserView(browserView);
			browserView.setBounds(
				{ x: VIEW_LEFT + WINDOW_WIDTH, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
			);
		});

		setInterval(() => {
			const currentView = getCurrentView();

			currentView.setBounds(
				{ x: VIEW_LEFT + WINDOW_WIDTH, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
			);

			const nextView = getNextView();
			browserWindow.setTopBrowserView(nextView);
			nextView.setBounds(
				{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
			);
		}, 100);

		setInterval(() => {
			memoryInfoBrowserView.webContents.send('update-memory-data', getMemoryGPUPeakUsage());
		}, 150);
	}
});


## package.json
{
  "name": "fuzzy-weakness-foresee-rowpg",
  "productName": "fuzzy-weakness-foresee-rowpg",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "leliakin",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "23.0.0-alpha.1"
  }
}

## preload.js
const { contextBridge, ipcRenderer } = require('electron')

console.log('ELELELELEL');
contextBridge.exposeInMainWorld('electronAPI', {
  handleMemoryData: (callback) => ipcRenderer.on('update-memory-data', callback),
});

## renderer.js
const peakCounter = document.getElementById('peak');
const currentCounter = document.getElementById('current');

window.electronAPI.handleMemoryData((event, value) => {
  peakCounter.innerText = value.peak;
  currentCounter.innerText = value.current;
});
	<!DOCTYPE html>
	<html>
	<style>
	.memory-indicator {
	background: orange;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: absolute;
	}
	</style>
	<body class="memory-indicator">
	<div>Memory peak usage: <strong id="peak">0</strong></div>
	<div>Current usage: <strong id="current">0</strong></div>
	<script src="./renderer.js"></script>
	</body>
	</html>
	const { app, BrowserWindow, BrowserView } = require('electron')
	const path = require('path');

	const WINDOW_HEIGHT = 600;
	const WINDOW_WIDTH = 800;

	const VIEW_HEIGHT = 500;
	const VIEW_WIDTH = 800;
	const VIEW_TOP = 100;
	const VIEW_LEFT = 0;

	const HEADER_VIEW_LEFT = 0;
	const HEADER_VIEW_TOP = 0;
	const HEADER_HEIGHT = 100;
	const HEADER_WIDTH = 800;

	const createBrowserView = async (url) => {
	const browserView = new BrowserView();
	browserView.webContents.loadURL(url);
	browserView.setAutoResize({
	width: true,
	height: true,
	horizontal: false,
	vertical: false,
	});

	return browserView;
	};

	const urls = [
	'https://github.com',
	'https://www.youtube.com/',
	'https://en.wikipedia.org/wiki/Theodicy',
	'https://en.wikipedia.org/wiki/Main_Page',
	'https://www.electronjs.org/',
	'https://www.microsoft.com/en-au/',
	'https://web.archive.org/',
	'https://www.nytimes.com/international/',
	'https://www.reddit.com/',
	'https://www.yandex.ru/',
	'https://www.twitter.com',
	'https://www.gov.za/',
	'https://www.jetbrains.com/',
	'https://journal.tinkoff.ru/',
	'https://pikabu.ru/',
	'https://melbournecityfc.com.au/',
	'https://about.gitlab.com',
	];


	const HAVE_ALL_VIEWS_ATTACHED = 0;
	const REATTACH_EVERY_TIME = 1;
	const MOVE_OUT_OF_BOUNDS = 2;

	const CURRENT_EXPERIMENT = HAVE_ALL_VIEWS_ATTACHED;

	const getMemoryGPUPeakUsage = () => {
	const metric = app.getAppMetrics().find(x => x.type === 'GPU');
	return {
	peak: (metric?.memory?.peakWorkingSetSize \|\| 0) / 1024,
	current: (metric?.memory?.workingSetSize \|\| 0) / 1024,
	};
	};

	app.whenReady().then(async () => {
	const memoryInfoBrowserView = new BrowserView({
	webPreferences: {
	preload: path.join(__dirname, 'preload.js'),
	}
	});
	memoryInfoBrowserView.setAutoResize({
	width: true,
	height: false,
	horizontal: false,
	vertical: false,
	});
	memoryInfoBrowserView.webContents.loadFile('./index.html');

	const browserViews = await Promise.all(urls.map(createBrowserView));
	console.log('all browser views are created');

	const browserWindow = new BrowserWindow({
	width: WINDOW_WIDTH,
	height: WINDOW_HEIGHT,
	background: 'black',
	});

	browserWindow.addBrowserView(memoryInfoBrowserView);
	memoryInfoBrowserView.setBounds({
	x: HEADER_VIEW_LEFT, y: HEADER_VIEW_TOP, width: HEADER_WIDTH, height: HEADER_HEIGHT,
	});

	let currentBrowserViewIndex = 0;

	const getCurrentView = () => {
	return browserViews[currentBrowserViewIndex];
	};

	const getNextView = () => {
	currentBrowserViewIndex = (currentBrowserViewIndex + 1) % browserViews.length;
	return browserViews[currentBrowserViewIndex];
	};

	if (CURRENT_EXPERIMENT === HAVE_ALL_VIEWS_ATTACHED) {
	browserWindow.setTitle('all browserViews are attached');
	browserViews.forEach((browserView) => {
	browserWindow.addBrowserView(browserView);
	browserView.setBounds(
	{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
	);
	});

	setInterval(() => {
	const nextView = getNextView();
	browserWindow.setTopBrowserView(nextView);
	}, 100);

	setInterval(() => {
	memoryInfoBrowserView.webContents.send('update-memory-data', getMemoryGPUPeakUsage());
	}, 150);
	}

	if (CURRENT_EXPERIMENT === REATTACH_EVERY_TIME) {
	browserWindow.setTitle('only current browserView is attached');
	const currentView = getCurrentView();
	browserWindow.addBrowserView(currentView);
	currentView.setBounds(
	{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
	);
	setInterval(() => {
	const currentView = getCurrentView();
	const nextView = getNextView();
	browserWindow.addBrowserView(nextView);
	nextView.setBounds(
	{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
	);
	browserWindow.removeBrowserView(currentView);
	}, 100);

	setInterval(() => {
	memoryInfoBrowserView.webContents.send('update-memory-data', getMemoryGPUPeakUsage());
	}, 150);
	}

	if (CURRENT_EXPERIMENT === MOVE_OUT_OF_BOUNDS) {
	browserWindow.setTitle('hack with moving bounds');
	browserViews.forEach((browserView) => {
	browserWindow.addBrowserView(browserView);
	browserView.setBounds(
	{ x: VIEW_LEFT + WINDOW_WIDTH, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
	);
	});

	setInterval(() => {
	const currentView = getCurrentView();

	currentView.setBounds(
	{ x: VIEW_LEFT + WINDOW_WIDTH, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
	);

	const nextView = getNextView();
	browserWindow.setTopBrowserView(nextView);
	nextView.setBounds(
	{ x: VIEW_LEFT, y: VIEW_TOP, width: VIEW_WIDTH, height: VIEW_HEIGHT },
	);
	}, 100);

	setInterval(() => {
	memoryInfoBrowserView.webContents.send('update-memory-data', getMemoryGPUPeakUsage());
	}, 150);
	}
	});
	{
	"name": "fuzzy-weakness-foresee-rowpg",
	"productName": "fuzzy-weakness-foresee-rowpg",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "leliakin",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "23.0.0-alpha.1"
	}
	}
	const { contextBridge, ipcRenderer } = require('electron')

	console.log('ELELELELEL');
	contextBridge.exposeInMainWorld('electronAPI', {
	handleMemoryData: (callback) => ipcRenderer.on('update-memory-data', callback),
	});
	const peakCounter = document.getElementById('peak');
	const currentCounter = document.getElementById('current');

	window.electronAPI.handleMemoryData((event, value) => {
	peakCounter.innerText = value.peak;
	currentCounter.innerText = value.current;
	});