Skip to content

Commit 40cd145

Browse files
devvaannshdevvaannsh
committed
feat: show element highlights boxes when user edits source code for a particular element
1 parent a47562f commit 40cd145

File tree

1 file changed

+56
-16
lines changed

1 file changed

+56
-16
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 56 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,19 @@ function RemoteFunctions(config) {
6565
return event.ctrlKey;
6666
}
6767

68+
// helper function to check if an element is inside the HEAD tag
69+
// we need this because we don't wanna trigger the element highlights on head tag and its children
70+
function _isInsideHeadTag(element) {
71+
let parent = element;
72+
while (parent && parent !== window.document) {
73+
if (parent.tagName === "HEAD") {
74+
return true;
75+
}
76+
parent = parent.parentElement;
77+
}
78+
return false;
79+
}
80+
6881

6982
// compute the screen offset of an element
7083
function _screenOffset(element) {
@@ -123,7 +136,7 @@ function RemoteFunctions(config) {
123136
function _handleDeleteOptionClick(event, element) {
124137
const tagId = element.getAttribute("data-brackets-id");
125138

126-
if (tagId && element.tagName !== "BODY" && element.tagName !== "HTML") {
139+
if (tagId && element.tagName !== "BODY" && element.tagName !== "HTML" && !_isInsideHeadTag(element)) {
127140
window._Brackets_MessageBroker.send({
128141
livePreviewEditEnabled: true,
129142
element: element,
@@ -144,7 +157,7 @@ function RemoteFunctions(config) {
144157
function _handleDuplicateOptionClick(event, element) {
145158
const tagId = element.getAttribute("data-brackets-id");
146159

147-
if (tagId && element.tagName !== "BODY" && element.tagName !== "HTML") {
160+
if (tagId && element.tagName !== "BODY" && element.tagName !== "HTML" && !_isInsideHeadTag(element)) {
148161
window._Brackets_MessageBroker.send({
149162
livePreviewEditEnabled: true,
150163
element: element,
@@ -178,6 +191,7 @@ function RemoteFunctions(config) {
178191
if (
179192
parentElement.tagName !== "BODY" &&
180193
parentElement.tagName !== "HTML" &&
194+
!_isInsideHeadTag(parentElement) &&
181195
parentElement.hasAttribute("data-brackets-id")
182196
) {
183197
parentElement.click();
@@ -318,8 +332,8 @@ function RemoteFunctions(config) {
318332
return;
319333
}
320334

321-
// Skip BODY and HTML tags
322-
if (target.tagName === "BODY" || target.tagName === "HTML") {
335+
// Skip BODY, HTML tags and elements inside HEAD
336+
if (target.tagName === "BODY" || target.tagName === "HTML" || _isInsideHeadTag(target)) {
323337
return;
324338
}
325339

@@ -359,8 +373,8 @@ function RemoteFunctions(config) {
359373
return;
360374
}
361375

362-
// Skip BODY and HTML tags
363-
if (target.tagName === "BODY" || target.tagName === "HTML") {
376+
// Skip BODY, HTML tags and elements inside HEAD
377+
if (target.tagName === "BODY" || target.tagName === "HTML" || _isInsideHeadTag(target)) {
364378
return;
365379
}
366380

@@ -456,7 +470,7 @@ function RemoteFunctions(config) {
456470

457471
const parentElement = element.parentElement;
458472

459-
if (parentElement.tagName === "HTML" || parentElement.tagName === "BODY") {
473+
if (parentElement.tagName === "HTML" || parentElement.tagName === "BODY" || _isInsideHeadTag(parentElement)) {
460474
return false;
461475
}
462476
if (!parentElement.hasAttribute("data-brackets-id")) {
@@ -1193,9 +1207,9 @@ function RemoteFunctions(config) {
11931207

11941208
function onMouseOver(event) {
11951209
if (_validEvent(event)) {
1196-
// Skip highlighting for HTML and BODY tags
1210+
// Skip highlighting for HTML, BODY tags and elements inside HEAD
11971211
if (event.target && event.target.nodeType === Node.ELEMENT_NODE &&
1198-
event.target.tagName !== "HTML" && event.target.tagName !== "BODY") {
1212+
event.target.tagName !== "HTML" && event.target.tagName !== "BODY" && !_isInsideHeadTag(event.target)) {
11991213
_localHighlight.add(event.target, true);
12001214
}
12011215
}
@@ -1238,13 +1252,15 @@ function RemoteFunctions(config) {
12381252
if (_hoverHighlight && config.isLPEditFeaturesActive && shouldShowHighlightOnHover()) {
12391253
_hoverHighlight.clear();
12401254

1241-
// Skip highlighting for HTML and BODY tags and for DOM elements which doesn't have 'data-brackets-id'
1255+
// Skip highlighting for HTML, BODY tags and elements inside HEAD
1256+
// and for DOM elements which doesn't have 'data-brackets-id'
12421257
// NOTE: Don't remove 'data-brackets-id' check else hover will also target internal live preview elements
12431258
if (
12441259
event.target &&
12451260
event.target.nodeType === Node.ELEMENT_NODE &&
12461261
event.target.tagName !== "HTML" &&
12471262
event.target.tagName !== "BODY" &&
1263+
!_isInsideHeadTag(event.target) &&
12481264
event.target.hasAttribute("data-brackets-id")
12491265
) {
12501266
// Store original background color to restore on hover out
@@ -1299,7 +1315,8 @@ function RemoteFunctions(config) {
12991315
config.isLPEditFeaturesActive &&
13001316
event.target.hasAttribute("data-brackets-id") &&
13011317
event.target.tagName !== "BODY" &&
1302-
event.target.tagName !== "HTML"
1318+
event.target.tagName !== "HTML" &&
1319+
!_isInsideHeadTag(event.target)
13031320
) {
13041321
event.preventDefault();
13051322
event.stopPropagation();
@@ -1348,9 +1365,9 @@ function RemoteFunctions(config) {
13481365
}
13491366

13501367
previouslyClickedElement = event.target;
1351-
} else if ( // when user clicks on the HTML or the BODY tag, we want to remove the boxes
1368+
} else if ( // when user clicks on the HTML, BODY tags or elements inside HEAD, we want to remove the boxes
13521369
_nodeMoreOptionsBox &&
1353-
(event.target.tagName === "HTML" || event.target.tagName === "BODY")
1370+
(event.target.tagName === "HTML" || event.target.tagName === "BODY" || _isInsideHeadTag(event.target))
13541371
) {
13551372
dismissMoreOptionsBox();
13561373
}
@@ -1365,7 +1382,8 @@ function RemoteFunctions(config) {
13651382
config.isLPEditFeaturesActive &&
13661383
event.target.hasAttribute("data-brackets-id") &&
13671384
event.target.tagName !== "BODY" &&
1368-
event.target.tagName !== "HTML"
1385+
event.target.tagName !== "HTML" &&
1386+
!_isInsideHeadTag(event.target)
13691387
) {
13701388
// because we only want to allow double click text editing where we show the edit option
13711389
if (_shouldShowEditTextOption(event.target)) {
@@ -1425,9 +1443,9 @@ function RemoteFunctions(config) {
14251443
if (clear) {
14261444
_clickHighlight.clear();
14271445
}
1428-
// Skip highlighting for HTML and BODY tags
1446+
// Skip highlighting for HTML, BODY tags and elements inside HEAD
14291447
if (node && node.nodeType === Node.ELEMENT_NODE &&
1430-
node.tagName !== "HTML" && node.tagName !== "BODY") {
1448+
node.tagName !== "HTML" && node.tagName !== "BODY" && !_isInsideHeadTag(node)) {
14311449
_clickHighlight.add(node, true);
14321450
}
14331451
}
@@ -1436,10 +1454,31 @@ function RemoteFunctions(config) {
14361454
function highlightRule(rule) {
14371455
hideHighlight();
14381456
var i, nodes = window.document.querySelectorAll(rule);
1457+
14391458
for (i = 0; i < nodes.length; i++) {
14401459
highlight(nodes[i]);
14411460
}
14421461
_clickHighlight.selector = rule;
1462+
1463+
// trigger click on the first valid highlighted element
1464+
var foundValidElement = false;
1465+
for (i = 0; i < nodes.length; i++) {
1466+
if (nodes[i].hasAttribute("data-brackets-id") &&
1467+
nodes[i].tagName !== "HTML" &&
1468+
nodes[i].tagName !== "BODY" &&
1469+
!_isInsideHeadTag(nodes[i]) &&
1470+
nodes[i].tagName !== "BR"
1471+
) {
1472+
nodes[i].click();
1473+
foundValidElement = true;
1474+
break;
1475+
}
1476+
}
1477+
1478+
// if no valid element present we dismiss the boxes
1479+
if (!foundValidElement) {
1480+
dismissMoreOptionsBox();
1481+
}
14431482
}
14441483

14451484
// recreate UI boxes (info box and more options box)
@@ -1879,6 +1918,7 @@ function RemoteFunctions(config) {
18791918
|| !element
18801919
|| element.tagName === "BODY"
18811920
|| element.tagName === "HTML"
1921+
|| _isInsideHeadTag(element)
18821922
|| !element.hasAttribute("data-brackets-id")) {
18831923
return;
18841924
}

0 commit comments

Comments
 (0)