Building Live HTML and Omnisicent Debuggers

JSConf.eu 2013

Kevin Dangoor, Adobe / @dangoor, +KevinDangoor

Peter Flynn, Adobe / @knownissues

Code Editor?

HTML Live Development

• DEMO?

Constraining the Problem

• Update the page as the user types
• Do it quickly
• Try to replace a reasonably minimal part of the page

How hard can it be?

HTML (or XML) Diff Research

Daniel Ehrenberg wrote a paper surveying the research:

"BULD" was a Starting Point

The Biggest Difference

The Basic Process

Incremental or Full?

if (changeList && !changeList.next) {
    if (!isDangerousEdit(changeList.text) && !isDangerousEdit(changeList.removed)) {
        var startMark = _getMarkerAtDocumentPos(editor, changeList.from, true);
        if (startMark) {
            var range = startMark.find();
            if (range) {
                text = editor._codeMirror.getRange(range.from, range.to);
                this.changedTagID = startMark.tagID;
                startOffsetPos = range.from;
                startOffset = editor._codeMirror.indexFromPos(startOffsetPos);
                this.isIncremental = true;
            }
        }
    }
}

Subtrees

Tokenizing/Parsing

Simple DOM

Signatures

update: function () {
            if (this.isElement()) {
                var i,
                    subtreeHashes = "",
                    childHashes = "",
                    child;
                for (i = 0; i < this.children.length; i++) {
                    child = this.children[i];
                    if (child.isElement()) {
                        childHashes += String(child.tagID);
                        subtreeHashes += String(child.tagID) + child.attributeSignature + child.subtreeSignature;
                    } else {
                        childHashes += child.textSignature;
                        subtreeHashes += child.textSignature;
                    }
                }
                this.childSignature = MurmurHash3.hashString(childHashes, childHashes.length, seed);
                this.subtreeSignature = MurmurHash3.hashString(subtreeHashes, subtreeHashes.length, seed);
            } else {
                this.textSignature = MurmurHash3.hashString(this.content, this.content.length, seed);
            }
        },

Edit Example

Hi, JSConf.

We're merging paragraphs.

Example Simple DOM

Simple DOM (Changing)

Simple DOM (New)

Edit Example

Hi, JSConf.

We're merging paragraphs.

Diff Generation

Generating Child Edits

• Text nodes
• Moves
• Large structure changes

Old

New

When you see a difference...

var addElementInsert = function () {
    if (!oldNodeMap[newChild.tagID]) {
        newEdit = {
            type: "elementInsert",
            tag: newChild.tag,
            tagID: newChild.tagID,
            parentID: newChild.parent.tagID,
            attributes: newChild.attributes
        };
        
        newEdits.push(newEdit);        
        newElements.push(newChild);
        textAfterID = newChild.tagID;
        newIndex++;
        return true;
    }
    return false;
};

Performance

Nope.

The Bottleneck

Read More

Theseus

Omniscient Debugging

• Deep history of execution
• Step backwards
• Visualize entire history

Omniscient Debugging

• Deep history of execution
• Step backwards
• Visualize entire history
• Queryable dataset

Demo

How Theseus Works

Injected instrumentation

• Esprima + Falafel + modified JSHint
• Fondue instrumentation
• Serve up instrumented code
• Retrieve collected data in Brackets
• Visualize in Brackets UI

Fondue Instrumentation

Function entry/exit

function foo(x) {
    theseus.traceEnter({id: "foo", arguments: [x], this: this});
    return x + 1;
    theseus.traceExit({id: "foo"});
}

Fondue Instrumentation

Tracing invocations to callers

function foo(x) {
    // Call #1
    bar(x);
    // Call #2
    bar(x / 2);
}

function foo(x) {
    // Call #1
    theseus.traceFunCall("foo-bar1", {func: bar}, [x]);
    // Call #2
    theseus.traceFunCall("foo-bar2", {func: bar}, [x / 2]);
}

Fondue Instrumentation

Tracing *async* invocations

function foo(url) {
    $.get(url, function (data) {
        // ...
    });
}

function foo(url) {
    $.get(url, theseus.wrapCallback("foo_1", function (data) {
        // ...
    }) );
}

Read More

A Sandbox

Example: SVG live preview

define(function (require, exports, module) {
    "use strict";
    
    var DocumentManager = brackets.getModule("document/DocumentManager"),
        PanelManager    = brackets.getModule("view/PanelManager"),
        ExtensionUtils  = brackets.getModule("utils/ExtensionUtils");
    
    var previewPanel, currentDoc;
    
    function updatePanel() {
        // Update SVG display
        var $svgParent = $(".svg-preview", previewPanel.$panel);
        $svgParent.html(currentDoc.getText());
        
        var $svgRoot = $svgParent.children();
        $svgParent.width($svgRoot.width());
        $svgParent.height($svgRoot.height());
        
        // Update panel height
        var panelHeight = $svgRoot.height() + 30;
        if (panelHeight !== previewPanel.$panel.height()) {
            previewPanel.$panel.height(panelHeight);
            previewPanel.$panel.trigger("panelResizeUpdate");  // trigger editor resize
        }
    }
    
    function setPanel(newDoc) {
        // Detach from last doc & attach to new one
        if (currentDoc) {
            $(currentDoc).off("change", updatePanel);
        }
        currentDoc = newDoc;
        
        if (currentDoc) {
            $(currentDoc).on("change", updatePanel);
            previewPanel.show();
            updatePanel();
        } else {
            previewPanel.hide();
        }
    }
    
    ExtensionUtils.loadStyleSheet(module, "svg-preview.css");
    
    // Create panel
    var $panel = $("<div id='svg-preview-panel' class='inline-widget'><div class='svg-preview'></div></div>");
    previewPanel = PanelManager.createBottomPanel("svg-preview", $panel, 0);
    
    // Listen for editor switch
    $(DocumentManager).on("currentDocumentChange", function () {
        var newDoc = DocumentManager.getCurrentDocument();
        if (newDoc && newDoc.file.fullPath.match(/\.svg$/i)) {
            setPanel(newDoc);
        } else {
            setPanel(null);
        }
    });
});