refactor: remove highlight flag as we use mode now for preview, edit and hilight

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -4442,7 +4442,7 @@ function RemoteFunctions(config = {}) {
     }
 
     function enableHoverListeners() {
-        if (config.mode === 'edit' && (config.highlight || shouldShowHighlightOnHover())) {
+        if (config.mode === 'edit' && shouldShowHighlightOnHover()) {
             window.document.removeEventListener("mouseover", onElementHover);
             window.document.removeEventListener("mouseout", onElementHoverOut);
 
@@ -5106,7 +5106,6 @@ function RemoteFunctions(config = {}) {
         const newHighlightMode = getHighlightMode();
         const highlightModeChanged = oldHighlightMode !== newHighlightMode;
         const isModeChanged = oldConfig.mode !== config.mode;
-        const highlightSettingChanged = oldConfig.highlight !== config.highlight;
 
         // Update hot corner state when mode changes
         // Show animation when mode changes to help users discover the feature
@@ -5115,7 +5114,7 @@ function RemoteFunctions(config = {}) {
         }
 
         // Handle configuration changes
-        if (highlightModeChanged || isModeChanged || highlightSettingChanged) {
+        if (highlightModeChanged || isModeChanged) {
             _handleConfigurationChange();
         }
 
@@ -5147,7 +5146,7 @@ function RemoteFunctions(config = {}) {
     function _updateEventListeners() {
         window.document.removeEventListener("mouseover", onElementHover);
         window.document.removeEventListener("mouseout", onElementHoverOut);
-        if (config.highlight || (config.mode === 'edit' && shouldShowHighlightOnHover())) {
+        if (config.mode === 'edit' && shouldShowHighlightOnHover()) {
             window.document.addEventListener("mouseover", onElementHover);
             window.document.addEventListener("mouseout", onElementHoverOut);
         }

src/LiveDevelopment/LivePreviewConstants.js

@@ -0,0 +1,38 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ * Original work Copyright (c) 2012 - 2021 Adobe Systems Incorporated. All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/*global less, Phoenix */
+
+/**
+ * main integrates LiveDevelopment into Brackets
+ *
+ * This module creates two menu items:
+ *
+ *  "Go Live": open or close a Live Development session and visualize the status
+ *  "Highlight": toggle source highlighting
+ */
+define(function main(require, exports, module) {
+    exports.LIVE_PREVIEW_MODE = "preview";
+    exports.LIVE_HIGHLIGHT_MODE = "highlight";
+    exports.LIVE_EDIT_MODE = "edit";
+
+    exports.PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
+});

src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js

@@ -22,7 +22,8 @@
 define(function (require, exports, module) {
 
 
-    var EditorManager       = require("editor/EditorManager"),
+    const CONSTANTS           = require("LiveDevelopment/LivePreviewConstants"),
+        EditorManager       = require("editor/EditorManager"),
         EventDispatcher     = require("utils/EventDispatcher"),
         PreferencesManager  = require("preferences/PreferencesManager"),
         _                   = require("thirdparty/lodash");
@@ -62,17 +63,9 @@ define(function (require, exports, module) {
 
         this._onActiveEditorChange = this._onActiveEditorChange.bind(this);
         this._onCursorActivity = this._onCursorActivity.bind(this);
-        this._onHighlightPrefChange = this._onHighlightPrefChange.bind(this);
 
         EditorManager.on(`activeEditorChange.LiveDocument-${this.doc.file.fullPath}`, this._onActiveEditorChange);
 
-        PreferencesManager.stateManager.getPreference("livedevHighlight")
-            .on(`change.LiveDocument-${this.doc.file.fullPath}`, this._onHighlightPrefChange);
-
-        // Redraw highlights when window gets focus. This ensures that the highlights
-        // will be in sync with any DOM changes that may have occurred.
-        $(window).on(`focus.LiveDocument-${this.doc.file.fullPath}`, this._onHighlightPrefChange);
-
         if (editor) {
             // Attach now
             this._attachToEditor(editor);
@@ -88,9 +81,6 @@ define(function (require, exports, module) {
 
         this._clearErrorDisplay();
         this._detachFromEditor();
-        EditorManager.off(`activeEditorChange.LiveDocument-${this.doc.file.fullPath}`);
-        PreferencesManager.stateManager.getPreference("livedevHighlight")
-            .off(`change.LiveDocument-${this.doc.file.fullPath}`);
 
         $(window).off(`focus.LiveDocument-${this.doc.file.fullPath}`);
     };
@@ -128,18 +118,6 @@ define(function (require, exports, module) {
         };
     };
 
-    /**
-     * @private
-     * Handles changes to the "Live Highlight" preference, switching it on/off in the browser as appropriate.
-     */
-    LiveDocument.prototype._onHighlightPrefChange = function () {
-        if (this.isHighlightEnabled()) {
-            this.updateHighlight();
-        } else {
-            this.hideHighlight();
-        }
-    };
-
     /**
      * @private
      * Handles when the active editor changes, attaching to the new editor if it's for the current document.
@@ -264,7 +242,7 @@ define(function (require, exports, module) {
      * @return {boolean}
      */
     LiveDocument.prototype.isHighlightEnabled = function () {
-        return PreferencesManager.getViewState("livedevHighlight");
+        return PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_MODE) !== CONSTANTS.LIVE_PREVIEW_MODE;
     };
 
     /**

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -42,7 +42,8 @@ define(function (require, exports, module) {
     const EventDispatcher = require("utils/EventDispatcher");
 
     // Text of the script we'll inject into the browser that handles protocol requests.
-    const LiveDevProtocolRemote = require("text!LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js"),
+    const CONSTANTS           = require("LiveDevelopment/LivePreviewConstants"),
+        LiveDevProtocolRemote = require("text!LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js"),
         DocumentObserver      = require("text!LiveDevelopment/BrowserScripts/DocumentObserver.js"),
         LanguageManager     = require("language/LanguageManager"),
         RemoteFunctions       = require("text!LiveDevelopment/BrowserScripts/RemoteFunctions.js"),
@@ -148,9 +149,9 @@ define(function (require, exports, module) {
     }
 
     function _tagSelectedInLivePreview(tagId, nodeName, contentEditable, allSelectors) {
-        const highlightPref = PreferencesManager.getViewState("livedevHighlight");
-        if(!highlightPref){
-            // live preview highlight and reverse highlight feature is disabled
+        const livePreviewMode = PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_MODE);
+        if(livePreviewMode === CONSTANTS.LIVE_PREVIEW_MODE){
+            // hilights are enabled only in edit and highlight mode
             return;
         }
         const liveDoc = LiveDevMultiBrowser.getCurrentLiveDoc(),

src/LiveDevelopment/main.js

@@ -32,7 +32,8 @@
 define(function main(require, exports, module) {
 
 
-    const Commands            = require("command/Commands"),
+    const CONSTANTS           = require("LiveDevelopment/LivePreviewConstants"),
+        Commands            = require("command/Commands"),
         AppInit             = require("utils/AppInit"),
         MultiBrowserLiveDev = require("LiveDevelopment/LiveDevMultiBrowser"),
         LivePreviewTransport  = require("LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport"),
@@ -48,13 +49,15 @@ define(function main(require, exports, module) {
 
 
     const KernalModeTrust = window.KernalModeTrust;
+    const LIVE_PREVIEW_MODE = CONSTANTS.LIVE_PREVIEW_MODE,
+        LIVE_HIGHLIGHT_MODE = CONSTANTS.LIVE_HIGHLIGHT_MODE,
+        LIVE_EDIT_MODE = CONSTANTS.LIVE_EDIT_MODE;
 
     // this will later be assigned its correct values once entitlementsManager loads
     let isProUser = false;
     let isFreeTrialUser = false;
 
-    const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
-    const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
+    const PREFERENCE_LIVE_PREVIEW_MODE = CONSTANTS.PREFERENCE_LIVE_PREVIEW_MODE;
 
     // state manager key to track image gallery selected state, by default we keep this as selected
     // if this is true we show the image gallery when an image element is clicked
@@ -85,7 +88,6 @@ define(function main(require, exports, module) {
 
     var params = new UrlParams();
     var config = {
-        highlight: true, // enable highlighting?
         mode: _getDefaultMode(), // 'edit', 'highlight', or 'preview' - will be updated when preference loads
         elemHighlights: "hover", // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
@@ -101,7 +103,7 @@ define(function main(require, exports, module) {
     var prefs = PreferencesManager.getExtensionPrefs("livedev");
 
     // "livedev.remoteHighlight" preference
-    var PREF_REMOTEHIGHLIGHT = "remoteHighlight";
+    var PREF_REMOTEHIGHLIGHT = "remoteHighlight"; // todo remove this and put it inside remotefn itself
     var remoteHighlightPref = prefs.definePreference(PREF_REMOTEHIGHLIGHT, "object", {
         animateStartValue: {
             "background-color": "rgba(0, 162, 255, 0.5)",
@@ -237,27 +239,9 @@ define(function main(require, exports, module) {
             // Add checkmark when status is STATUS_ACTIVE; otherwise remove it
             CommandManager.get(Commands.FILE_LIVE_FILE_PREVIEW)
                 .setChecked(status === MultiBrowserLiveDev.STATUS_ACTIVE);
-            CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT)
-                .setEnabled(status === MultiBrowserLiveDev.STATUS_ACTIVE);
         });
     }
 
-    function _updateHighlightCheckmark() {
-        CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setChecked(config.highlight);
-        exports.trigger(EVENT_LIVE_HIGHLIGHT_PREF_CHANGED, config.highlight);
-    }
-
-    function togglePreviewHighlight() {
-        config.highlight = !config.highlight;
-        _updateHighlightCheckmark();
-        if (config.highlight) {
-            MultiBrowserLiveDev.showHighlight();
-        } else {
-            MultiBrowserLiveDev.hideHighlight();
-        }
-        PreferencesManager.setViewState("livedevHighlight", config.highlight);
-    }
-
     /** force reload the live preview currently only with shortcut ctrl-shift-R */
     function _handleReloadLivePreviewCommand() {
         if (MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
@@ -281,22 +265,22 @@ define(function main(require, exports, module) {
     // default mode means on first load for pro user we have edit mode
     // for free user we have highlight mode
     function _getDefaultMode() {
-        return isProUser ? "edit" : "highlight";
+        return isProUser ? LIVE_EDIT_MODE : LIVE_HIGHLIGHT_MODE;
     }
 
     // to set that mode in the preferences
     function _initializeMode() {
         if (isFreeTrialUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_EDIT_MODE);
             return;
         }
 
         const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
 
-        if (savedMode === "highlight" && isProUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
-        } else if (savedMode === "edit" && !isProUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
+        if (savedMode === LIVE_HIGHLIGHT_MODE && isProUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_EDIT_MODE);
+        } else if (savedMode === LIVE_EDIT_MODE && !isProUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE);
         }
     }
 
@@ -329,7 +313,7 @@ define(function main(require, exports, module) {
     }
 
     function setMode(mode) {
-        if (mode === "edit" && !exports.isProUser) {
+        if (mode === LIVE_EDIT_MODE && !exports.isProUser) {
             return false;
         }
         PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, mode);
@@ -340,6 +324,10 @@ define(function main(require, exports, module) {
         return PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
     }
 
+    function isInPreviewMode() {
+        return getCurrentMode() === LIVE_PREVIEW_MODE;
+    }
+
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
         params.parse();
@@ -353,7 +341,6 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.init(config);
 
         _loadStyles();
-        _updateHighlightCheckmark();
 
         // init pro user status and listen for changes
         if (KernalModeTrust) {
@@ -405,16 +392,6 @@ define(function main(require, exports, module) {
         WorkspaceManager.addEscapeKeyEventHandler("livePreview", _handleLivePreviewEscapeKey);
     });
 
-    // init prefs
-    PreferencesManager.stateManager.definePreference("livedevHighlight", "boolean", true)
-        .on("change", function () {
-            config.highlight = PreferencesManager.getViewState("livedevHighlight");
-            _updateHighlightCheckmark();
-            if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-                MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
-            }
-        });
-
     function _updateConfigMode() {
         const currentMode = getCurrentMode();
         config.mode = currentMode;
@@ -425,15 +402,14 @@ define(function main(require, exports, module) {
     }
 
     PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
-        description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
-        values: ["preview", "highlight", "edit"]
+        description: StringUtils.format(
+            Strings.LIVE_PREVIEW_MODE_PREFERENCE, LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE, LIVE_EDIT_MODE),
+        values: [LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE, LIVE_EDIT_MODE]
     }).on("change", function () {
         // when mode changes we update the config mode and notify remoteFunctions so that it can get updated
         _updateConfigMode();
     });
 
-    config.highlight = PreferencesManager.getViewState("livedevHighlight");
-
     // this function is responsible to update element highlight config
     // called from live preview extension when preference changes
     function updateElementHighlightConfig() {
@@ -453,11 +429,8 @@ define(function main(require, exports, module) {
     }
 
     // init commands
-    CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, togglePreviewHighlight);
     CommandManager.register(Strings.CMD_RELOAD_LIVE_PREVIEW, Commands.CMD_RELOAD_LIVE_PREVIEW, _handleReloadLivePreviewCommand);
 
-    CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setEnabled(false);
-
     EventDispatcher.makeEventDispatcher(exports);
 
     exports.isProUser = isProUser;
@@ -468,7 +441,6 @@ define(function main(require, exports, module) {
     exports.EVENT_CONNECTION_CLOSE = MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE;
     exports.EVENT_LIVE_PREVIEW_CLICKED = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_CLICKED;
     exports.EVENT_LIVE_PREVIEW_RELOAD = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_RELOAD;
-    exports.EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = EVENT_LIVE_HIGHLIGHT_PREF_CHANGED;
 
     // Export public functions
     exports.openLivePreview = openLivePreview;
@@ -477,7 +449,6 @@ define(function main(require, exports, module) {
     exports.isActive = isActive;
     exports.setLivePreviewPinned = setLivePreviewPinned;
     exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
-    exports.togglePreviewHighlight = togglePreviewHighlight;
     exports.setImageGalleryState = setImageGalleryState;
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
@@ -487,4 +458,5 @@ define(function main(require, exports, module) {
     exports.dismissLivePreviewBoxes = MultiBrowserLiveDev.dismissLivePreviewBoxes;
     exports.setMode = setMode;
     exports.getCurrentMode = getCurrentMode;
+    exports.isInPreviewMode = isInPreviewMode;
 });

src/command/Commands.js

@@ -103,9 +103,6 @@ define(function (require, exports, module) {
     /** Reloads live preview */
     exports.CMD_RELOAD_LIVE_PREVIEW     = "file.reloadLivePreview";     // LiveDevelopment/main.js      _handleReloadLivePreviewCommand()
 
-    /** Toggles live highlight */
-    exports.FILE_LIVE_HIGHLIGHT         = "file.previewHighlight";      // LiveDevelopment/main.js      _handlePreviewHighlightCommand()
-
     /** Opens project settings */
     exports.FILE_PROJECT_SETTINGS       = "file.projectSettings";       // ProjectManager.js            _projectSettings()
 

src/extensionsIntegrated/Phoenix-live-preview/BrowserStaticServer.js

@@ -34,8 +34,6 @@ define(function (require, exports, module) {
         Mustache = require("thirdparty/mustache/mustache"),
         FileSystem = require("filesystem/FileSystem"),
         EventDispatcher = require("utils/EventDispatcher"),
-        CommandManager     = require("command/CommandManager"),
-        Commands           = require("command/Commands"),
         StringUtils       = require("utils/StringUtils"),
         EventManager = require("utils/EventManager"),
         LivePreviewSettings  = require("./LivePreviewSettings"),
@@ -730,11 +728,8 @@ define(function (require, exports, module) {
         });
     });
 
-    function _isLiveHighlightEnabled() {
-        return CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).getChecked();
-    }
     exports.on(EVENT_EMBEDDED_IFRAME_ESCAPE_PRESS, function () {
-        if(!_isLiveHighlightEnabled()){
+        if(LiveDevelopment.isInPreviewMode()){
             return;
         }
         utils.focusActiveEditorIfFocusInLivePreview();