Skip to content

Commit 96669c8

Browse files
aboseabose
committed
fix: reliable config passing between phcode and live preview
1 parent 7e8f524 commit 96669c8

File tree

6 files changed

+77
-57
lines changed

6 files changed

+77
-57
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5338,7 +5338,7 @@ function RemoteFunctions(config = {}) {
53385338

53395339
function updateConfig(newConfig) {
53405340
const oldConfig = config;
5341-
config = JSON.parse(newConfig);
5341+
config = newConfig;
53425342

53435343
// update image gallery selected state as per the new config
53445344
if (config.imageGalleryState !== undefined) {
@@ -5825,13 +5825,21 @@ function RemoteFunctions(config = {}) {
58255825

58265826
registerHandlers();
58275827

5828+
function _requestConfigRefresh() {
5829+
// send image gallery state change message to editor to save preference in state manager
5830+
window._Brackets_MessageBroker.send({
5831+
requestConfigRefresh: true
5832+
});
5833+
}
5834+
58285835
// init the hot corner after the DOM is ready
58295836
if (document.readyState === 'loading') {
58305837
document.addEventListener('DOMContentLoaded', () => {
58315838
if (!_hotCorner && !isUnitTestWindow) {
58325839
_hotCorner = new HotCorner();
58335840
_hotCorner.updateState(config.mode === 'preview');
58345841
}
5842+
_requestConfigRefresh();
58355843
});
58365844
} else {
58375845
// or if the DOM is already ready then init directly

‎src/LiveDevelopment/LiveDevMultiBrowser.js‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,8 @@ define(function (require, exports, module) {
128128
*/
129129
var _server;
130130

131+
let _config = {};
132+
131133
/**
132134
* @private
133135
* Determine which live document class should be used for a given document
@@ -375,6 +377,18 @@ define(function (require, exports, module) {
375377
);
376378
}
377379

380+
function _updateVirtualServerScripts() {
381+
if(!_server){
382+
return;
383+
}
384+
_server.addVirtualContentAtPath(
385+
`${_liveDocument.doc.file.parentPath}${LiveDevProtocol.LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME}`,
386+
_protocol.getRemoteScriptContents());
387+
_server.addVirtualContentAtPath(
388+
`${_liveDocument.doc.file.parentPath}${LiveDevProtocol.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME}`,
389+
PageLoaderWorkerScript);
390+
}
391+
378392
/**
379393
* @private
380394
* Creates the main live document for a given HTML document and notifies the server it exists.
@@ -389,12 +403,7 @@ define(function (require, exports, module) {
389403
return;
390404
}
391405
_server.add(_liveDocument);
392-
_server.addVirtualContentAtPath(
393-
`${_liveDocument.doc.file.parentPath}${LiveDevProtocol.LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME}`,
394-
_protocol.getRemoteScriptContents());
395-
_server.addVirtualContentAtPath(
396-
`${_liveDocument.doc.file.parentPath}${LiveDevProtocol.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME}`,
397-
PageLoaderWorkerScript);
406+
_updateVirtualServerScripts();
398407
}
399408

400409

@@ -649,7 +658,7 @@ define(function (require, exports, module) {
649658
* Initialize the LiveDevelopment module.
650659
*/
651660
function init(config) {
652-
exports.config = config;
661+
_config = config;
653662
MainViewManager
654663
.on("currentFileChange", _onFileChange);
655664
DocumentManager
@@ -702,12 +711,29 @@ define(function (require, exports, module) {
702711
/**
703712
* Update configuration in the remote browser
704713
*/
705-
function updateConfig(configJSON) {
714+
function updateConfig(config) {
715+
_config = config;
716+
_updateVirtualServerScripts();
717+
refreshConfig();
718+
}
719+
720+
/**
721+
* Refresh all live previews with existing configuration in the remote browser
722+
*/
723+
function refreshConfig() {
706724
if (_protocol) {
707-
_protocol.evaluate("_LD.updateConfig(" + JSON.stringify(configJSON) + ")");
725+
_protocol.evaluate("_LD.updateConfig(" + JSON.stringify(_config) + ")");
708726
}
709727
}
710728

729+
/**
730+
* gets configuration used to set in the remote browser
731+
*/
732+
function getConfig() {
733+
// not using structured clone as it's not fast for small objects
734+
return JSON.parse(JSON.stringify(_config || {}));
735+
}
736+
711737
/**
712738
* Originally unload and reload agents. It doesn't apply for this new implementation.
713739
* @return {jQuery.Promise} Already resolved promise.
@@ -774,7 +800,9 @@ define(function (require, exports, module) {
774800
exports.showHighlight = showHighlight;
775801
exports.hideHighlight = hideHighlight;
776802
exports.redrawHighlight = redrawHighlight;
803+
exports.getConfig = getConfig;
777804
exports.updateConfig = updateConfig;
805+
exports.refreshConfig = refreshConfig;
778806
exports.init = init;
779807
exports.isActive = isActive;
780808
exports.setLivePreviewPinned= setLivePreviewPinned;

‎src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,9 +224,9 @@ define(function (require, exports, module) {
224224
* only processed once and not from any reflections.
225225
*/
226226
function _receive(clientId, msgStr, messageID) {
227-
var msg = JSON.parse(msgStr),
228-
event = msg.method || "event",
229-
deferred;
227+
const msg = JSON.parse(msgStr),
228+
event = msg.method || "event";
229+
let deferred;
230230
if(messageID && processedMessageIDs.has(messageID)){
231231
return; // this message is already processed.
232232
} else if (messageID) {
@@ -238,6 +238,10 @@ define(function (require, exports, module) {
238238
return;
239239
}
240240
}
241+
if(msg.requestConfigRefresh){
242+
LiveDevMultiBrowser.refreshConfig();
243+
return;
244+
}
241245

242246
if (msg.id) {
243247
deferred = _responseDeferreds[msg.id];
@@ -389,7 +393,7 @@ define(function (require, exports, module) {
389393
script += DocumentObserver;
390394
// Inject remote functions into the browser.
391395
script += "\nwindow._LD=(" + effectiveRemoteFunctionsScripts +
392-
"(" + JSON.stringify(LiveDevMultiBrowser.config) + "))";
396+
"(" + JSON.stringify(LiveDevMultiBrowser.getConfig()) + "))";
393397
return "\n" + script + "\n";
394398
}
395399

‎src/LiveDevelopment/main.js‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,13 @@ define(function main(require, exports, module) {
8585
StateManager.set(IMAGE_GALLERY_STATE, state);
8686

8787
// update the config with the new state
88+
const config = MultiBrowserLiveDev.getConfig();
8889
config.imageGalleryState = state;
89-
refreshConfigInLivePreview();
90+
MultiBrowserLiveDev.updateConfig(config);
9091
}
9192

9293
let params = new UrlParams();
93-
const config = {
94+
const defaultConfig = {
9495
mode: LIVE_HIGHLIGHT_MODE, // will be updated when we fetch entitlements
9596
elemHighlights: "hover", // default value, this will get updated when the extension loads
9697
showRulerLines: false, // default value, this will get updated when the extension loads
@@ -259,12 +260,8 @@ define(function main(require, exports, module) {
259260
/** Initialize LiveDevelopment */
260261
AppInit.appReady(function () {
261262
params.parse();
262-
config.mode = getCurrentMode(); // update config.mode with current preference value
263-
264-
// init experimental multi-browser implementation
265-
// it can be enable by setting 'livedev.multibrowser' preference to true.
266-
// It has to be initiated at this point in case of dynamically switching
267-
// by changing the preference value.
263+
const config = MultiBrowserLiveDev.getConfig() || defaultConfig;
264+
config.mode = getCurrentMode();
268265
MultiBrowserLiveDev.init(config);
269266

270267
_loadStyles();
@@ -305,28 +302,25 @@ define(function main(require, exports, module) {
305302
// we will get another update event for this immediately, so just return.
306303
return;
307304
}
305+
const config = MultiBrowserLiveDev.getConfig();
308306
config.mode = currentMode;
309-
refreshConfigInLivePreview();
310-
}
311-
312-
function refreshConfigInLivePreview() {
313-
if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
314-
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
315-
}
307+
MultiBrowserLiveDev.updateConfig(config);
316308
}
317309

318310
// this function is responsible to update element highlight config
319311
// called from live preview extension when preference changes
320312
function updateElementHighlightConfig() {
321313
const prefValue = PreferencesManager.get("livePreviewElementHighlights");
314+
const config = MultiBrowserLiveDev.getConfig();
322315
config.elemHighlights = prefValue || "hover";
323-
refreshConfigInLivePreview();
316+
MultiBrowserLiveDev.updateConfig(config);
324317
}
325318

326319
function updateRulerLinesConfig() {
327320
const prefValue = PreferencesManager.get("livePreviewShowRulerLines");
321+
const config = MultiBrowserLiveDev.getConfig();
328322
config.showRulerLines = prefValue || false;
329-
refreshConfigInLivePreview();
323+
MultiBrowserLiveDev.updateConfig(config);
330324
}
331325

332326
EventDispatcher.makeEventDispatcher(exports);

‎src/extensionsIntegrated/phoenix-pro/unit-tests/LivePreviewEdit-test.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,10 @@ define(function (require, exports, module) {
105105
// Disable edit mode features for core live preview tests
106106
// This ensures tests focus on basic live preview functionality without
107107
// edit mode interference (hover/click handlers)
108-
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
108+
if (LiveDevMultiBrowser && LiveDevMultiBrowser.getConfig()) {
109109
// Also update the remote browser configuration
110110
if (LiveDevMultiBrowser.updateConfig) {
111-
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
111+
LiveDevMultiBrowser.updateConfig(LiveDevMultiBrowser.getConfig());
112112
}
113113
}
114114

@@ -161,10 +161,10 @@ define(function (require, exports, module) {
161161

162162
async function waitsForLiveDevelopmentToOpen() {
163163
// Ensure edit mode is disabled before opening live preview
164-
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
164+
if (LiveDevMultiBrowser && LiveDevMultiBrowser.getConfig()) {
165165
// Update the remote browser configuration to sync the disabled state
166166
if (LiveDevMultiBrowser.updateConfig) {
167-
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
167+
LiveDevMultiBrowser.updateConfig(LiveDevMultiBrowser.getConfig());
168168
}
169169
}
170170
LiveDevMultiBrowser.open();
@@ -377,11 +377,12 @@ define(function (require, exports, module) {
377377

378378
async function waitsForLiveDevelopmentToOpenWithEditMode(elemHighlights = 'hover') {
379379
// Enable edit mode before opening live preview
380-
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
381-
LiveDevMultiBrowser.config.elemHighlights = elemHighlights;
380+
if (LiveDevMultiBrowser && LiveDevMultiBrowser.getConfig()) {
381+
const newConfig = LiveDevMultiBrowser.getConfig();
382+
newConfig.elemHighlights = elemHighlights;
382383
// Update the remote browser configuration
383384
if (LiveDevMultiBrowser.updateConfig) {
384-
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
385+
LiveDevMultiBrowser.updateConfig(newConfig);
385386
}
386387
}
387388
LiveDevMultiBrowser.open();
@@ -392,8 +393,10 @@ define(function (require, exports, module) {
392393
await _setLivePreviewMode(CONSTANTS.LIVE_HIGHLIGHT_MODE);
393394
LiveDevMultiBrowser.close();
394395
// Disable edit mode after session
395-
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
396-
LiveDevMultiBrowser.config.elemHighlights = 'hover';
396+
if (LiveDevMultiBrowser && LiveDevMultiBrowser.getConfig()) {
397+
const newConfig = LiveDevMultiBrowser.getConfig();
398+
newConfig.elemHighlights = 'hover';
399+
LiveDevMultiBrowser.updateConfig(newConfig);
397400
}
398401
await awaitsForDone(CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
399402
"closing all file");

‎test/spec/LiveDevelopmentMultiBrowser-test.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -114,16 +114,6 @@ define(function (require, exports, module) {
114114
await SpecRunnerUtils.loadProjectInTestWindow(testFolder);
115115
await SpecRunnerUtils.deletePathAsync(testFolder + "/.phcode.json", true);
116116

117-
// Disable edit mode features for core live preview tests
118-
// This ensures tests focus on basic live preview functionality without
119-
// edit mode interference (hover/click handlers)
120-
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
121-
// Also update the remote browser configuration
122-
if (LiveDevMultiBrowser.updateConfig) {
123-
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
124-
}
125-
}
126-
127117
if (!WorkspaceManager.isPanelVisible('live-preview-panel')) {
128118
await awaitsForDone(CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW));
129119
}
@@ -172,13 +162,6 @@ define(function (require, exports, module) {
172162
}
173163

174164
async function waitsForLiveDevelopmentToOpen() {
175-
// Ensure edit mode is disabled before opening live preview
176-
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
177-
// Update the remote browser configuration to sync the disabled state
178-
if (LiveDevMultiBrowser.updateConfig) {
179-
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
180-
}
181-
}
182165
LiveDevMultiBrowser.open();
183166
await waitsForLiveDevelopmentFileSwitch();
184167
}

0 commit comments

Comments
 (0)