The conditional breakpoint and logpoint UI is very broken

[ChiriVulpes]

If the placeholder text is there, or it contains a line longer than some amount, all the UI elements totally overlap, it's chaos.

This has been broken for ages at this point, whenever the Edge DevTools really split off from Chrome's design-wise. I'm a heavy user of conditional breakpoints and logpoints, so this has been bothering me for pretty much the whole time. I've kinda just been waiting for when it would get fixed because I thought it was an obvious bug, but maybe not...

For reference, this is what it looks like in Chrome:

I'm guessing at some point during the redesign, something was changed that broke this, and it was never addressed?

AB#53333300

[june07]

It is entirely possible to use Chrome DevTools in Edge with the NiM extension.

https://github.com/june07/nimv3/releases/tag/v3.9.3

Chrome DevTools in Edge

[captainbrosset]

Thank you @ChiriVulpes for filing this. Apologies about this. I guess this goes to show that there aren't that many users of conditional breakpoints/logpoints.
I'll make sure this is known by our dev team and prioritized.

[captainbrosset]

@ChiriVulpes this should now be fixed, starting with Edge Canary 130.0.2800.0. Let us know if the problem persists for you after making sure you've tested with that version, or later.

[adrua]

today persist problem, width of editor is one character.

Versión 130.0.2849.68 (Compilación oficial) (64 bits)

good luck

[ChiriVulpes]

Oh, yeah, I forgot to look into this by installing a dev version and didn't realise stable was past the version number @captainbrosset gave. After testing it seems like while the overlapping doesn't happen anymore, the UI is still barely usable compared to Chrome DevTools? The horizontal width given to the text editor is so incredibly tiny for no reason

Using some random chromium js in the text editor example, here's what it currently looks like:

It honestly looks intentional based on the CSS too? There's a whole bunch of stuff in the Edge DevTools stylesheet that appears to be modifying specifically this dialog, and I have no idea why

From the stylesheet in 130.0.2849.68:

:host-context(.sources-edit-breakpoint-dialog) .widget {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

:host-context(.sources-edit-breakpoint-dialog) .condition-editor {
  margin: 5px 0 !important;
  background-color: var(--dev-tools-background) !important; /* stylelint-disable-line plugin/use_theme_colors */
  width: min-content;
  /* See: Issue 31944440 for color variable migration. */
  flex-grow: 1;
}

.source-frame-breakpoint-toolbar.toolbar {
  top: calc(50% - 16px);
  flex-grow: 0;
  flex-shrink: 0;
}

All three of these custom rules make the breakpoint editing dialog worse. Namely:

1. All of :host-context(.sources-edit-breakpoint-dialog) .widget should be removed, it causes everything to be on one line, which forces the close X to be before the text editor and the hint, which is confusing, and also drastically reduces the available width of the text editor because it has to share the space with the dropdown and the hint
2. width: min-content; should be removed from :host-context(.sources-edit-breakpoint-dialog) .condition-editor, because when the layout is a column again, min-content causes the text editor to be only a single character wide
3. All of .source-frame-breakpoint-toolbar.toolbar should be removed, as flex-grow: 0 causes the X to not appear in the top right of the dialog, flex-shrink: 0 does nothing, and top doesn't even work here because the toolbar has position: static

Here's what it looks like after my suggested changes:

[captainbrosset]

Pinging @leahmsft on the above problem.

[leahmsft]

Thank you for your feedback @ChiriVulpes. I followed up with our engineering team and it wasn't an intentional design decision. We will prioritize updating this UI to align with what you suggested.

[leahmsft]

@ChiriVulpes this has been fixed in Version 131.0.2903.27. You can test this out in Edge Canary, Dev, or Beta. This will be part of the upcoming Edge 131 Stable update this month. Please let us know if you continue seeing the issue after that.

[adrua]

Hi, Edge Team I'm testing in Versión 132.0.2947.0 (Compilación oficial) canary (64 bits) spanish version. the probleme was resolved. Thanks.

…

________________________________ De: Leah Tu ***@***.***> Enviado: martes, 5 de noviembre de 2024 12:15 p. m. Para: MicrosoftEdge/DevTools ***@***.***> Cc: adrua ***@***.***>; Comment ***@***.***> Asunto: Re: [MicrosoftEdge/DevTools] The conditional breakpoint and logpoint UI is very broken (Issue #273) Thank you for your feedback @ChiriVulpes<https://github.com/ChiriVulpes>. I followed up with our engineering team and it wasn't an intentional design decision. We will prioritize updating this UI to align with what you suggested. — Reply to this email directly, view it on GitHub<#273 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABHE4ACKRKBEEXEG75RRQE3Z7D4J5AVCNFSM6AAAAABMWCX5QGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJXG42DMNJQGU>. You are receiving this because you commented.Message ID: ***@***.***>