bits

Author: rmrector

README.md

@@ -1,9 +1,9 @@
 ## Devhelper web
 
-A web interface to debug some bits of Kodi. Enable the web server and remote control, then install
-and access the web interface at "http://[hostname]:[port]/addons/webinterface.devhelper/", no need to
-change the 'Web interface' setting. With most browsers you can also unpack it and open 'index.html'
-right from your local file system without installing it as an add-on.
+A web interface to debug some bits of Kodi. Enable Kodi's web server and remote control, then install
+this add-on and access the web interface at "http://[kodihostname]:[port]/addons/webinterface.devhelper/",
+no need to change the 'Web interface' setting. With some browsers you can also unpack it and
+open 'index.html' right from your local file system without installing it as an add-on.
 
 Latest stable [installable zip](https://github.com/rmrector/repository.rector.stuff/raw/master/latest/webinterface.devhelper-latest.zip).
 
@@ -12,7 +12,7 @@ It can also be installed from my [development repo], which will keep it updated.
 [development repo]: (https://github.com/rmrector/repository.rector.stuff/raw/master/latest/repository.rector.stuff-latest.zip).
 
 There is a running data section that watches InfoLabels and InfoBooleans available to skins. This
-provides access to much of the information that would be used in a debug overlay during skinning,
+provides access to much of the information that would be used in a **debug overlay for skin design**,
 and there is plenty of room to show more info without obscuring your design.
 
 ![Running data](resources/screenshot1.jpg)

css/rainbowhork.css

@@ -2,12 +2,12 @@
 	background-color: hsl(0, 100%, 83%);
 }
 a#maintitle {
-	background: linear-gradient(to right, hsla(0, 100%, 17%, 1), hsla(39, 100%, 13%, 1),
+	background-image: linear-gradient(to right, hsla(0, 100%, 17%, 1), hsla(39, 100%, 13%, 1),
 		hsla(60, 100%, 11%, 1), hsla(120, 100%, 12%, 1), hsla(180, 100%, 13%, 1),
 		hsla(240, 100%, 20%, 1), hsla(300, 89%, 15%, 1));
 	color: transparent;
 	-webkit-background-clip: text;
-	background-clip: text;
+	        background-clip: text;
 }
 .conbox {
 	background-color: hsl(30, 100%, 80%);

css/style.css

@@ -1,4 +1,4 @@
-/* $RESET Fix box and simple reset + base */
+/* $$RESET Fix box and simple reset + base */
 html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; }
 ul { list-style: none; }
@@ -18,7 +18,7 @@ body {
 	box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
 }
 
-/* $LAYOUT */
+/* $$LAYOUT */
 .header__titleandbuttons, .conbox__content, .conbox__shortcontent, .content,
 .notifications, .footer, .execution-container {
 	padding: 10px;
@@ -48,13 +48,13 @@ body {
 }
 .method-list {
 	box-shadow: 0px 0px 4px 2px hsla(0, 0%, 0%, 0.35);
+	display: flex;
 	flex: 1 230px;
+	flex-direction: column;
+	height: 100%;
 	padding-left: 10px;
 	position: relative;
 	z-index: 1;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
 }
 .content-box {
 	flex: 9999 1 500px;
@@ -126,7 +126,7 @@ body {
 	}
 }
 
-/* $GENERAL */
+/* $$GENERAL */
 pre {
 	font-family: 'Roboto Mono', monospace;
 	font-size: 13.5px;
@@ -176,10 +176,10 @@ i.material-icons {
 }
 @keyframes rotation {
 	from { transform: rotate(0deg); }
-	to { transform: rotate(359deg); }
+	to { transform: rotate(359.999deg); }
 }
 
-/* $BUTTONS */
+/* $$BUTTONS */
 .flatbutton {
 	border: none;
 	color: white;
@@ -229,8 +229,8 @@ i.material-icons {
 	transition: box-shadow 0.5s, background-color 0.5s, color 0.5s;
 }
 .action-button:disabled {
-	color: #CCCCCC;
 	background-color: #999999;
+	color: #CCCCCC;
 }
 .action-button:hover:not(:disabled) {
 	background-color: #777777;
@@ -250,8 +250,8 @@ i.material-icons {
 	background-color: hsla(0, 0%, 55%, 0.35);
 	border-radius: 5px;
 	display: inline-block;
-	padding: 5px;
 	margin: 5px;
+	padding: 5px;
 }
 /* Used in connectionbox and contentbox */
 .inline-popout {
@@ -268,7 +268,7 @@ i.material-icons {
 	box-shadow: 0px 0px 5px 2px hsla(222, 100%, 50%, 0.75);
 }
 
-/* $Sindex */
+/* $$index */
 .header__titleandbuttons {
 	font-size: 26px;
 	font-weight: bold;
@@ -290,10 +290,13 @@ i.material-icons {
 	margin-top: -10px;
 }
 .footer .footer-buttons button {
-	box-shadow: unset;
 	height: 40px;
 	padding-top: 9px;
 }
+footer .footer-buttons .clearbutton:hover {
+	background-color: hsla(0, 0%, 100%, 0.5);
+	box-shadow: unset;
+}
 .footer .madeby {
 	width: 100%;
 	text-align: right;
@@ -304,8 +307,8 @@ i.material-icons {
 .splash {
 	background-color: white;
 	bottom: 0;
-	position: absolute;
 	left: 0;
+	position: absolute;
 	right: 0;
 	top: 0;
 	transition: opacity 0.2s;
@@ -344,7 +347,7 @@ i.material-icons {
 	margin-right: 5px;
 }
 
-/* $Sconnectionbox */
+/* $$connectionbox */
 .conbox__content input {
 	margin-left: 5px;
 }
@@ -418,7 +421,7 @@ i.material-icons {
 	background-color: hsla(0, 0%, 50%, 0.75);
 }
 
-/* $Smethodlist */
+/* $$methodlist */
 .clear-search {
 	position: absolute;
 	right: 10px;
@@ -445,7 +448,7 @@ i.material-icons {
 	top: 0;
 }
 
-/* $Scontentbox */
+/* $$contentbox */
 .runningdata-section {
 	max-width: 500px;
 	vertical-align: top;
@@ -545,7 +548,7 @@ i.material-icons {
 	color: hsl(0, 50%, 35%);
 }
 
-/* $Sexecutionbox */
+/* $$executionbox */
 .execution-container form {
 	align-items: stretch;
 	display: flex;
@@ -625,3 +628,4 @@ i.material-icons {
 .renderjson .boolean { color: blueviolet; }
 .renderjson .key    { color: darkblue; }
 .renderjson .keyword { color: blue; }
+.renderjson .closure, .renderjson .disclosure { color: hsla(240, 101%, 56%, 0.5); }

index.html

@@ -102,23 +102,25 @@
 		<div class="content-container">
 			<main id="content-js" class="content"><div class="result">
 				<p>You can add more Kodi hosts in the orange section to the far right along the top.
-				<p>Click the "Show running data" button in the right of the red section along the top to watch InfoLabels
-				and InfoBooleans, the same data available to skins.
+				<p>Click the "Show running data" button in the right of the red section along the top
+				to watch InfoLabels and InfoBooleans, the <strong>same data available to skins</strong>.
+				<p>All notifications from the connected Kodi host will show up on the right, and you can explore
+				JSON-RPC methods to the left, then fill out the params and execute it below.
+				<p>URLs power much of the functionality, which can be bookmarked for quick access.
+				<p>A details box will show up at the bottom of the column to the right, showing details
+				of certain items as your mouse cursor passes over them. Param details will show up here,
+				as well as the <strong>full JSON-RPC request</strong> over the title of method "Calling"
+				and "Result" info, and images from image URLs in requests and the "Available art"
+				running data section. Click on the item <strong>to pin the details</strong> so
+				that your mouse cursor can roam.
+				<p id="webpdb-desc-js" class="nodisplay">See
+				<a href="http://kodi.wiki/view/HOW-TO:Debug_Python_Scripts_with_Web-PDB" target="_blank">Web PDB</a>
+				for super Python debugging powers.</p>
 				<p id="log-desc-js" class="nodisplay">To use the "View Kodi log" button, add "special://logpath/"
 				as a media source in Kodi (pictures, music, or videos; the file browser won't work).
 				Do note that this can allow HTTP requests to Kodi to read everything in the same folder
 				as the log, including subdirectories.
 				On Windows this includes everything in Kodi's entire data directory.</p>
-				<p id="webpdb-desc-js" class="nodisplay">See
-				<a href="http://kodi.wiki/view/HOW-TO:Debug_Python_Scripts_with_Web-PDB" target="_blank">Web PDB</a>
-				for super Python debugging powers.</p>
-				<p>All notifications from the connected Kodi host will show up on the right, and you can explore
-				JSON-RPC methods to the left, then fill out the params and execute it below.
-				<p>URLs power much of the functionality, which can be bookmarked for quick access.
-				<p>A details box will show up at the bottom of the column to the right, showing details of certain items
-				as your mouse cursor passes over them. Param details will show up here, as well as the full JSON-RPC request over
-				the title of method "Calling" and "Result" info, and images from image URLs in requests and the
-				"Available art" running data section. Click on the item to pin the details so that your mouse cursor can roam.
 			</div></main>
 			<div class="notify-preview-box">
 				<div class="notify-box-buttons">
@@ -165,6 +167,7 @@
 	</div>
 	<address class="madeby">Made by <a href="https://github.com/rmrector" target="_blank">Ryan Rector</a></address>
 </footer>
+
 <div id="settings-dialog-vue">
 	<dialog-window header="Settings" v-show="show" @close="close">
 		<ul class="settings-list">
@@ -182,7 +185,7 @@
 </div>
 <div id="artlist-editor-vue">
 	<dialog-window header="Custom art list" v-show="show" @close="close"
-		description="Artwork types to look for in RunningData. One art type per line.">
+		description="Artwork types to look for in RunningData. One art type per line. &quot;Load from Kodi Library&quot; can take a long time.">
 		<div style="width: 710px;">
 			<div class="artlist__mediatype"><label>movie:
 				<textarea v-model.lazy="mediatype_movie"></textarea>
@@ -212,11 +215,12 @@
 <div class="splash" id="splash-js"></div>
 
 <div id="uishim-vue">
-	<link class="themesheet" href="css/rainbowhork.css" rel="stylesheet" title="Default theme"
+	<link class="themesheet-js" href="css/rainbowhork.css" rel="stylesheet" title="Default theme"
 		:disabled="shared.settings.theme !== 'Default theme'">
-	<link class="themesheet" href="css/light.css" rel="alternate stylesheet" title="Light theme"
+	<link class="themesheet-js" href="css/light.css" rel="alternate stylesheet" title="Light theme"
 		:disabled="shared.settings.theme !== 'Light theme'">
 </div>
+
 <script src="js/ui.js"></script>
 <script src="js/frontend.js"></script>
 <script>start_app()</script>

js/kodi.js

@@ -4,12 +4,13 @@ const TIMEOUT = 60000
 
 // Kodi doesn't like requests > 1024 bytes
 let LIMIT_WEBSOCKET = 1024
+
 const jskodi = {}
 
-jskodi.imageencode = image =>
-	image.startswith('image://') ? image : 'image://' + encodeURIComponent(image) + '/'
-jskodi.imagedecode = image =>
-	decodeURIComponent(image.slice(8, -1))
+jskodi.imageencode = image_url =>
+	image_url.startswith('image://') ? image_url : 'image://' + encodeURIComponent(image_url) + '/'
+jskodi.imagedecode = image_url =>
+	image_url.startswith('image://') ? decodeURIComponent(image_url.slice(8, -1)) : image_url
 
 /**
  * A connection to Kodi's websocket port
@@ -186,21 +187,22 @@ jskodi.Connection = class {
 			this.socket.send(strequest)
 		})
 	}
-	http_call(method, params, {id=undefined, logcall=debug.other_jsonrpc, alldata=false}={}) {
+	async http_call(method, params, {id=undefined, logcall=debug.other_jsonrpc, alldata=false}={}) {
 		if (id == null)
 			id = this.nextid++
 		const request = {jsonrpc: '2.0', method, params, id}
 		if (logcall)
 			console.log('Request', request)
-		return fetch(this.host + '/jsonrpc', {method: 'POST', body: JSON.stringify(request),
-			headers: {'Content-Type': 'application/json'}
-		}).then(r => r.json()).then(data => {
-			if (logcall)
-				console.log('Result', data)
-			if (data.result)
-				return alldata ? data : data.result
-			throw (alldata ? data : data.error) || this.build_connection_error('no-result')
-		})
+		let data = await fetch(this.host + '/jsonrpc', {
+			method: 'POST',
+			body: JSON.stringify(request),
+			headers: { 'Content-Type': 'application/json' }
+		}).json()
+		if (logcall)
+			console.log('Result', data)
+		if (data.result)
+			return alldata ? data : data.result
+		throw (alldata ? data : data.error) || this.build_connection_error('no-result')
 	}
 	async populatedata() {
 		const args = {getmetadata: true}

js/ui.js

@@ -107,7 +107,7 @@ methodlist_toggle.addEventListener('click', () => {
 })
 methodlist.filtered = ''
 methodsearch.addEventListener('keyup', e => {
-	if (e.keyCode === 13)
+	if (e.keyCode === 13) // Enter key
 		return
 	const filter = methodsearch.value.toLowerCase()
 	if (filter === methodlist.filtered)
@@ -693,19 +693,19 @@ UI.set_custominfo_options = function(labels, booleans) {
 		custombooleans.value = booleans.join('\n')
 }
 
-UI.get_themes = () => $ls('link.themesheet').map(e => e.title)
+UI.get_themes = () => $ls('link.themesheet-js').map(elm => elm.title)
 UI.set_theme = new_theme => {
 	// Firefox doesn't like the way Vue disables stylesheets
 	let theme_set = false
-	for (const elem of $ls('link.themesheet')) {
+	for (const elem of $ls('link.themesheet-js')) {
 		if (elem.title == new_theme) {
 			elem.disabled = false
 			theme_set = true
 		} else
 			elem.disabled = true
-		if (!theme_set)
-			$ls('link.themesheet').disabled = false
 	}
+	if (!theme_set)
+		$ls('link.themesheet-js')[0].disabled = false
 }
 UI.hidesplash = function() {
 	const splash = $('#splash-js')