Skip to content

Commit ce02c4b

Browse files
aboseabose
committed
feat: live preview hover inspect ui initial
1 parent 21ecffe commit ce02c4b

File tree

3 files changed

+91
-55
lines changed

3 files changed

+91
-55
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 87 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,20 @@ function RemoteFunctions(config) {
3333

3434
var experimental;
3535
if (!config) {
36-
experimental = false;
36+
experimental = false;
3737
} else {
38-
experimental = config.experimental;
38+
experimental = config.experimental;
3939
}
4040
var req, timeout;
4141
var animateHighlight = function (time) {
4242
if(req) {
43-
window.cancelAnimationFrame(req);
43+
window.cancelAnimationFrame(req);
4444
window.clearTimeout(timeout);
4545
}
4646
req = window.requestAnimationFrame(redrawHighlights);
4747

4848
timeout = setTimeout(function () {
49-
window.cancelAnimationFrame(req);
49+
window.cancelAnimationFrame(req);
5050
req = null;
5151
}, time * 1000);
5252
};
@@ -113,7 +113,7 @@ function RemoteFunctions(config) {
113113
element.removeAttribute(key);
114114
}
115115
}
116-
116+
117117
// Checks if the element is in Viewport in the client browser
118118
function isInViewport(element) {
119119
var rect = element.getBoundingClientRect();
@@ -125,7 +125,7 @@ function RemoteFunctions(config) {
125125
rect.right <= (window.innerWidth || html.clientWidth)
126126
);
127127
}
128-
128+
129129
// returns the distance from the top of the closest relatively positioned parent element
130130
function getDocumentOffsetTop(element) {
131131
return element.offsetTop + (element.offsetParent ? getDocumentOffsetTop(element.offsetParent) : 0);
@@ -273,7 +273,7 @@ function RemoteFunctions(config) {
273273
animationDuration = parseFloat(elementStyling.getPropertyValue('animation-duration'));
274274

275275
highlight.trackingElement = element; // save which node are we highlighting
276-
276+
277277
if (transitionDuration) {
278278
animateHighlight(transitionDuration);
279279
}
@@ -286,21 +286,21 @@ function RemoteFunctions(config) {
286286
if (elementBounds.width === 0 && elementBounds.height === 0) {
287287
return;
288288
}
289-
289+
290290
var realElBorder = {
291291
right: elementStyling.getPropertyValue('border-right-width'),
292292
left: elementStyling.getPropertyValue('border-left-width'),
293293
top: elementStyling.getPropertyValue('border-top-width'),
294294
bottom: elementStyling.getPropertyValue('border-bottom-width')
295295
};
296-
296+
297297
var borderBox = elementStyling.boxSizing === 'border-box';
298-
298+
299299
var innerWidth = parseFloat(elementStyling.width),
300300
innerHeight = parseFloat(elementStyling.height),
301301
outerHeight = innerHeight,
302302
outerWidth = innerWidth;
303-
303+
304304
if (!borderBox) {
305305
innerWidth += parseFloat(elementStyling.paddingLeft) + parseFloat(elementStyling.paddingRight);
306306
innerHeight += parseFloat(elementStyling.paddingTop) + parseFloat(elementStyling.paddingBottom);
@@ -309,49 +309,49 @@ function RemoteFunctions(config) {
309309
outerHeight = innerHeight + parseFloat(realElBorder.bottom) + parseFloat(realElBorder.top);
310310
}
311311

312-
312+
313313
var visualisations = {
314314
horizontal: "left, right",
315315
vertical: "top, bottom"
316316
};
317-
317+
318318
var drawPaddingRect = function(side) {
319319
var elStyling = {};
320-
320+
321321
if (visualisations.horizontal.indexOf(side) >= 0) {
322322
elStyling['width'] = elementStyling.getPropertyValue('padding-' + side);
323323
elStyling['height'] = innerHeight + "px";
324324
elStyling['top'] = 0;
325-
325+
326326
if (borderBox) {
327327
elStyling['height'] = innerHeight - parseFloat(realElBorder.top) - parseFloat(realElBorder.bottom) + "px";
328328
}
329-
329+
330330
} else {
331-
elStyling['height'] = elementStyling.getPropertyValue('padding-' + side);
331+
elStyling['height'] = elementStyling.getPropertyValue('padding-' + side);
332332
elStyling['width'] = innerWidth + "px";
333333
elStyling['left'] = 0;
334-
334+
335335
if (borderBox) {
336336
elStyling['width'] = innerWidth - parseFloat(realElBorder.left) - parseFloat(realElBorder.right) + "px";
337337
}
338338
}
339-
339+
340340
elStyling[side] = 0;
341341
elStyling['position'] = 'absolute';
342-
342+
343343
return elStyling;
344344
};
345-
345+
346346
var drawMarginRect = function(side) {
347347
var elStyling = {};
348-
348+
349349
var margin = [];
350350
margin['right'] = parseFloat(elementStyling.getPropertyValue('margin-right'));
351351
margin['top'] = parseFloat(elementStyling.getPropertyValue('margin-top'));
352352
margin['bottom'] = parseFloat(elementStyling.getPropertyValue('margin-bottom'));
353353
margin['left'] = parseFloat(elementStyling.getPropertyValue('margin-left'));
354-
354+
355355
if(visualisations['horizontal'].indexOf(side) >= 0) {
356356

357357
elStyling['width'] = elementStyling.getPropertyValue('margin-' + side);
@@ -371,37 +371,37 @@ function RemoteFunctions(config) {
371371

372372
var setVisibility = function (el) {
373373
if (
374-
!config.remoteHighlight.showPaddingMargin ||
375-
parseInt(el.height, 10) <= 0 ||
376-
parseInt(el.width, 10) <= 0
374+
!config.remoteHighlight.showPaddingMargin ||
375+
parseInt(el.height, 10) <= 0 ||
376+
parseInt(el.width, 10) <= 0
377377
) {
378378
el.display = 'none';
379379
} else {
380380
el.display = 'block';
381381
}
382382
};
383-
383+
384384
var mainBoxStyles = config.remoteHighlight.stylesToSet;
385-
385+
386386
var paddingVisualisations = [
387387
drawPaddingRect('top'),
388388
drawPaddingRect('right'),
389389
drawPaddingRect('bottom'),
390-
drawPaddingRect('left')
390+
drawPaddingRect('left')
391391
];
392-
392+
393393
var marginVisualisations = [
394394
drawMarginRect('top'),
395395
drawMarginRect('right'),
396396
drawMarginRect('bottom'),
397-
drawMarginRect('left')
397+
drawMarginRect('left')
398398
];
399-
399+
400400
var setupVisualisations = function (arr, config) {
401401
var i;
402402
for (i = 0; i < arr.length; i++) {
403403
setVisibility(arr[i]);
404-
404+
405405
// Applies to every visualisationElement (padding or margin div)
406406
arr[i]["transform"] = "none";
407407
var el = window.document.createElement("div"),
@@ -416,7 +416,7 @@ function RemoteFunctions(config) {
416416
highlight.appendChild(el);
417417
}
418418
};
419-
419+
420420
setupVisualisations(
421421
marginVisualisations,
422422
config.remoteHighlight.marginStyling
@@ -425,11 +425,11 @@ function RemoteFunctions(config) {
425425
paddingVisualisations,
426426
config.remoteHighlight.paddingStyling
427427
);
428-
428+
429429
highlight.className = HIGHLIGHT_CLASSNAME;
430430

431431
var offset = _screenOffset(element);
432-
432+
433433
// some code to find element left/top was removed here. This seems to be relevant to box model
434434
// live highlights. firether reading: https://github.com/adobe/brackets/pull/13357/files
435435
// we removed this in phoenix because it was throwing the rendering of live highlight boxes in phonix
@@ -448,14 +448,14 @@ function RemoteFunctions(config) {
448448
"position": "absolute",
449449
"pointer-events": "none",
450450
"box-shadow": "0 0 1px #fff",
451-
"box-sizing": elementStyling.getPropertyValue('box-sizing'),
452-
"border-right": elementStyling.getPropertyValue('border-right'),
453-
"border-left": elementStyling.getPropertyValue('border-left'),
454-
"border-top": elementStyling.getPropertyValue('border-top'),
451+
"box-sizing": elementStyling.getPropertyValue('box-sizing'),
452+
"border-right": elementStyling.getPropertyValue('border-right'),
453+
"border-left": elementStyling.getPropertyValue('border-left'),
454+
"border-top": elementStyling.getPropertyValue('border-top'),
455455
"border-bottom": elementStyling.getPropertyValue('border-bottom'),
456456
"border-color": config.remoteHighlight.borderColor
457457
};
458-
458+
459459
var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet);
460460

461461
var animateStartValues = config.remoteHighlight.animateStartValue;
@@ -500,7 +500,7 @@ function RemoteFunctions(config) {
500500
if (this.trigger) {
501501
_trigger(element, "highlight", 1);
502502
}
503-
503+
504504
if ((!window.event || window.event instanceof MessageEvent) && !isInViewport(element)) {
505505
var top = getDocumentOffsetTop(element);
506506
if (top) {
@@ -563,6 +563,8 @@ function RemoteFunctions(config) {
563563

564564
var _localHighlight;
565565
var _remoteHighlight;
566+
var _hoverHighlight;
567+
var _clickHighlight;
566568
var _setup = false;
567569

568570

@@ -585,6 +587,19 @@ function RemoteFunctions(config) {
585587
window.document.removeEventListener("mousemove", onMouseMove);
586588
}
587589

590+
function onElementHover(event) {
591+
if (_hoverHighlight) {
592+
_hoverHighlight.clear();
593+
_hoverHighlight.add(event.target, false);
594+
}
595+
}
596+
597+
function onElementHoverOut() {
598+
if (_hoverHighlight) {
599+
_hoverHighlight.clear();
600+
}
601+
}
602+
588603
function onClick(event) {
589604
if (_validEvent(event)) {
590605
event.preventDefault();
@@ -643,17 +658,24 @@ function RemoteFunctions(config) {
643658
_remoteHighlight.clear();
644659
_remoteHighlight = null;
645660
}
661+
if (_clickHighlight) {
662+
_clickHighlight.clear();
663+
_clickHighlight = null;
664+
}
665+
if (_hoverHighlight) {
666+
_hoverHighlight.clear();
667+
}
646668
}
647669

648670
// highlight a node
649671
function highlight(node, clear) {
650-
if (!_remoteHighlight) {
651-
_remoteHighlight = new Highlight("#cfc");
672+
if (!_clickHighlight) {
673+
_clickHighlight = new Highlight("#cfc");
652674
}
653675
if (clear) {
654-
_remoteHighlight.clear();
676+
_clickHighlight.clear();
655677
}
656-
_remoteHighlight.add(node, true);
678+
_clickHighlight.add(node, true);
657679
}
658680

659681
// highlight a rule
@@ -663,14 +685,20 @@ function RemoteFunctions(config) {
663685
for (i = 0; i < nodes.length; i++) {
664686
highlight(nodes[i]);
665687
}
666-
_remoteHighlight.selector = rule;
688+
_clickHighlight.selector = rule;
667689
}
668690

669691
// redraw active highlights
670692
function redrawHighlights() {
671693
if (_remoteHighlight) {
672694
_remoteHighlight.redraw();
673695
}
696+
if (_clickHighlight) {
697+
_clickHighlight.redraw();
698+
}
699+
if (_hoverHighlight) {
700+
_hoverHighlight.redraw();
701+
}
674702
}
675703

676704
window.addEventListener("resize", redrawHighlights);
@@ -683,7 +711,7 @@ function RemoteFunctions(config) {
683711
if (e.target === window.document) {
684712
redrawHighlights();
685713
} else {
686-
if (_remoteHighlight || _localHighlight) {
714+
if (_remoteHighlight || _localHighlight || _clickHighlight || _hoverHighlight) {
687715
window.setTimeout(redrawHighlights, 0);
688716
}
689717
}
@@ -985,7 +1013,7 @@ function RemoteFunctions(config) {
9851013
function getSimpleDOM() {
9861014
return JSON.stringify(_domElementToJSON(window.document.documentElement));
9871015
}
988-
1016+
9891017
function updateConfig(newConfig) {
9901018
config = JSON.parse(newConfig);
9911019
return JSON.stringify(config);
@@ -994,6 +1022,16 @@ function RemoteFunctions(config) {
9941022
// init
9951023
_editHandler = new DOMEditHandler(window.document);
9961024

1025+
// Initialize hover highlight with Chrome-like colors
1026+
_hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
1027+
1028+
// Initialize click highlight with animation
1029+
_clickHighlight = new Highlight("#cfc", true); // Light green for click highlight
1030+
1031+
// Add event listeners for hover
1032+
window.document.addEventListener("mouseover", onElementHover);
1033+
window.document.addEventListener("mouseout", onElementHoverOut);
1034+
9971035
if (experimental) {
9981036
window.document.addEventListener("keydown", onKeyDown);
9991037
}

‎src/LiveDevelopment/main.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,12 @@ define(function main(require, exports, module) {
7979
"opacity": 0.6
8080
},
8181
"paddingStyling": {
82-
"border-width": "1px",
83-
"border-style": "dashed",
84-
"border-color": "rgba(0, 162, 255, 0.5)"
82+
"background-color": "rgba(200, 249, 197, 0.7)"
8583
},
8684
"marginStyling": {
87-
"background-color": "rgba(21, 165, 255, 0.58)"
85+
"background-color": "rgba(249, 204, 157, 0.7)"
8886
},
89-
"borderColor": "rgba(21, 165, 255, 0.85)",
87+
"borderColor": "rgba(200, 249, 197, 0.85)",
9088
"showPaddingMargin": true
9189
}, {
9290
description: Strings.DESCRIPTION_LIVE_DEV_HIGHLIGHT_SETTINGS

‎src/nls/root/strings.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ define({
328328
"SPLITVIEW_MENU_TOOLTIP": "Split the editor vertically or horizontally",
329329
"GEAR_MENU_TOOLTIP": "Configure Working Set",
330330

331-
"CMD_TOGGLE_SHOW_WORKING_SET": "Show Working Set",
331+
"CMD_TOGGLE_SHOW_WORKING_SET": "Show Working Files",
332332
"CMD_TOGGLE_SHOW_FILE_TABS": "Show File Tab Bar",
333333

334334
"SPLITVIEW_INFO_TITLE": "Already Open",

0 commit comments

Comments
 (0)