Column breakpoints UI #7095

audreyfang · 2018-10-08T19:48:05Z

Summary of Changes

Very rough start to the column breakpoint changes @darkwing and I discussed earlier. When alt/option is pressed column breakpoints are shown only for the function where the cursor is currently located.

This is still quite buggy but works in some cases and I will also be further looking into changing the >> to actual icons.

Screenshots/Videos

AnshulMalik

Looking Awesome :)

AnshulMalik · 2018-10-09T04:40:51Z

src/components/Editor/CallSites.js

    let sites;
    if (!callSites) {
      return null;
    }

+    const { line } = editor.codeMirror.getCursor();


I think getCursor gives us the position of the blinking cursor, and not mouse position, I am not sure though.

It does give the position of the blinking cursor, which was my intention for this first iteration. Do you happen to know of any way to get the mouse hover position?

I did read the docs but couldn't find the mouse position, I think we need to come up with our own way to capture mouse position.
Or may be I missed something, you should check their docs as well :)

Let's table the mouse position experiment for now. Let's just focus on clicking the icon adding the column breakpoint, and then having different states like enabled, disabled, off, as well as dark mode 💯

darkwing · 2018-10-09T14:48:50Z

Interesting that you've gone the CSS route instead of adding an element as a marker -- I look forward to seeing where this goes. The important test for it is ensuring that clicking in that area of the marker does in fact activate/deactivate the column breakpoint -- CSS can be weird like that sometimes.

darkwing · 2018-10-10T16:42:08Z

src/components/Editor/CallSite.css

  width: 100%;
  height: calc(100% - 2px);
  border-bottom: 2px solid #aed3ef;
 }

 .call-site-bp {
  position: relative;
+  border-bottom: 2px solid red;


I'm guessing this is for debugger?

Not completely sure I understand the question, but the red border is the current way of indicating that a breakpoint is selected. I added it here so that both the icon and text continue to be underlined.

Ahh, I see. We probably want to find a different color, but that's a simple change so don't hang up on it.

darkwing · 2018-10-10T16:42:36Z

src/components/Editor/CallSite.css

@@ -25,8 +26,7 @@
 }

 .call-site-bp::before {
-  content: "";
-  position: absolute;
+  content: ">>";


You should be able to use the same breakpoint svg image as the sidebar.

darkwing · 2018-10-10T16:47:13Z

src/components/Editor/CallSites.js

+          location.start.line <= closestFunc.location.end.line
+      );
+    } else {
+      callSitesFiltered = callSites;


You don't need the else; just initialize callSitesFiltered to callSites:

let callSitesFiltered = callSites; if ( ....

darkwing · 2018-10-17T01:26:05Z

Wow, this is awesome! 👍 A few ideas:

Let's add cursor: pointer when the user hovers over a column breakpoint in the editor; the pointer tells the user that a click is actionable.
I'm noticing that clicking on a function that was already clicked doesn't remove the the breakpoint; you probably know that but just an FYI that we need that changed.

darkwing · 2018-10-17T01:26:59Z

I pushed a tiny commit to your branch @audreyfang ; please git pull so you have it :)

darkwing · 2018-10-22T15:39:23Z

Update as to what's left here @audreyfang ?

audreyfang · 2018-10-22T16:40:35Z

@darkwing I need to make a few minor fixes to the ui colours, look at your suggestions from last week and the failing tests. I should have another commit up later tonight.

audreyfang · 2018-10-23T04:36:13Z

@darkwing Do you have a specific example for when clicking on a breakpoint doesn't remove it? It works for me in most cases, although I do seem to have some issues with one particular function in the file I'm using.

darkwing · 2018-10-23T14:10:58Z

assets/module-manifest.json

@@ -20574,7 +20574,8 @@
      "../../parse5/lib/serializer/serializer_stream.js": 1752,


This doesn't belong in this PR, we'll remove it before merging.

darkwing · 2018-10-23T14:11:15Z

assets/panel/prefs.js

@@ -50,7 +50,7 @@ pref("devtools.debugger.skip-pausing", false);
 pref("devtools.debugger.features.wasm", true);
 pref("devtools.debugger.features.shortcuts", true);
 pref("devtools.debugger.features.root", true);
-pref("devtools.debugger.features.column-breakpoints", false);
+pref("devtools.debugger.features.column-breakpoints", true);


Actually, as things stand, we'll want to change this back to false before merging. I just pressed option in a minified file and my browser hung, so we'll need to measure performance implications here. Keep it true for now, if only for the sake of everyone testing and tests running.

darkwing · 2018-10-23T14:19:21Z

OMG I love how this looks so far. Awesome awesome awesome!

I'm seeing a really weird issue and I'm wondering if @loganfsmyth or @AnshulMalik could help. I prettified the following URL during testing:

https://davidwalsh.name/wp-content/themes/punky/js/main.js

I press option and see a bunch of lovely column breakpoint locations (yay!). When I click one, however, the following issues occur:

A breakpoint is added at the next line
The column's arrow very briefly stays dark (yay!) but then goes back to inactive state (the root cause is probably the same as 1)
I can't add multiple column breakpoints for the same line; instead the existing breakpoint's location is changed.

@loganfsmyth Can you look into the breakpoint location issue? It's acting a bit odd.

@audreyfang In the mean time, could you explore adding mochitest for this functionality? i.e. clicking a column breakpoint on and off does what's expected? I expect you'll probably have questions here which we can discuss in Slack or 1:1 video.

Great work so far!

AnshulMalik · 2018-10-23T16:41:03Z

It's the issue with source-map, either the source map generated from prettifying is not right(I think this is the case). Or source-map package is producing wrong results for generatedLocation.

darkwing · 2018-10-24T21:27:13Z

@audreyfang I think that this is far enough along that we can merge and iterate on; i.e. the styling is awesome. Are there any blockers to merging this UI change?

audreyfang · 2018-10-24T21:30:02Z

@darkwing Will the column breakpoints remain enabled by default? If so, I need to update the jest tests to reflect that. If not, then this should be fine to merge.

darkwing · 2018-10-24T21:34:32Z

@audreyfang I think you'll only need to change the pref in assets/panel/prefs.js; I think the other prefs file only controls the development environment (launchpad) preference value. Also, please reset the assets/module-manifest.json file. I think we can merge after that 👍

darkwing added the 📚 pr-wip label Oct 9, 2018

AnshulMalik reviewed Oct 9, 2018

View reviewed changes

darkwing reviewed Oct 10, 2018

View reviewed changes

darkwing reviewed Oct 23, 2018

View reviewed changes

darkwing changed the title ~~WIP: Column breakpoints~~ Column breakpoints UI Oct 24, 2018

audreyfang and others added 7 commits October 25, 2018 11:00

Only show column breakpoints in current function

42d106a

Added icon and dark mode colors

1407b3b

Enable column breakpoints UI by default

3b68946

CSS changes only.

883d476

fix module-manifest

b44ea6e

Temporarily turn off column breakpoints

25cafd9

Fix mod-man

3c7489f

darkwing force-pushed the column-breakpoints branch from a731493 to 3c7489f Compare October 25, 2018 16:12

Turn off pref for columns

98e5265

darkwing approved these changes Oct 25, 2018

View reviewed changes

darkwing merged commit 363f48c into firefox-devtools:master Oct 25, 2018

darkwing pushed a commit that referenced this pull request Oct 26, 2018

Column breakpoints UI (#7095)

f382c81

darkwing pushed a commit that referenced this pull request Oct 26, 2018

Column breakpoints UI (#7095)

da329bf

darkwing pushed a commit to darkwing/debugger.html that referenced this pull request Oct 26, 2018

Column breakpoints UI (firefox-devtools#7095)

bd3e940

darkwing pushed a commit that referenced this pull request Oct 26, 2018

Column breakpoints UI (#7095)

b597751

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Column breakpoints UI #7095

Column breakpoints UI #7095

audreyfang commented Oct 8, 2018

AnshulMalik left a comment

AnshulMalik Oct 9, 2018

audreyfang Oct 12, 2018

AnshulMalik Oct 12, 2018 •

edited

Loading

darkwing Oct 12, 2018

darkwing commented Oct 9, 2018

darkwing Oct 10, 2018

audreyfang Oct 12, 2018

darkwing Oct 12, 2018

darkwing Oct 10, 2018

darkwing Oct 10, 2018

darkwing commented Oct 17, 2018

darkwing commented Oct 17, 2018

darkwing commented Oct 22, 2018

audreyfang commented Oct 22, 2018

audreyfang commented Oct 23, 2018

darkwing Oct 23, 2018

darkwing Oct 23, 2018

darkwing Oct 23, 2018

darkwing commented Oct 23, 2018

AnshulMalik commented Oct 23, 2018

darkwing commented Oct 24, 2018

audreyfang commented Oct 24, 2018

darkwing commented Oct 24, 2018

		@@ -20574,7 +20574,8 @@
		"../../parse5/lib/serializer/serializer_stream.js": 1752,

Column breakpoints UI #7095

Column breakpoints UI #7095

Conversation

audreyfang commented Oct 8, 2018

Summary of Changes

Screenshots/Videos

AnshulMalik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AnshulMalik Oct 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

darkwing commented Oct 9, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

darkwing commented Oct 17, 2018

darkwing commented Oct 17, 2018

darkwing commented Oct 22, 2018

audreyfang commented Oct 22, 2018

audreyfang commented Oct 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

darkwing commented Oct 23, 2018

AnshulMalik commented Oct 23, 2018

darkwing commented Oct 24, 2018

audreyfang commented Oct 24, 2018

darkwing commented Oct 24, 2018

AnshulMalik Oct 12, 2018 •

edited

Loading