[Showcase] Devtools

[zocka]

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.

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:

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 ). 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

[reaby]

How cool is this!

[Miss]

Nice work!