-
Notifications
You must be signed in to change notification settings - Fork 216
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Display a custom page for Dev Tools Discovery
This enables a custom resource handler for CEF to allow overriding of individual internal files that CEF attempts to load. The Dev Tools Discovery page is exposed via Remote Debugging & provides a list of all loaded browser pages to easily open Dev Tools from a single location. This updated version introduces a number of enhancements: 1. Items are now ordered by category 2. Sub-pages are listed under parent pages 3. Built-in refresh button 4. OBS version number in page body based on User Agent 5. Clicking items opens them in a new tab by default 6. Custom styling
- Loading branch information
Showing
5 changed files
with
204 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <html> | ||
|
|
||
| <head> | ||
| <!-- Custom variant of dev_tools_discovery.html used internally by CEF --> | ||
| <title>OBS Browser Remote Debugging</title> | ||
| <style> | ||
| html { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } | ||
|
|
||
| button#refresh { | ||
| vertical-align: text-bottom; | ||
| } | ||
|
|
||
| #items>li>button { | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| padding-top: 0; | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| a { | ||
| color: #585858; | ||
| } | ||
|
|
||
| a:visited { | ||
| color: #7e7070; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: #000; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| let children = {}; | ||
| function onLoad() { | ||
| const list = document.getElementById('items'); | ||
| while (list.firstChild) { | ||
| list.removeChild(list.firstChild); | ||
| } | ||
| const t = new Date().getTime(); | ||
| fetch(`/json/list?t=${t}`) | ||
| .then(resp => resp.json()) | ||
| .then(onFetch) | ||
| .catch(() => { | ||
| list.innerText = 'Failed to fetch list. Did OBS close?'; | ||
| }); | ||
| fetch(`/json/version?t=${t}`) | ||
| .then(resp => resp.json()) | ||
| .then(onVersion); | ||
| } | ||
|
|
||
| function onFetch(resp) { | ||
| resp.sort((a, b) => { | ||
| const p = 'page'; | ||
| if (a.type === p && b.type !== p) | ||
| return -1; | ||
| if (a.type !== p && b.type === p) | ||
| return 1; | ||
| return 0; | ||
| }); | ||
| for (const el of resp) { | ||
| children[el.id] = []; | ||
| } | ||
| for (const el of resp) { | ||
| if (el.parentId) children[el.parentId].push(el); | ||
| } | ||
| generateList(resp); | ||
| } | ||
|
|
||
| function onVersion(resp) { | ||
| const v = document.getElementById('version'); | ||
| const uA = resp['User-Agent'].split(' '); | ||
| const rV = uA.filter(r => r.startsWith('OBS/')); | ||
| v.innerText = rV[0].replace('/', ' '); | ||
| } | ||
|
|
||
| function generateList(resp) { | ||
| for (const el of resp) { | ||
| appendItem(el); | ||
| } | ||
| } | ||
|
|
||
| function makeLink(devtoolsFrontendUrl, url, title) { | ||
| let linkEl; | ||
| const listItem = document.createElement('li'); | ||
| if (devtoolsFrontendUrl) { | ||
| linkEl = document.createElement('a'); | ||
| linkEl.title = url; | ||
| linkEl.href = devtoolsFrontendUrl; | ||
| linkEl.target = '_blank'; | ||
| } else { | ||
| linkEl = document.createElement('span'); | ||
| linkEl.title = 'Already debugging'; | ||
| } | ||
| const text = document.createElement('span'); | ||
| text.innerText = title || '(untitled tab)'; | ||
|
|
||
| linkEl.appendChild(text); | ||
| listItem.appendChild(linkEl); | ||
| return listItem; | ||
| } | ||
|
|
||
| function appendChildren(item, idChildren) { | ||
| const childList = document.createElement('ul'); | ||
| for (const ch of idChildren) { | ||
| const framePath = new URL(ch.title); | ||
| const innerTitle = `${framePath.hostname}${framePath.pathname}`; | ||
| const itemChild = makeLink(ch.devtoolsFrontendUrl, ch.url, innerTitle); | ||
| childList.appendChild(itemChild); | ||
| } | ||
| item.appendChild(childList); | ||
| } | ||
|
|
||
| function appendItem(data) { | ||
| const { title, devtoolsFrontendUrl, id, parentId, type, url } = data; | ||
| if (type !== 'page') return; | ||
| const item = makeLink(devtoolsFrontendUrl, url, title); | ||
|
|
||
| if (children[id].length) appendChildren(item, children[id]); | ||
| document.getElementById('items').appendChild(item); | ||
| } | ||
| </script> | ||
| </head> | ||
|
|
||
| <body onload="onLoad()"> | ||
| <h3 id="heading"> | ||
| <span id="version"></span> | ||
| <span>Inspectable Browser Sources & Docks</span> | ||
| <button id="refresh" onclick="onLoad()" type="button">⟳ Refresh</button> | ||
| </h3> | ||
| <ul id="items"> | ||
|
|
||
| </ul> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters