Merge pull request #8605 from adobe/randy/issue-7886

Fix Live Preview for Docs not in Working Set

Author: JeffryBooher

src/LiveDevelopment/Documents/HTMLDocument.js

@@ -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"),
@@ -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();
         }
+
         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);
         }
@@ -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);
         }
 
@@ -124,13 +116,19 @@ define(function HTMLDocumentModule(require, exports, module) {
         };
     };
 
-    /** Close the document */
+    /**
+     * Close the document
+     */
     HTMLDocument.prototype.close = function close() {
-        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) {
@@ -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) {
+        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
+        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,
@@ -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();
@@ -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) {
@@ -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) {
+        this._removeHighlight();
         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;
-});
+});