maptool
maptool copied to clipboard
RPTools
getHTML() - extract HTML from frame/dialog/overlay
Is your feature request related to a problem? Please describe. Debugging and tweaking frames/dialogs/overlays is difficult as the content displayed isn't always what you expect and you can't see the nitty gritty in action.
Describe the solution you'd like
I would like a function the extracts the final displayed HTML page with all its CSS and JS. I can then use this in an external editor and run it in a browser to inspect how things are working.
Something along the lines of getHTML(<Dialog/Frame/Overlay Name>)
Describe alternatives you've considered I compile all the disparate sources that are gathered together and/or generated and store it in a property/speech which I can copy to an external editor.
- This can be a PiTA and a leetle bit unreliable workflow-wise.
- It only shows what has been sent to be rendered, not what has actually been rendered.
Additional context
I would also love to see the output. To broaden the options here, an HTML/JavaScript debugging tool would be ultimately what I would want - then we wouldn't have to reinvent the wheel and cobble together our own dev tools for languages that have so many great tools already.
Just as an example, here is an (old) StackOverflow question about running Firebug Lite in a JavaFX Webview: https://stackoverflow.com/questions/9398879/html-javascript-debugging-in-javafx-webview
IIRC, something like this was coded as part of the UI but we never reached a consensus on the widget. All that to say, that extract code should still be out there somewhere.
I don't believe a macro call was ever considered.
On Thu, Oct 14, 2021 at 10:51 AM Lionel @.***> wrote:
I would also love to see the output. To broaden the options here, an HTML/JavaScript debugging tool would be ultimately what I would want - then we wouldn't have to reinvent the wheel and cobble together our own dev tools for languages that have so many great tools already.
Just as an example, here is an (old) StackOverflow question about running Firebug Lite in a JavaFX Webview: https://stackoverflow.com/questions/9398879/html-javascript-debugging-in-javafx-webview
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/RPTools/maptool/issues/3045#issuecomment-943488797, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABYNAWTFYUTZRHOI4IUQULUG34BVANCNFSM5F6W4CPA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You can still do what has always been possible with dialogs/frames.
- Click in the frame.
- Hit Ctrl-A, Ctrl-C.
- In Notepad++, Edit -> Paste Special -> Paste HTML Content
<HTML>
<BODY>
<!--StartFragment-->
<h1 style="color: red; font-family: sans-serif; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 0); text-decoration: none;">This is a test</h1>
<div id="test1" style="margin-bottom: 5px; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 26.66666603088379px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 0); text-decoration: none;">...This is a test!<br>This is another test!</div>
<img src="asset://87f4e9bfa4f1f3db250b57b3599fa4e9" style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 26.66666603088379px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 0); text-decoration: none;">
<span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 26.66666603088379px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 0); text-decoration: none; display: inline !important; float: none;">
<span class="Apple-converted-space"> </span>
</span>
<a href="lib://Test/macro/test/test2.html" style="font-family: sans-serif; font-size: 26.66666603088379px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 0);">test2</a>
<!--EndFragment-->
</BODY>
</HTML>
😯 Wow! Didn't know that! Very useful.
Short of a real console/dev tools I think that workaround is great, though won't work on overlays, right?
though won't work on overlays, right?
Yeah. No way to select the content of the overlay that I know of.
JavaScript can query the DOM and retrieve the contents of the page. This means it can work for the HTML5 components.
Create a token named Lib:ViewPageSource. Open the token editor and turn on Allow URI Access on the Lib:Token properties tab.
Token Lib:ViewPageSource -> Macro ViewPageSource:
[h: html.frame5("Test View Source", "lib://ViewPageSource/macro/pageSourceExample.html?cachelib=false")]
Token Lib:ViewPageSource -> Macro pageSourceExample.html:
<html>
<head>
<script>
function viewPageSource() {
"use strict";
let html = document.getElementsByTagName('html')[0].innerHTML;
let output = document.getElementById('test');
output.innerText = `<html>\n${html}\n</html>`
}
</script>
</head>
<body>
<button onclick="javascript:viewPageSource();">View Source</button>
<pre id="test" style="border: 2px solid blue">
This is a test.
</pre>
</body>
</html>
Click on the ViewPageSource macro and a frame5 panel will open. Click the View Source button to see the source of the page. Note that MapTool injects a few elements into the <head> block, so there will be more than just the content provided by pageSourceExample.html macro.
This is just a proof of concept; turning it into a drop-in resource is left as an exercise for the reader. Although please do share if you do so, either here or in Discord.
JavaScript can query the DOM and retrieve the contents of the page.
Thank you sir for this! I was fed up with my JS/HTML debugging last night and had decided I had to do something similar - good thing I checked here or I'd be re-inventing the wheel!
nice work, kudos
