Swap logo with JS instead of CSS

PVEDiscordDark/js/PVEDiscordDark.js

@@ -1,135 +1,176 @@
-Proxmox.panel.GaugeWidget.prototype.backgroundColor = '#2C2F33';
+const swapLogo = async function() {
-Proxmox.panel.GaugeWidget.prototype.criticalColor = '#f04747';
+	const imgElements = document.getElementsByTagName('img');
-Proxmox.panel.GaugeWidget.prototype.warningColor = '#faa61a';
+	var found = false;
-Proxmox.panel.GaugeWidget.prototype.defaultColor = '#7289DA';
+	for (var i = 0; i< imgElements.length; i++) {
-Proxmox.panel.GaugeWidget.prototype.items[1].series[0].colors[0] = '#2C2F33';
+		var source = imgElements[i].src;
-
+		if (source.includes('proxmox_logo.png')) {
-PVE.window.BackupConfig.prototype.items.style['background-color'] = '#23272a';
+			found = true;
-PVE.DiskSmartWindow.prototype.items[1].style['background-color'] = '#23272a';
+			imgElements[i].parentElement.parentElement.style.background = '#23272A';
-PVE.window.TFAEdit.prototype.items[0].items[0].items[1].style["background-color"] = 'transparent';
+			imgElements[i].setAttribute('height', '34px');
-
+			imgElements[i].setAttribute('width', '177px');
-
+			imgElements[i].setAttribute('src', '/pve2/images/dd_logo.png');
-PVE.node.Summary.prototype.showVersions = function() {
+		}
-	var me = this;
+	}
-	var nodename = me.pveSelNode.data.node;
+	if (!found) {
-
+		await new Promise(resolve => setTimeout(resolve, 60));
-	var view = Ext.createWidget('component', {
+		await swapLogo();
-	    autoScroll: true,
+	};
-	    padding: 5,
+};
-	    style: {
-		'background-color': '#23272a',
-		'white-space': 'pre',
-		'font-family': 'monospace'
-	    }
-	});
-
-	var win = Ext.create('Ext.window.Window', {
-	    title: gettext('Package versions'),
-	    width: 600,
-	    height: 400,
-	    layout: 'fit',
-	    modal: true,
-	    items: [ view ]
-	});
-
-	Proxmox.Utils.API2Request({
-	    waitMsgTarget: me,
-	    url: "/nodes/" + nodename + "/apt/versions",
-	    method: 'GET',
-	    failure: function(response, opts) {
-		win.close();
-		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-	    },
-	    success: function(response, opts) {
-		win.show();
-		var text = '';
-		Ext.Array.each(response.result.data, function(rec) {
-		    var version = "not correctly installed";
-		    var pkg = rec.Package;
-		    if (rec.OldVersion && rec.CurrentState === 'Installed') {
-			version = rec.OldVersion;
-		    }
-		    if (rec.RunningKernel) {
-			text += pkg + ': ' + version + ' (running kernel: ' +
-			    rec.RunningKernel + ')\n';
-		    } else if (rec.ManagerVersion) {
-			text += pkg + ': ' + version + ' (running version: ' +
-			    rec.ManagerVersion + ')\n';
-		    } else {
-			text += pkg + ': ' + version + '\n';
-		    }
-		});
 
-		view.update(Ext.htmlEncode(text));
+function patchGaugeWidget() {
-	    }
+	Proxmox.panel.GaugeWidget.prototype.backgroundColor = '#2C2F33';
-	});
+	Proxmox.panel.GaugeWidget.prototype.criticalColor = '#f04747';
-    }
+	Proxmox.panel.GaugeWidget.prototype.warningColor = '#faa61a';
+	Proxmox.panel.GaugeWidget.prototype.defaultColor = '#7289DA';
+	Proxmox.panel.GaugeWidget.prototype.items[1].series[0].colors[0] = '#2C2F33';
+};
 
-PVE.node.Subscription.prototype.showReport = function() {
+function patchBackupConfig() {
-	var me = this;
+	PVE.window.BackupConfig.prototype.items.style['background-color'] = '#23272a';
+};
 
-	var getReportFileName = function() {
+function patchDiskSmartWindow() {
-	    var now = Ext.Date.format(new Date(), 'D-d-F-Y-G-i');
+	PVE.DiskSmartWindow.prototype.items[1].style['background-color'] = '#23272a';
-	    return `${me.nodename}-pve-report-${now}.txt`;
+}
-	};
+
+function patchTFAEdit() {
+	PVE.window.TFAEdit.prototype.items[0].items[0].items[1].style["background-color"] = 'transparent';
+}
+
+function patchSummary() {
+	// Nothing malicious is done here. The component responsible for the color is residing inside a function, and we cannot just change a functions private variable, so we are overwriting the function with a copy of itself (with changed component color).
+	PVE.node.Summary.prototype.showVersions = function() {
+		var me = this;
+		var nodename = me.pveSelNode.data.node;
+
+		var view = Ext.createWidget('component', {
+			autoScroll: true,
+			padding: 5,
+			style: {
+			'background-color': '#23272a',
+			'white-space': 'pre',
+			'font-family': 'monospace'
+			}
+		});
+
+		var win = Ext.create('Ext.window.Window', {
+			title: gettext('Package versions'),
+			width: 600,
+			height: 400,
+			layout: 'fit',
+			modal: true,
+			items: [ view ]
+		});
+
+		Proxmox.Utils.API2Request({
+			waitMsgTarget: me,
+			url: "/nodes/" + nodename + "/apt/versions",
+			method: 'GET',
+			failure: function(response, opts) {
+			win.close();
+			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+			},
+			success: function(response, opts) {
+			win.show();
+			var text = '';
+			Ext.Array.each(response.result.data, function(rec) {
+				var version = "not correctly installed";
+				var pkg = rec.Package;
+				if (rec.OldVersion && rec.CurrentState === 'Installed') {
+				version = rec.OldVersion;
+				}
+				if (rec.RunningKernel) {
+				text += pkg + ': ' + version + ' (running kernel: ' +
+					rec.RunningKernel + ')\n';
+				} else if (rec.ManagerVersion) {
+				text += pkg + ': ' + version + ' (running version: ' +
+					rec.ManagerVersion + ')\n';
+				} else {
+				text += pkg + ': ' + version + '\n';
+				}
+			});
 
-	var view = Ext.createWidget('component', {
+			view.update(Ext.htmlEncode(text));
-	    itemId: 'system-report-view',
-	    scrollable: true,
-	    style: {
-		'background-color': '#23272a',
-		'white-space': 'pre',
-		'font-family': 'monospace',
-		padding: '5px',
-	    },
-	});
-
-	var reportWindow = Ext.create('Ext.window.Window', {
-	    title: gettext('System Report'),
-	    width: 1024,
-	    height: 600,
-	    layout: 'fit',
-	    modal: true,
-	    buttons: [
-		'->',
-		{
-		    text: gettext('Download'),
-		    handler: function() {
-			var fileContent = Ext.String.htmlDecode(reportWindow.getComponent('system-report-view').html);
-			var fileName = getReportFileName();
-
-			// Internet Explorer
-			if (window.navigator.msSaveOrOpenBlob) {
-			    navigator.msSaveOrOpenBlob(new Blob([fileContent]), fileName);
-			} else {
-			    var element = document.createElement('a');
-			    element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
-			      encodeURIComponent(fileContent));
-			    element.setAttribute('download', fileName);
-			    element.style.display = 'none';
-			    document.body.appendChild(element);
-			    element.click();
-			    document.body.removeChild(element);
 			}
-		    },
+		});
-		},
+		}
-	    ],
+}
-	    items: view,
+
-	});
+function patchSubscription() {
-
+	// Nothing malicious is done here. The component responsible for the color is residing inside a function, and we cannot just change a functions private variable, so we are overwriting the function with a copy of itself (with changed component color).
-	Proxmox.Utils.API2Request({
+	PVE.node.Subscription.prototype.showReport = function() {
-	    url: '/api2/extjs/nodes/' + me.nodename + '/report',
+		var me = this;
-	    method: 'GET',
+
-	    waitMsgTarget: me,
+		var getReportFileName = function() {
-	    failure: function(response) {
+			var now = Ext.Date.format(new Date(), 'D-d-F-Y-G-i');
-		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+			return `${me.nodename}-pve-report-${now}.txt`;
-	    },
+		};
-	    success: function(response) {
+
-		var report = Ext.htmlEncode(response.result.data);
+		var view = Ext.createWidget('component', {
-		reportWindow.show();
+			itemId: 'system-report-view',
-		view.update(report);
+			scrollable: true,
-	    },
+			style: {
-	});
+			'background-color': '#23272a',
-    }
+			'white-space': 'pre',
+			'font-family': 'monospace',
+			padding: '5px',
+			},
+		});
+
+		var reportWindow = Ext.create('Ext.window.Window', {
+			title: gettext('System Report'),
+			width: 1024,
+			height: 600,
+			layout: 'fit',
+			modal: true,
+			buttons: [
+			'->',
+			{
+				text: gettext('Download'),
+				handler: function() {
+				var fileContent = Ext.String.htmlDecode(reportWindow.getComponent('system-report-view').html);
+				var fileName = getReportFileName();
+
+				// Internet Explorer
+				if (window.navigator.msSaveOrOpenBlob) {
+					navigator.msSaveOrOpenBlob(new Blob([fileContent]), fileName);
+				} else {
+					var element = document.createElement('a');
+					element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
+					  encodeURIComponent(fileContent));
+					element.setAttribute('download', fileName);
+					element.style.display = 'none';
+					document.body.appendChild(element);
+					element.click();
+					document.body.removeChild(element);
+				}
+				},
+			},
+			],
+			items: view,
+		});
+
+		Proxmox.Utils.API2Request({
+			url: '/api2/extjs/nodes/' + me.nodename + '/report',
+			method: 'GET',
+			waitMsgTarget: me,
+			failure: function(response) {
+			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+			},
+			success: function(response) {
+			var report = Ext.htmlEncode(response.result.data);
+			reportWindow.show();
+			view.update(report);
+			},
+		});
+		}
+}
 
+swapLogo();
+patchGaugeWidget();
+patchBackupConfig();
+patchDiskSmartWindow();
+patchTFAEdit();
+patchSummary();
+patchSubscription();
 console.log('PVEDiscordDark :: Patched');

PVEDiscordDark/sass/PVEDiscordDark.css

@@ -729,11 +729,6 @@ div[id^="pveNotesView-"][id$="-innerCt"] {
   background: #23272a;
 }
 
-img[src^="/pve2/images/proxmox_logo"] {
-  background: #23272a;
-  content: url("/pve2/images/dd_logo.png");
-}
-
 [id^="versioninfo"] {
   background: #23272a;
 }

PVEDiscordDark/sass/special/_specific.sass

@@ -32,10 +32,6 @@ div[id^="pveStorageStatusView-"][id$="-body"]
 div[id^="pveNotesView-"][id$="-innerCt"]
 	background: #23272a
 
-img[src^="/pve2/images/proxmox_logo"]
-	background: #23272a
-	content: url('/pve2/images/dd_logo.png')
-
 [id^="versioninfo"]
 	background: #23272a