Blue border not visible in Live Preview Highlight

[Handy-Design]

Prerequisites

• Can you reproduce the problem with Debug -> Reload Without Extensions?

The problem persists when reloaded without extensions.

• Did you perform a cursory search to see if your bug or enhancement is already reported?

There is no reports for this bug yet.

• Did you read the [Troubleshooting guide]?

I've read it but doesn't tell me how to solve the problem.

Description

Live Preview highlight doesn't behave as expected. It doesn't provide the thin blue border that should come by default. Instead, it highlights what appears to be the margins of the selected element. If Toggle Live Preview Higlight is performed a few times, it starts behaving erraticaly. After toggling, sometimes the element gets the blue background fade, sometimes the 'margin' stays in blue and sometimes nothing happens at all.

This is how highlight should behave

This is how I see it (this blue area in the image does not fade, it stays static as if it was the desired thin border)

I have been looking for a solution to this for too many hours, I've seen 3-4 people reporting the same bug in different platforms but in any case has a solution been provided.

I uninstalled version 1.10 and instaled version 1.2, and then the Live Preview highlight worked as it should be. Then, after installing 1.10 again the highlight became erratic again.

Steps to Reproduce

1. Start Brackets
2. Open Folder...
3. Select index.html
4. Activate Live Preview (Chrome Opens)
5. Select element in index.html
6. Highligh behaves like shown in the second image

• I know it is hardly improbable that you can reproduce this error, but I don't know where else to ask for a solution and I would really like to have it display normaly.

If the question was 'How to increase the border to 2px' where could I achieve that? I've been checking the Preferences file but I didn't see where could make sure that the styling for the highlight is correct. Again, using Live Preview without extensions gives the same result.

Expected behavior:

1. Start Brackets
2. Open Folder...
3. Select index.html
4. Activate Live Preview (Chrome Opens)
5. Select tag in index.html
6. Highligh behaves like shown in the first image

Actual behavior:

1. Start Brackets
2. Open Folder... (tested many different projects with same result)
3. Select index.html
4. Activate Live Preview (Chrome Opens)
5. Select element in index.html
6. Highligh behaves like shown in the second image

Versions

I'm using Windows 8.1 with the current version of Chrome and Brackets 1.10 (downloaded as .msi).
When using Brackets 1.2 (which was the version used in the course videos I'm studying from) the highlight worked as expected.

Please help.

Thank you for doing Brackets.

[Maarcusj]

I have tried to fix this but can't find the source code to this problem .

[Handy-Design]

Hi Maarcusj, I haven't found it either. For the time being I just have this feature of Live Preview disabled, no biggie.

[ficristo]

Maybe it is because of the recent(ish) preference?
See:

brackets/src/LiveDevelopment/main.js

Lines 84 to 105 in b9c5795

	var remoteHighlightPref = prefs.definePreference(PREF_REMOTEHIGHLIGHT, "object", {
	animateStartValue: {
	"background-color": "rgba(0, 162, 255, 0.5)",
	"opacity": 0
	},
	animateEndValue: {
	"background-color": "rgba(0, 162, 255, 0)",
	"opacity": 0.6
	},
	"paddingStyling": {
	"border-width": "1px",
	"border-style": "dashed",
	"border-color": "rgba(0, 162, 255, 0.5)"
	},
	"marginStyling": {
	"background-color": "rgba(21, 165, 255, 0.58)"
	},
	"borderColor": "rgba(21, 165, 255, 0.85)",
	"showPaddingMargin": true
	}, {
	description: Strings.DESCRIPTION_LIVE_DEV_HIGHLIGHT_SETTINGS
	});

Example of a possible setting:

"livedev.remoteHighlight": {
    "paddingStyling": {
        "border-width": "1px",
        "border-style": "dashed",
        "border-color": "blue"
    },
    "marginStyling": {
        "border-width": "1px",
        "border-style": "dashed",
        "border-color": "green",
        "background-color": "none"
    },
    "borderColor": "darkgold",
    "showPaddingMargin": true
  }

[tisov]

I'm using 1.10 I wanted only see borders without padding and margin like in previous versions. I just added custom border property and set "showPaddingMargin" to false.

"livedev.remoteHighlight": {
    "animateEndValue": {
        "background-color": "rgba(0, 162, 255, 0)",
        "opacity": 0.6,
        "border": "1px solid rgba(21, 165, 255, 0.85)",
        "box-sizing": "border-box"
    },
    "showPaddingMargin": false
  }

[joembreezy]

I solved by uninstalling w3schools verification add-on.

[ganemcos]

plz tell me how to edit the peace of code