Skip to content

Commit f31f986

Browse files
devvaannshdevvaannsh
committed
feat: move edit elements on hover from settings to dropdown
1 parent c518ef1 commit f31f986

File tree

5 files changed

+48
-48
lines changed

5 files changed

+48
-48
lines changed

‎src/LiveDevelopment/main.js‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ define(function main(require, exports, module) {
5151

5252
const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
5353

54-
const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
55-
5654
var params = new UrlParams();
5755
var config = {
5856
experimental: false, // enable experimental features
@@ -311,22 +309,7 @@ define(function main(require, exports, module) {
311309
}
312310
});
313311

314-
// this function is responsible to update element highlight config
315-
function updateElementHighlightConfig() {
316-
const prefValue = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
317-
config.elemHighlights = prefValue || "hover";
318-
if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
319-
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
320-
MultiBrowserLiveDev.registerHandlers();
321-
}
322-
}
323-
324-
PreferencesManager.on("change", PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, function() {
325-
updateElementHighlightConfig();
326-
});
327-
328312
MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL, function (event, previewDetails) {
329-
updateElementHighlightConfig();
330313
exports.trigger(exports.EVENT_OPEN_PREVIEW_URL, previewDetails);
331314
});
332315
MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE, function (event, {clientId}) {
@@ -364,6 +347,17 @@ define(function main(require, exports, module) {
364347
}
365348
}
366349

350+
// this function is responsible to update element highlight config
351+
// called from live preview extension when preference changes
352+
function updateElementHighlightConfig() {
353+
const prefValue = PreferencesManager.get("livePreviewElementHighlights");
354+
config.elemHighlights = prefValue || "hover";
355+
if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
356+
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
357+
MultiBrowserLiveDev.registerHandlers();
358+
}
359+
}
360+
367361
// init commands
368362
CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, togglePreviewHighlight);
369363
CommandManager.register(Strings.CMD_RELOAD_LIVE_PREVIEW, Commands.CMD_RELOAD_LIVE_PREVIEW, _handleReloadLivePreviewCommand);
@@ -373,7 +367,6 @@ define(function main(require, exports, module) {
373367
EventDispatcher.makeEventDispatcher(exports);
374368

375369
exports.isLPEditFeaturesActive = isLPEditFeaturesActive;
376-
exports.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT;
377370

378371
// public events
379372
exports.EVENT_OPEN_PREVIEW_URL = MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL;
@@ -391,6 +384,7 @@ define(function main(require, exports, module) {
391384
exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
392385
exports.togglePreviewHighlight = togglePreviewHighlight;
393386
exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
387+
exports.updateElementHighlightConfig = updateElementHighlightConfig;
394388
exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
395389
exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
396390
exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

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

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141

4242
define(function (require, exports, module) {
4343
const livePreviewSettings = require("text!./livePreviewSettings.html"),
44-
LiveDevelopmentMain = require("LiveDevelopment/main"),
4544
Dialogs = require("widgets/Dialogs"),
4645
ProjectManager = require("project/ProjectManager"),
4746
Strings = require("strings"),
@@ -88,9 +87,6 @@ define(function (require, exports, module) {
8887
description: Strings.LIVE_DEV_SETTINGS_FRAMEWORK_PREFERENCES,
8988
values: Object.keys(SUPPORTED_FRAMEWORKS)
9089
});
91-
PreferencesManager.definePreference(LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, "string", "hover", {
92-
description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
93-
});
9490

9591
async function detectFramework($frameworkSelect, $hotReloadChk) {
9692
for(let framework of Object.keys(SUPPORTED_FRAMEWORKS)){
@@ -134,15 +130,12 @@ define(function (require, exports, module) {
134130
$hotReloadChk = $template.find("#hotReloadChk"),
135131
$hotReloadLabel = $template.find("#hotReloadLabel"),
136132
$frameworkLabel = $template.find("#frameworkLabel"),
137-
$frameworkSelect = $template.find("#frameworkSelect"),
138-
$elementHighlights = $template.find("#elementHighlightWrapper"), // to show/hide this setting
139-
$elementHighlight = $template.find("#elementHighlight"); // dropdown for highlight mode selection
133+
$frameworkSelect = $template.find("#frameworkSelect");
140134

141135
// Initialize form values from preferences
142136
$enableCustomServerChk.prop('checked', PreferencesManager.get(PREFERENCE_PROJECT_SERVER_ENABLED));
143137
$showLivePreviewAtStartup.prop('checked', PreferencesManager.get(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL));
144138
$hotReloadChk.prop('checked', !!PreferencesManager.get(PREFERENCE_PROJECT_SERVER_HOT_RELOAD_SUPPORTED));
145-
$elementHighlight.val(PreferencesManager.get(LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT));
146139

147140
if(PreferencesManager.get(PREFERENCE_PROJECT_PREVIEW_FRAMEWORK) === null) {
148141
detectFramework($frameworkSelect, $hotReloadChk);
@@ -171,12 +164,6 @@ define(function (require, exports, module) {
171164
$frameworkSelect.addClass("forced-hidden");
172165
$frameworkLabel.addClass("forced-hidden");
173166
}
174-
175-
if(LiveDevelopmentMain.isLPEditFeaturesActive) {
176-
$elementHighlights.removeClass("forced-hidden");
177-
} else {
178-
$elementHighlights.addClass("forced-hidden");
179-
}
180167
}
181168

182169
$livePreviewServerURL.on("input", refreshValues);
@@ -190,12 +177,6 @@ define(function (require, exports, module) {
190177
PreferencesManager.set(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL, $showLivePreviewAtStartup.is(":checked"));
191178
_saveProjectPreferences($enableCustomServerChk.is(":checked"), $livePreviewServerURL.val(),
192179
$serveRoot.val(), $hotReloadChk.is(":checked"), $frameworkSelect.val());
193-
194-
// Save element highlight preference
195-
PreferencesManager.set(
196-
LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT,
197-
$elementHighlight.val()
198-
);
199180
}
200181
resolve();
201182
});

‎src/extensionsIntegrated/Phoenix-live-preview/livePreviewSettings.html‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,6 @@ <h1 class="dialog-title">{{Strings.LIVE_DEV_SETTINGS_TITLE}}</h1>
2525
<input id="hotReloadChk" type="checkbox" class="form-check-input forced-hidden" style="margin-top: -2px; margin-left: 20px;">
2626
<label id="hotReloadLabel" class="form-check-label forced-hidden" for="hotReloadChk" style="display: inline" title="{{Strings.LIVE_DEV_SETTINGS_RELOAD_HELP}}">{{Strings.LIVE_DEV_SETTINGS_RELOAD}}</label>
2727
</div>
28-
29-
<div class="form-group" id="elementHighlightWrapper" style="margin-top: 9px; margin-left: 22px; display: flex; gap: 10px;">
30-
<label for="elementHighlight" style="margin-top: 5px;">{{Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT}} </label>
31-
<select name="elementHighlight" id="elementHighlight">
32-
<option value="hover">{{Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_HOVER}}</option>
33-
<option value="click">{{Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_CLICK}}</option>
34-
</select>
35-
</div>
3628
</div>
3729
</div>
3830
<div class="modal-footer" style="">

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

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ define(function (require, exports, module) {
9595
values: ["preview", "highlight", "edit"]
9696
});
9797

98+
// live preview element highlights preference (whether on hover or click)
99+
const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
100+
PreferencesManager.definePreference(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, "string", "hover", {
101+
description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
102+
});
103+
98104
const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
99105
const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
100106
const LIVE_PREVIEW_IFRAME_HTML = `
@@ -224,10 +230,22 @@ define(function (require, exports, module) {
224230

225231
function _showModeSelectionDropdown(event) {
226232
const items = [
227-
Strings.LIVE_PREVIEW_MODE_PREVIEW, Strings.LIVE_PREVIEW_MODE_HIGHLIGHT, Strings.LIVE_PREVIEW_MODE_EDIT
233+
Strings.LIVE_PREVIEW_MODE_PREVIEW,
234+
Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
235+
Strings.LIVE_PREVIEW_MODE_EDIT,
236+
"---",
237+
Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON
228238
];
229239

230-
const dropdown = new DropdownButton.DropdownButton("", items);
240+
const dropdown = new DropdownButton.DropdownButton("", items, function(item, index) {
241+
if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
242+
const isHoverMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) !== "click";
243+
if(isHoverMode) {
244+
return `✓ ${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
245+
}
246+
}
247+
return item;
248+
});
231249

232250
// Append to document body for absolute positioning
233251
$("body").append(dropdown.$button);
@@ -257,6 +275,12 @@ define(function (require, exports, module) {
257275
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
258276
} else if (index === 2) {
259277
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
278+
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
279+
// Toggle between hover and click
280+
const currentMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
281+
const newMode = currentMode !== "click" ? "click" : "hover";
282+
PreferencesManager.set(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, newMode);
283+
return; // Don't dismiss highlights for this option
260284
}
261285

262286
// need to dismiss the previous highlighting and stuff
@@ -960,6 +984,14 @@ define(function (require, exports, module) {
960984
_updateModeButton(newMode);
961985
});
962986

987+
// Handle element highlight preference changes from this extension
988+
PreferencesManager.on("change", PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, function() {
989+
LiveDevelopment.updateElementHighlightConfig();
990+
});
991+
992+
// Initialize element highlight config on startup
993+
LiveDevelopment.updateElementHighlightConfig();
994+
963995
LiveDevelopment.openLivePreview();
964996
LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);
965997
LiveDevelopment.on(LiveDevelopment.EVENT_LIVE_PREVIEW_RELOAD, ()=>{

‎src/nls/root/strings.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ define({
193193
"LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",
194194
"LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
195195
"LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
196+
"LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Edit Highlights on Hover",
196197
"LIVE_PREVIEW_MODE_PREFERENCE": "{0} shows only the webpage, {1} connects the webpage to your code - click on elements to jump to their code and vice versa, {2} provides highlighting along with advanced element manipulation",
197198

198199
"LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened",

0 commit comments

Comments
 (0)