Skip to content

Commit 071ced4

Browse files
devvaannshdevvaannsh
committed
feat: add a setting to show elements highlights on hover or click
1 parent fb5ca41 commit 071ced4

4 files changed

Lines changed: 44 additions & 15 deletions

File tree

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@
3030
*/
3131
function RemoteFunctions(config) {
3232

33-
// this is responsible to make the advanced live preview features active or inactive
34-
let isLPEditFeaturesActive = false;
35-
3633
// this will store the element that was clicked previously (before the new click)
3734
// we need this so that we can remove click styling from the previous element when a new element is clicked
3835
let previouslyClickedElement = null;
@@ -641,7 +638,7 @@ function RemoteFunctions(config) {
641638
create: function() {
642639
this.remove(); // remove existing box if already present
643640

644-
if(!isLPEditFeaturesActive) {
641+
if(!config.isLPEditFeaturesActive) {
645642
return;
646643
}
647644

@@ -834,7 +831,7 @@ function RemoteFunctions(config) {
834831
create: function() {
835832
this.remove(); // remove existing box if already present
836833

837-
if(!isLPEditFeaturesActive) {
834+
if(!config.isLPEditFeaturesActive) {
838835
return;
839836
}
840837

@@ -1205,7 +1202,7 @@ function RemoteFunctions(config) {
12051202
}
12061203

12071204
function onElementHover(event) {
1208-
if (_hoverHighlight && isLPEditFeaturesActive) {
1205+
if (_hoverHighlight && config.isLPEditFeaturesActive) {
12091206
_hoverHighlight.clear();
12101207

12111208
// Skip highlighting for HTML and BODY tags and for DOM elements which doesn't have 'data-brackets-id'
@@ -1236,7 +1233,7 @@ function RemoteFunctions(config) {
12361233
}
12371234

12381235
function onElementHoverOut(event) {
1239-
if (_hoverHighlight && isLPEditFeaturesActive) {
1236+
if (_hoverHighlight && config.isLPEditFeaturesActive) {
12401237
_hoverHighlight.clear();
12411238

12421239
// Restore original background color
@@ -1265,7 +1262,7 @@ function RemoteFunctions(config) {
12651262
function onClick(event) {
12661263
// make sure that the feature is enabled and also the clicked element has the attribute 'data-brackets-id'
12671264
if (
1268-
isLPEditFeaturesActive &&
1265+
config.isLPEditFeaturesActive &&
12691266
event.target.hasAttribute("data-brackets-id") &&
12701267
event.target.tagName !== "BODY" &&
12711268
event.target.tagName !== "HTML"
@@ -1314,7 +1311,7 @@ function RemoteFunctions(config) {
13141311
*/
13151312
function onDoubleClick(event) {
13161313
if (
1317-
isLPEditFeaturesActive &&
1314+
config.isLPEditFeaturesActive &&
13181315
event.target.hasAttribute("data-brackets-id") &&
13191316
event.target.tagName !== "BODY" &&
13201317
event.target.tagName !== "HTML"
@@ -1786,7 +1783,7 @@ function RemoteFunctions(config) {
17861783

17871784
// Function to handle direct editing of elements in the live preview
17881785
function startEditing(element) {
1789-
if (!isLPEditFeaturesActive
1786+
if (!config.isLPEditFeaturesActive
17901787
|| !element
17911788
|| element.tagName === "BODY"
17921789
|| element.tagName === "HTML"
@@ -1835,7 +1832,7 @@ function RemoteFunctions(config) {
18351832
// Function to finish editing and apply changes
18361833
// isEditSuccessful: this is a boolean value, defaults to true. false only when the edit operation is cancelled
18371834
function finishEditing(element, isEditSuccessful = true) {
1838-
if (!isLPEditFeaturesActive || !element || !element.hasAttribute("contenteditable")) {
1835+
if (!config.isLPEditFeaturesActive || !element || !element.hasAttribute("contenteditable")) {
18391836
return;
18401837
}
18411838

@@ -1866,7 +1863,7 @@ function RemoteFunctions(config) {
18661863
// init
18671864
_editHandler = new DOMEditHandler(window.document);
18681865

1869-
if (isLPEditFeaturesActive) {
1866+
if (config.isLPEditFeaturesActive) {
18701867
// Initialize hover highlight with Chrome-like colors
18711868
_hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
18721869

‎src/LiveDevelopment/main.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,15 @@ define(function main(require, exports, module) {
4545
EventDispatcher = require("utils/EventDispatcher"),
4646
WorkspaceManager = require("view/WorkspaceManager");
4747

48+
49+
// this is responsible to make the advanced live preview features active or inactive
50+
let isLPEditFeaturesActive = true;
51+
4852
const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
4953

54+
const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
55+
const elemHighlightsPrefValue = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
56+
5057
var params = new UrlParams();
5158
var config = {
5259
experimental: false, // enable experimental features
@@ -58,7 +65,9 @@ define(function main(require, exports, module) {
5865
marginColor: {r: 246, g: 178, b: 107, a: 0.66},
5966
paddingColor: {r: 147, g: 196, b: 125, a: 0.66},
6067
showInfo: true
61-
}
68+
},
69+
isLPEditFeaturesActive: isLPEditFeaturesActive,
70+
elemHighlights: elemHighlightsPrefValue
6271
};
6372
// Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
6473
var _status,
@@ -330,6 +339,9 @@ define(function main(require, exports, module) {
330339

331340
EventDispatcher.makeEventDispatcher(exports);
332341

342+
exports.isLPEditFeaturesActive = isLPEditFeaturesActive;
343+
exports.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT;
344+
333345
// public events
334346
exports.EVENT_OPEN_PREVIEW_URL = MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL;
335347
exports.EVENT_CONNECTION_CLOSE = MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE;

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141

4242
define(function (require, exports, module) {
4343
const livePreviewSettings = require("text!./livePreviewSettings.html"),
44+
LiveDevelopmentMain = require("LiveDevelopment/main"),
4445
Dialogs = require("widgets/Dialogs"),
4546
ProjectManager = require("project/ProjectManager"),
4647
Strings = require("strings"),
@@ -87,7 +88,10 @@ define(function (require, exports, module) {
8788
description: Strings.LIVE_DEV_SETTINGS_FRAMEWORK_PREFERENCES,
8889
values: Object.keys(SUPPORTED_FRAMEWORKS)
8990
});
90-
91+
PreferencesManager.definePreference(LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, "string", "hover", {
92+
description: "show live preview element highlights on 'hover' or 'click'. Defaults to 'hover'"
93+
});
94+
9195
async function detectFramework($frameworkSelect, $hotReloadChk) {
9296
for(let framework of Object.keys(SUPPORTED_FRAMEWORKS)){
9397
const configFile = SUPPORTED_FRAMEWORKS[framework].configFile,
@@ -130,7 +134,8 @@ define(function (require, exports, module) {
130134
$hotReloadChk = $template.find("#hotReloadChk"),
131135
$hotReloadLabel = $template.find("#hotReloadLabel"),
132136
$frameworkLabel = $template.find("#frameworkLabel"),
133-
$frameworkSelect = $template.find("#frameworkSelect");
137+
$frameworkSelect = $template.find("#frameworkSelect"),
138+
$elementHighlights = $template.find("#elementHighlightWrapper");
134139
$enableCustomServerChk.prop('checked', PreferencesManager.get(PREFERENCE_PROJECT_SERVER_ENABLED));
135140
$showLivePreviewAtStartup.prop('checked', PreferencesManager.get(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL));
136141
$hotReloadChk.prop('checked', !!PreferencesManager.get(PREFERENCE_PROJECT_SERVER_HOT_RELOAD_SUPPORTED));
@@ -163,6 +168,12 @@ define(function (require, exports, module) {
163168
$frameworkSelect.addClass("forced-hidden");
164169
$frameworkLabel.addClass("forced-hidden");
165170
}
171+
172+
if(LiveDevelopmentMain.isLPEditFeaturesActive) {
173+
$elementHighlights.removeClass("forced-hidden");
174+
} else {
175+
$elementHighlights.addClass("forced-hidden");
176+
}
166177
}
167178

168179
$livePreviewServerURL.on("input", refreshValues);

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ <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">
30+
<hr>
31+
<label for="elementHighlight">Show Live Preview Element Highlights on: </label>
32+
<select name="elementHighlight" id="elementHighlight">
33+
<option value="hover">Hover</option>
34+
<option value="click">Click</option>
35+
</select>
36+
</div>
2837
</div>
2938
</div>
3039
<div class="modal-footer" style="">

0 commit comments

Comments
 (0)