🚀 Browser Console when ENVIRONMENT.flags.debug is set

base/source/browser/console.mjs

@@ -110,14 +110,13 @@ export const console = (function(global) {
 
 			let style = [
 				'base-console {',
+				'\tall: unset;',
 				'\tdisplay: block;',
 				'\tposition: fixed;',
 				'\ttop: 0px;',
 				'\tright: 0px;',
 				'\tbottom: 0px;',
 				'\tleft: 0px;',
-				'\tborder: 1px solid #ffffff;',
-				'\tborder-radius: 0px;',
 				'\tbox-sizing: border-box;',
 				'\tbackground: #2e3436;',
 				'\ttransition: 200ms transform ease-out;',

browser/design/footer/Console.css

@@ -0,0 +1,49 @@
+
+browser-console {
+	position: fixed;
+	top: auto;
+	right: auto;
+	bottom: 0px;
+	left: 0px;
+	z-index: 2049;
+}
+
+browser-console button {
+	display: inline-block;
+	min-width: 32px;
+	margin: 0px;
+	padding: 0px;
+	line-height: 32px;
+	height: 32px;
+	color: var(--element-default-color);
+	font-size: 24px;
+	text-align: center;
+	background: var(--layout-default-background);
+	border: 1px solid transparent;
+	border-radius: 4px;
+	box-sizing: border-box;
+	transition: 200ms all ease-out;
+	vertical-align: middle;
+	user-select: none;
+	appearance: none;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	outline: none;
+	cursor: pointer;
+}
+
+browser-console button:hover,
+browser-console button.active {
+	color: var(--element-active-color);
+}
+
+browser-console button:before {
+	display: inline-block;
+	width: 100%;
+	font-family: 'icon';
+	text-align: center;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+	content: '\e1b0';
+}
+

browser/design/footer/Console.mjs

@@ -0,0 +1,56 @@
+
+import { Element } from '../../design/index.mjs';
+
+
+
+const Console = function(/* browser, widgets */) {
+
+	this.button  = Element.from('button');
+	this.element = Element.from('browser-console');
+	this.console = null;
+
+	let console = window.document.querySelector('base-console');
+	if (console !== null) {
+		this.console = Element.from(console);
+	}
+
+
+	this.button.on('click', () => {
+
+		if (this.console !== null) {
+
+			if (this.console.state() === 'active') {
+
+				this.console.state('');
+				this.button.state('');
+
+			} else {
+
+				this.console.state('active');
+				this.button.state('active');
+
+			}
+
+		}
+
+	});
+
+	this.button.render(this.element);
+
+};
+
+
+Console.prototype = {
+
+	erase: function(target) {
+		this.element.erase(target);
+	},
+
+	render: function(target) {
+		this.element.render(target);
+	}
+
+};
+
+export { Console };
+

browser/design/footer/Tabs.mjs

@@ -392,14 +392,8 @@ Tabs.prototype = {
 		this.element.erase(target);
 	},
 
-	hide: function() {
-	},
-
 	render: function(target) {
 		this.element.render(target);
-	},
-
-	show: function() {
 	}
 
 };

browser/design/index.css

@@ -1,18 +1,19 @@
 
 @import url("./other/index.css");
-@import url("./header/History.css");
 @import url("./header/Address.css");
+@import url("./header/History.css");
 @import url("./header/Mode.css");
 @import url("./header/Settings.css");
 @import url("./header/Splitter.css");
 
 @import url("./main/Webview.css");
 
-@import url("./footer/Tabs.css");
-@import url("./footer/Site.css");
-@import url("./footer/Session.css");
+@import url("./footer/Console.css");
 @import url("./footer/Context.css");
 @import url("./footer/Help.css");
+@import url("./footer/Session.css");
+@import url("./footer/Site.css");
+@import url("./footer/Tabs.css");
 
 
 

browser/design/index.mjs

@@ -1,17 +1,19 @@
 
-import { Element   } from './Element.mjs';
-import { isBrowser } from '../source/Browser.mjs';
-import { Address   } from './header/Address.mjs';
-import { Context   } from './footer/Context.mjs';
-import { Help      } from './footer/Help.mjs';
-import { History   } from './header/History.mjs';
-import { Mode      } from './header/Mode.mjs';
-import { Session   } from './footer/Session.mjs';
-import { Settings  } from './header/Settings.mjs';
-import { Site      } from './footer/Site.mjs';
-import { Splitter  } from './header/Splitter.mjs';
-import { Tabs      } from './footer/Tabs.mjs';
-import { Webview   } from './main/Webview.mjs';
+import { Element     } from './Element.mjs';
+import { isBrowser   } from '../source/Browser.mjs';
+import { ENVIRONMENT } from '../source/ENVIRONMENT.mjs';
+import { Address     } from './header/Address.mjs';
+import { Console     } from './footer/Console.mjs';
+import { Context     } from './footer/Context.mjs';
+import { Help        } from './footer/Help.mjs';
+import { History     } from './header/History.mjs';
+import { Mode        } from './header/Mode.mjs';
+import { Session     } from './footer/Session.mjs';
+import { Settings    } from './header/Settings.mjs';
+import { Site        } from './footer/Site.mjs';
+import { Splitter    } from './header/Splitter.mjs';
+import { Tabs        } from './footer/Tabs.mjs';
+import { Webview     } from './main/Webview.mjs';
 
 
 
@@ -42,15 +44,6 @@ export const dispatch = (window, browser) => {
 
 	if (browser !== null) {
 
-		browser.on('theme', (theme) => {
-
-			let body = window.document.querySelector('body');
-			if (body !== null) {
-				body.setAttribute('data-theme', theme);
-			}
-
-		});
-
 		Object.keys(WIDGETS).forEach((key) => {
 
 			let widget = WIDGETS[key] || null;
@@ -62,6 +55,28 @@ export const dispatch = (window, browser) => {
 
 		});
 
+
+		if (ENVIRONMENT.flags.debug === true) {
+
+			WIDGETS.console = new Console(browser, WIDGETS);
+
+			let body = window.document.querySelector('body');
+			if (body !== null) {
+				WIDGETS.console.render(body);
+			}
+
+		}
+
+		browser.on('theme', (theme) => {
+
+			let body = window.document.querySelector('body');
+			if (body !== null) {
+				body.setAttribute('data-theme', theme);
+			}
+
+		});
+
+
 		WIDGETS.address   = new Address(browser, WIDGETS);
 		WIDGETS.context   = new Context(browser, WIDGETS);
 		WIDGETS.help      = new Help(browser, WIDGETS);

browser/index.html

@@ -39,6 +39,8 @@
 
 
 
+			console.log('Browser: Initializing ...');
+
 			// BROWSER has to be global for internal pages
 			const browser = window.BROWSER = new Browser({
 				host:  ENVIRONMENT.hostname,

browser/service.js

@@ -9,6 +9,8 @@ const ASSETS  = [
 	'app/gjs.js',
 	'browser.mjs',
 	'design/Element.mjs',
+	'design/footer/Console.css',
+	'design/footer/Console.mjs',
 	'design/footer/Context.css',
 	'design/footer/Context.mjs',
 	'design/footer/Help.css',