[Showcase] Devtools

Talk about ManiaLink development in this forum

Moderator: NADEO

Post Reply
zocka
Posts: 205
Joined: 15 Jun 2010, 17:56

[Showcase] Devtools

Post by zocka » 06 Dec 2016, 13:28

tl;dr
Proof of concept to inspect the manialink DOM, demo at ML devtools, some nice features described below.

Features
  • DOM inspection and modification of supported attributes
  • inspection of http requests
  • logging displayed in the tool
Storytime
My basic idea was to try how far I can get in terms of DOM-inspection and -modification.
Image
Unfortunately the current build of ManiaPlanet doesn't support enough element properties to completely change the manialink. Otherwise it could be possible to recreate a fluent manialink manialink editor (use a pool of free elements and persist and reload, if we add more elements or attributes that cannot be changed with maniascript).
As TMT already supports a wider range of properties, I could update my script for MP4, but I doubt I'd find the motivation.

As the most DOM-related stuff is quite trivial, I had further plans:
Image
The requests-panel displays all™ fired requests. It can be helpful to see which images or XH requests cannot be loaded or what some APIs return. Of course I am quite limited with my data (see issues below).

Usage
Script: http://maniacdn.net/proni/mldevtools/dominspect.xml
Readme: http://maniacdn.net/proni/mldevtools/readme.md

Code: Select all

<script><![CDATA[
#Include "TextLib" as TextLib
#Include "MathLib" as MathLib
// other constraints
]]></script>
<include url="http://maniacdn.net/proni/mldevtools/dominspect.xml" />
<script><![CDATA[
// some global declarations, functions and stuff
main() {
    // again, stuff
    +++ DomInspect_Main +++
    while (True) {
        +++ DomInspect_Loop +++
        // there goes your stuff again
        yield;
    }
}
]]></script>
The window can be opened with F12.

Takeaways
For me the most interesting part is the element selection where you can select an element from the screen. Unfortunately this requires some asynchronous pre-processing, but depending on the use-case we could even handle mouse events (over, enter, out, leave, click (element b on top of other element a would trigger mouseout on a, which might not be what one wants)) on elements without scriptevents (possible use-case for a manialink manialink editor :D). Read more on that mechanic in the readme linked above. Other than that there are some useful related functions for getting boundingbox edges and isMouseOver elements.
Of course nothing here is notably complicated but maybe useful for other use-cases.

Issues
General
  • Scrolling sometimes buggy
DOM-inspection
  • Property problems
    • Missing properties
    • ([Bug] CMlGauge can't unset DrawBackground)
    • Colors in the GUI editor support RRGGBBAA
    • Not always possible to distinguish between default values to omit when applying new data (especially vector values)
  • Picking elements doesn't always select the correct line.
  • Colorpicker is buggy, idk why, but it wasn't my focus
Requests-panel
  • If you are not using the decorator functions Http_CreateGet or Http_CreatePost the script doesn't know which method is used
  • The displayed times are horribly inaccurate:

    Code: Select all

    while(True):
      # DomInspect looks for requests [1]
      # UserScript handles requests [2]
      # Other code [3]
      yield
    
    • [1]: no requests -> [2]: create request -> yield -> [1]: request found, request complete => finished in ~0ms
    • [1]: no requests -> [2]: create request -> yield -> [1]: request found -> [2]: request complete -> yield -> [1]: => finished in x+yield
    • [3] requires too much time (e.g. JSON parsing) and delays further execution
Futher plans
I doubt that I will work any further than that (as MP4 might bring notable breaking changes and noone really cares), but I had some plans I wanted to implemented before I lost my motivation:
  • [Colorpicker] make color field (maybe sliders) clickable, not just the cursor
  • [Inspector] Possibility to move and resize elements with dragging them around
  • [Inspector] Identify elements by DOM path, maybe like XPath
  • [Inspector] Track element changes
manialink minigame shatter
my manialink: zockaml
my maniaflash: maniaflash?zocka

reaby
Posts: 936
Joined: 29 Dec 2010, 23:26
Location: Eastern Finland
Contact:

Re: [Showcase] Devtools

Post by reaby » 06 Dec 2016, 13:54

How cool is this! :thumbsup: :thumbsup: :thumbsup: :thumbsup: :thumbsup:

User avatar
Miss
Posts: 1469
Joined: 05 Jan 2016, 11:34
Location: The Netherlands
Contact:

Re: [Showcase] Devtools

Post by Miss » 06 Dec 2016, 22:06

Nice work!
1070 GTX, i7 4790k, 16GB RAM, Windows 10
Forum moderator, opinions are my own. :thx:
Check out Image openplanet, the alternative Maniaplanet & Turbo scripting platform! (Openplanet subforum)
I also stream on Twitch and tweet on Twitter.

Post Reply

Return to “ManiaLink”

Who is online

Users browsing this forum: No registered users and 2 guests