Skip to content

Commit 0646743

Browse files
devvaannshdevvaannsh
committed
fix: pass the mode to the remoteFunctions instead of the isProUser boolean
1 parent 11d6a5a commit 0646743

File tree

3 files changed

+46
-64
lines changed

3 files changed

+46
-64
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ function RemoteFunctions(config = {}) {
132132
* this normally happens when content is DOM content is inserted by some scripting language
133133
*/
134134
function isElementInspectable(element, onlyHighlight = false) {
135-
if(!config.isProUser && !onlyHighlight) {
135+
if(config.mode !== 'edit' && !onlyHighlight) {
136136
return false;
137137
}
138138

@@ -148,10 +148,10 @@ function RemoteFunctions(config = {}) {
148148

149149
/**
150150
* This is a checker function for editable elements, it makes sure that the element satisfies all the required check
151-
* - When onlyHighlight is false → config.isProUser must be true
152-
* - When onlyHighlight is true → config.isProUser can be true or false (doesn't matter)
151+
* - When onlyHighlight is false → config.mode must be 'edit'
152+
* - When onlyHighlight is true → config.mode can be any mode (doesn't matter)
153153
* @param {DOMElement} element
154-
* @param {boolean} [onlyHighlight=false] - If true, bypasses the isProUser check
154+
* @param {boolean} [onlyHighlight=false] - If true, bypasses the mode check
155155
* @returns {boolean} - True if the element is editable else false
156156
*/
157157
function isElementEditable(element, onlyHighlight = false) {
@@ -2129,7 +2129,7 @@ function RemoteFunctions(config = {}) {
21292129
create: function() {
21302130
this.remove(); // remove existing box if already present
21312131

2132-
if(!config.isProUser) {
2132+
if(config.mode !== 'edit') {
21332133
return;
21342134
}
21352135

@@ -3886,7 +3886,7 @@ function RemoteFunctions(config = {}) {
38863886
}
38873887

38883888
function enableHoverListeners() {
3889-
if (config.isProUser && (config.highlight || shouldShowHighlightOnHover())) {
3889+
if (config.mode === 'edit' && (config.highlight || shouldShowHighlightOnHover())) {
38903890
window.document.removeEventListener("mouseover", onElementHover);
38913891
window.document.removeEventListener("mouseout", onElementHoverOut);
38923892

@@ -4542,10 +4542,10 @@ function RemoteFunctions(config = {}) {
45424542
const oldHighlightMode = oldConfig.elemHighlights ? oldConfig.elemHighlights.toLowerCase() : "hover";
45434543
const newHighlightMode = getHighlightMode();
45444544
const highlightModeChanged = oldHighlightMode !== newHighlightMode;
4545-
const isProStatusChanged = oldConfig.isProUser !== config.isProUser;
4545+
const isModeChanged = oldConfig.mode !== config.mode;
45464546
const highlightSettingChanged = oldConfig.highlight !== config.highlight;
45474547
// Handle configuration changes
4548-
if (highlightModeChanged || isProStatusChanged || highlightSettingChanged) {
4548+
if (highlightModeChanged || isModeChanged || highlightSettingChanged) {
45494549
_handleConfigurationChange();
45504550
}
45514551

@@ -4576,7 +4576,7 @@ function RemoteFunctions(config = {}) {
45764576
function _updateEventListeners() {
45774577
window.document.removeEventListener("mouseover", onElementHover);
45784578
window.document.removeEventListener("mouseout", onElementHoverOut);
4579-
if (config.highlight || (config.isProUser && shouldShowHighlightOnHover())) {
4579+
if (config.highlight || (config.mode === 'edit' && shouldShowHighlightOnHover())) {
45804580
window.document.addEventListener("mouseover", onElementHover);
45814581
window.document.addEventListener("mouseout", onElementHoverOut);
45824582
}
@@ -4781,7 +4781,7 @@ function RemoteFunctions(config = {}) {
47814781
}
47824782
}
47834783

4784-
if (config.isProUser) {
4784+
if (config.mode === 'edit') {
47854785
_hoverHighlight = new Highlight("#c8f9c5", true);
47864786
_clickHighlight = new Highlight("#cfc", true);
47874787
}
@@ -4929,7 +4929,7 @@ function RemoteFunctions(config = {}) {
49294929
window.document.removeEventListener("keydown", onKeyDown);
49304930
unregisterInteractionBlocker();
49314931

4932-
if (config.isProUser) {
4932+
if (config.mode === 'edit') {
49334933
// Initialize hover highlight with Chrome-like colors
49344934
_hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
49354935

‎src/LiveDevelopment/main.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ define(function main(require, exports, module) {
8787
var params = new UrlParams();
8888
var config = {
8989
highlight: true, // enable highlighting?
90-
isProUser: isProUser,
90+
mode: _getDefaultMode(), // 'edit', 'highlight', or 'preview' - will be updated when preference loads
9191
elemHighlights: "hover", // default value, this will get updated when the extension loads
9292
showRulerLines: false, // default value, this will get updated when the extension loads
9393
imageGalleryState: _getImageGalleryState(), // image gallery selected state
@@ -316,11 +316,11 @@ define(function main(require, exports, module) {
316316
isProUser = entitlement.activated;
317317
isFreeTrialUser = await KernalModeTrust.EntitlementsManager.isInProTrial();
318318

319-
config.isProUser = isProUser;
320319
exports.isProUser = isProUser;
321320
exports.isFreeTrialUser = isFreeTrialUser;
322321

323-
_initializeMode();
322+
_initializeMode(); // validates mode based on new entitlement
323+
config.mode = getCurrentMode(); // update config.mode after validation
324324

325325
if (MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
326326
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
@@ -349,6 +349,7 @@ define(function main(require, exports, module) {
349349
AppInit.appReady(function () {
350350
params.parse();
351351
config.remoteHighlight = prefs.get(PREF_REMOTEHIGHLIGHT);
352+
config.mode = getCurrentMode(); // update config.mode with current preference value
352353

353354
// init experimental multi-browser implementation
354355
// it can be enable by setting 'livedev.multibrowser' preference to true.
@@ -419,22 +420,26 @@ define(function main(require, exports, module) {
419420
}
420421
});
421422

422-
PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
423-
description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
424-
values: ["preview", "highlight", "edit"]
425-
});
423+
function _updateConfigMode() {
424+
const currentMode = getCurrentMode();
425+
config.mode = currentMode;
426426

427-
config.highlight = PreferencesManager.getViewState("livedevHighlight");
428-
429-
function setLivePreviewEditFeaturesActive(enabled) {
430-
isProUser = enabled;
431-
config.isProUser = enabled;
432427
if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
433428
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
434429
MultiBrowserLiveDev.registerHandlers();
435430
}
436431
}
437432

433+
PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
434+
description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
435+
values: ["preview", "highlight", "edit"]
436+
}).on("change", function () {
437+
// when mode changes we update the config mode and notify remoteFunctions so that it can get updated
438+
_updateConfigMode();
439+
});
440+
441+
config.highlight = PreferencesManager.getViewState("livedevHighlight");
442+
438443
// this function is responsible to update element highlight config
439444
// called from live preview extension when preference changes
440445
function updateElementHighlightConfig() {
@@ -480,7 +485,6 @@ define(function main(require, exports, module) {
480485
exports.setLivePreviewPinned = setLivePreviewPinned;
481486
exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
482487
exports.togglePreviewHighlight = togglePreviewHighlight;
483-
exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
484488
exports.setImageGalleryState = setImageGalleryState;
485489
exports.updateElementHighlightConfig = updateElementHighlightConfig;
486490
exports.updateRulerLinesConfig = updateRulerLinesConfig;

‎src/extensionsIntegrated/Phoenix-live-preview/main.js‎

Lines changed: 18 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -285,39 +285,6 @@ define(function (require, exports, module) {
285285
return CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).getChecked();
286286
}
287287

288-
/**
289-
* Live Preview 'Preview Mode'. in this mode no live preview highlight or any such features are active
290-
* Just the plain website
291-
*/
292-
function _LPPreviewMode() {
293-
LiveDevelopment.setLivePreviewEditFeaturesActive(false);
294-
if(_isLiveHighlightEnabled()) {
295-
LiveDevelopment.togglePreviewHighlight();
296-
}
297-
}
298-
299-
/**
300-
* Live Preview 'Highlight Mode'. in this mode only the live preview matching with the source code is active
301-
* Meaning that if user clicks on some element that element's source code will be highlighted and vice versa
302-
*/
303-
function _LPHighlightMode() {
304-
LiveDevelopment.setLivePreviewEditFeaturesActive(false);
305-
if(!_isLiveHighlightEnabled()) {
306-
LiveDevelopment.togglePreviewHighlight();
307-
}
308-
}
309-
310-
/**
311-
* Live Preview 'Edit Mode'. this is the most interactive mode, in here the highlight features are available
312-
* along with that we also show element's highlighted boxes and such
313-
*/
314-
function _LPEditMode() {
315-
LiveDevelopment.setLivePreviewEditFeaturesActive(true);
316-
if(!_isLiveHighlightEnabled()) {
317-
LiveDevelopment.togglePreviewHighlight();
318-
}
319-
}
320-
321288
/**
322289
* update the mode button text in the live preview toolbar UI based on the current mode
323290
* @param {String} mode - The current mode ("preview", "highlight", or "edit")
@@ -337,15 +304,26 @@ define(function (require, exports, module) {
337304
function _initializeMode() {
338305
const currentMode = LiveDevelopment.getCurrentMode();
339306

340-
if (currentMode === "highlight") {
341-
_LPHighlightMode();
342-
$previewBtn.removeClass('selected');
343-
} else if (currentMode === "edit") {
344-
_LPEditMode();
307+
// when in preview mode, we need to give the play button a selected state
308+
if (currentMode === "preview") {
309+
$previewBtn.addClass('selected');
310+
} else {
345311
$previewBtn.removeClass('selected');
312+
}
313+
314+
// Update highlight state based on mode
315+
const isHighlightEnabled = _isLiveHighlightEnabled();
316+
317+
if (currentMode === "preview") {
318+
// Preview mode: disable highlight
319+
if (isHighlightEnabled) {
320+
LiveDevelopment.togglePreviewHighlight();
321+
}
346322
} else {
347-
_LPPreviewMode();
348-
$previewBtn.addClass('selected');
323+
// Highlight or Edit mode: enable highlight
324+
if (!isHighlightEnabled) {
325+
LiveDevelopment.togglePreviewHighlight();
326+
}
349327
}
350328

351329
_updateModeButton(currentMode);

0 commit comments

Comments
 (0)