Update custom CSS injection with a checkbox for injecting via JS.

The JS version will handle iframes in a heavy-handed manner
for services that might need it such as gitter.

app/model/Service.js

@@ -69,6 +69,10 @@ Ext.define('Rambox.model.Service', {
 		name: 'custom_css'
 		,type: 'string'
 		,defaultValue: ''
+	},{
+		name: 'custom_css_complex'
+		,type: 'boolean'
+		,defaultValue: false
 	},{
 		 name: 'zoomLevel'
 		,type: 'number'

app/store/Services.js

@@ -39,6 +39,7 @@ Ext.define('Rambox.store.Services', {
 					,muted: service.get('muted')
 					,includeInGlobalUnreadCounter: service.get('includeInGlobalUnreadCounter')
 					,displayTabUnreadCounter: service.get('displayTabUnreadCounter')
+					,custom_css_complex: service.get('custom_css_complex')
 					,enabled: service.get('enabled')
 					,record: service
 					,tabConfig: {

app/ux/WebView.js

@@ -399,6 +399,25 @@ Ext.define('Rambox.ux.WebView',{
 			e.preventDefault();
 		});
 
+		function JSapplyCSS()
+		{
+			if ( me.record ) {
+				let custom_css_complex = me.record.get('custom_css_complex');
+				if (custom_css_complex == true) {
+					let custom_css = Ext.getStore('ServicesList').getById(me.record.get('type')).get('custom_css');
+					custom_css = custom_css + me.record.get('custom_css');
+					if ( custom_css !== '' ) {
+						console.groupCollapsed(me.record.get('type').toUpperCase() + ' - Injected Custom CSS via JS');
+						console.info(me.type);
+						console.log(custom_css);
+						let js_before = '{let mystyle=`';
+						let js_after = '`,mycss=document.createElement("style");mycss.type="text/css",mycss.styleSheet?mycss.styleSheet.cssText=mystyle:mycss.appendChild(document.createTextNode(mystyle));let myDocHead=document.head;myDocHead.boxStyled||(myDocHead.appendChild(mycss),myDocHead.boxStyled=!0);let myframes=document.getElementsByTagName("iframe");for(let myframe of myframes){let mydocument,mydochead=(myframe.contentDocument||myframe.contentWindow.document).head;if(!mydochead.boxStyled){let myclonedcss=mycss.cloneNode(deep=!0);mydochead.appendChild(myclonedcss),mydochead.boxStyled=!0}}}';
+						webview.executeJavaScript(js_before + custom_css + js_after);
+					}
+				}
+			}
+		}
+
 		webview.addEventListener("dom-ready", function(e) {
 			// Mute Webview
 			if ( me.record.get('muted') || localStorage.getItem('locked') || JSON.parse(localStorage.getItem('dontDisturb')) ) me.setAudioMuted(true, true);
@@ -415,8 +434,9 @@ Ext.define('Rambox.ux.WebView',{
 					console.log(js_unread);
 					js_inject += js_unread;
 				}
-
-				var custom_css = Ext.getStore('ServicesList').getById(me.record.get('type')).get('custom_css');
+				let custom_css_complex = me.record.get('custom_css_complex');
+				if (custom_css_complex === false) {
+					let custom_css = Ext.getStore('ServicesList').getById(me.record.get('type')).get('custom_css');
 					custom_css = custom_css + me.record.get('custom_css');
 					if ( custom_css !== '' ) {
 						console.groupCollapsed(me.record.get('type').toUpperCase() + ' - Injected Custom CSS');
@@ -425,6 +445,7 @@ Ext.define('Rambox.ux.WebView',{
 						css_inject += custom_css;
 					}
 				}
+			}
 
 			// Prevent Title blinking (some services have) and only allow when the title have an unread regex match: "(3) Title"
 			if ( Ext.getStore('ServicesList').getById(me.record.get('type')).get('titleBlink') ) {
@@ -459,6 +480,14 @@ Ext.define('Rambox.ux.WebView',{
 			webview.insertCSS(css_inject);
 		});
 
+		webview.addEventListener('load-commit', function(url, isMainFrame) {
+			JSapplyCSS();
+		});
+
+		webview.addEventListener('did-frame-finish-load', function(event, isMainFrame, frameProcessId, frameRoutingId) {
+			JSapplyCSS();
+		});
+
 		webview.addEventListener('ipc-message', function(event) {
 			var channel = event.channel;
 			switch (channel) {

app/view/add/Add.js

@@ -245,6 +245,14 @@ Ext.define('Rambox.view.add.Add',{
 								,height: 120
 								,style: 'font-family: Consolas, "Lucida Console", Monaco, monospace'
 							},
+							{
+								xtype: 'checkbox'
+								,boxLabel: 'Inject CSS via JS'
+								,name: 'custom_css_complex'
+								,value: me.edit ? me.record.get('custom_css_complex') : false
+								,inputValue: true
+								,uncheckedValue: false
+							},
 							{
 								xtype: 'textarea'
 								,fieldLabel: 'Custom CSS'

app/view/add/AddController.js

@@ -41,6 +41,7 @@ Ext.define('Rambox.view.add.AddController', {
 				,trust: formValues.trust
 				,js_unread: formValues.js_unread
 				,custom_css: formValues.custom_css
+				,custom_css_complex: formValues.custom_css_complex
 			});
 
 			var view = Ext.getCmp('tab_'+win.record.get('id'));
@@ -97,6 +98,7 @@ Ext.define('Rambox.view.add.AddController', {
 				,trust: formValues.trust
 				,js_unread: formValues.js_unread
 				,custom_css: formValues.custom_css
+				,custom_css_complex: formValues.custom_css_complex
 			});
 			service.save();
 			Ext.getStore('Services').add(service);

app/view/main/MainController.js

@@ -106,6 +106,7 @@ Ext.define('Rambox.view.main.MainController', {
 				,muted: rec.get('muted')
 				,includeInGlobalUnreadCounter: rec.get('includeInGlobalUnreadCounter')
 				,displayTabUnreadCounter: rec.get('displayTabUnreadCounter')
+				,custom_css_complex: rec.get('custom_css_complex')
 				,enabled: rec.get('enabled')
 				,record: rec
 				,hidden: hideTab