Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Fix Live Preview for Docs not in Working Set #8605

Merged
merged 6 commits into from
Aug 6, 2014
Merged

Fix Live Preview for Docs not in Working Set #8605

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e02e71d
handle live preview for docs not in working set
redmunds Jul 31, 2014
ba79595
jsdoc info
redmunds Aug 4, 2014
1f799cf
refactor to use a _removeHighlight() method
redmunds Aug 4, 2014
15285fa
more changes for code review
redmunds Aug 4, 2014
e058969
Merge remote-tracking branch 'origin/master' into randy/issue-7886
redmunds Aug 6, 2014
00fa553
code cleanup
redmunds Aug 6, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 113 additions & 36 deletions src/LiveDevelopment/Documents/HTMLDocument.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ define(function HTMLDocumentModule(require, exports, module) {

var DocumentManager = require("document/DocumentManager"),
DOMAgent = require("LiveDevelopment/Agents/DOMAgent"),
EditorManager = require("editor/EditorManager"),
HighlightAgent = require("LiveDevelopment/Agents/HighlightAgent"),
HTMLInstrumentation = require("language/HTMLInstrumentation"),
Inspector = require("LiveDevelopment/Inspector/Inspector"),
Expand All @@ -64,36 +65,26 @@ define(function HTMLDocumentModule(require, exports, module) {
var self = this;

this.doc = doc;
if (!editor) {
return;
if (this.doc) {
this.doc.addRef();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

}

this.editor = editor;
this._instrumentationEnabled = false;

// Performance optimization to use closures instead of Function.bind()
// to improve responsiveness during cursor movement and keyboard events
$(this.editor).on("cursorActivity.HTMLDocument", function (event, editor) {
self._onCursorActivity(event, editor);
});

$(this.editor).on("change.HTMLDocument", function (event, editor, change) {
self._onChange(event, editor, change);
});
this._onActiveEditorChange = this._onActiveEditorChange.bind(this);
$(EditorManager).on("activeEditorChange", this._onActiveEditorChange);

// Experimental code
if (LiveDevelopment.config.experimental) {
$(HighlightAgent).on("highlight.HTMLDocument", function (event, node) {
self._onHighlight(event, node);
});
}
// Attach now
this.attachToEditor(editor);
};

/**
* Enable instrumented HTML
* @param enabled {boolean}
* Enable or disable instrumented HTML
* @param {boolean} enabled Whether to enable or disable
*/
HTMLDocument.prototype.setInstrumentationEnabled = function setInstrumentationEnabled(enabled) {
if (enabled && !this._instrumentationEnabled) {
if (enabled && !this._instrumentationEnabled && this.editor) {
HTMLInstrumentation.scanDocument(this.doc);
HTMLInstrumentation._markText(this.editor);
}
Expand All @@ -111,11 +102,12 @@ define(function HTMLDocumentModule(require, exports, module) {

/**
* Returns a JSON object with HTTP response overrides
* @param {boolean} enabled (Unused)
* @return {{body: string}}
*/
HTMLDocument.prototype.getResponseData = function getResponseData(enabled) {
var body;
if (this._instrumentationEnabled) {
if (this._instrumentationEnabled && this.editor) {
body = HTMLInstrumentation.generateInstrumentedHTML(this.editor);
}

Expand All @@ -124,13 +116,19 @@ define(function HTMLDocumentModule(require, exports, module) {
};
};

/** Close the document */
/**
* Close the document
*/
HTMLDocument.prototype.close = function close() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good time to add some JSDoc here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

n/m i guess this is fully documented :)

if (!this.editor) {
return;
if (this.editor) {
$(this.editor).off(".HTMLDocument");
}

$(this.editor).off(".HTMLDocument");
if (this.doc) {
this.doc.releaseRef();
}

$(EditorManager).off("activeEditorChange", this._onActiveEditorChange);

// Experimental code
if (LiveDevelopment.config.experimental) {
Expand All @@ -139,7 +137,53 @@ define(function HTMLDocumentModule(require, exports, module) {
}
};

/** Update the highlight */
/**
* Attach new editor
* @param {!Editor} editor The editor for this document
*/
HTMLDocument.prototype.attachToEditor = function (editor) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs JSDoc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. FYI, I made a few other updates to to jsdocs beyond the places you mentioned.

var self = this;
this.editor = editor;

// Performance optimization to use closures instead of Function.bind()
// to improve responsiveness during cursor movement and keyboard events
$(this.editor).on("cursorActivity.HTMLDocument", function (event, editor) {
self._onCursorActivity(event, editor);
});

$(this.editor).on("change.HTMLDocument", function (event, editor, change) {
self._onChange(event, editor, change);
});

// Experimental code
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this is still experimental since it's been in there and working for quite some time now :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is still experimental code. The LiveDevelopment experimental highlighting is different from Live Preview Highlighting -- I think that's the code that allows you to click in browser and highlight in brackets.

With that said, all of the LiveDevelopment experimental code is so old that it probably no longer works and should be ripped out.

if (LiveDevelopment.config.experimental) {
$(HighlightAgent).on("highlight.HTMLDocument", function (event, node) {
self._onHighlight(event, node);
});
}

if (this._instrumentationEnabled) {
// Update instrumentation for new editor
HTMLInstrumentation.scanDocument(this.doc);
HTMLInstrumentation._markText(this.editor);
}
};

/**
* Detach current editor
*/
HTMLDocument.prototype.detachFromEditor = function () {
if (this.editor) {
HighlightAgent.hide();
$(this.editor).off(".HTMLDocument");
this._removeHighlight();
this.editor = null;
}
};

/**
* Update the highlight
*/
HTMLDocument.prototype.updateHighlight = function () {
var editor = this.editor,
codeMirror = editor._codeMirror,
Expand All @@ -165,9 +209,13 @@ define(function HTMLDocumentModule(require, exports, module) {

/** Event Handlers *******************************************************/

/** Triggered on cursor activity by the editor */
/**
* Triggered on cursor activity by the editor
* @param {$.Event} event Event
* @param {!Editor} editor The editor for this document
*/
HTMLDocument.prototype._onCursorActivity = function (event, editor) {
if (!this.editor) {
if (this.editor !== editor) {
return;
}
this.updateHighlight();
Expand Down Expand Up @@ -218,7 +266,12 @@ define(function HTMLDocumentModule(require, exports, module) {
});
};

/** Triggered on change by the editor */
/**
* Triggered on change by the editor
* @param {$.Event} event Event
* @param {!Editor} editor The editor for this document
* @param {Object} change CodeMirror editor change data
*/
HTMLDocument.prototype._onChange = function (event, editor, change) {
// Make sure LiveHTML is turned on
if (!this._instrumentationEnabled) {
Expand Down Expand Up @@ -294,29 +347,53 @@ define(function HTMLDocumentModule(require, exports, module) {
// }
};

/** Triggered by the HighlightAgent to highlight a node in the editor */
/**
* Triggered when the active editor changes
* @param {$.Event} event Event
* @param {!Editor} newActive The new active editor
* @param {!Editor} oldActive The old active editor
*/
HTMLDocument.prototype._onActiveEditorChange = function (event, newActive, oldActive) {
this.detachFromEditor();

if (newActive && newActive.document === this.doc) {
this.attachToEditor(newActive);
}
};

/**
* Triggered by the HighlightAgent to highlight a node in the editor
* @param {$.Event} event Event
* @param {DOMElement} node Element to highlight
*/
HTMLDocument.prototype._onHighlight = function (event, node) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should clean this up with some JSDoc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

this._removeHighlight();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we do this every time? We used to only do it when the _onHightlight was triggered without a dom node or editor.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, the highlight was getting cleared in both cases -- but it's hard to tell by looking at this diff since the clear code syncs up with the new _removeHighlight method. Take a look in master.

if (!node || !node.location || !this.editor) {
if (this._highlight) {
this._highlight.clear();
delete this._highlight;
}
return;
}

var codeMirror = this.editor._codeMirror;
var to, from = codeMirror.posFromIndex(node.location);
if (node.closeLocation) {
to = node.closeLocation + node.closeLength;
} else {
to = node.location + node.length;
}

to = codeMirror.posFromIndex(to);
this._highlight = codeMirror.markText(from, to, { className: "highlight" });
};

/**
* Remove all highlighting
*/
HTMLDocument.prototype._removeHighlight = function () {
if (this._highlight) {
this._highlight.clear();
this._highlight = null;
}
this._highlight = codeMirror.markText(from, to, { className: "highlight" });
};

// Export the class
module.exports = HTMLDocument;
});
});