Share querystring logic with tabs & breakpoints sidebar

[WenInCode]

Fixes #7159

Summary of Changes

• Share query string logic with tabs
• Share query string logic with breakpoints sidebar

Test Plan

1. Open the test URL https://shimmer-ostrich.glitch.me/
2. Open debugger.
3. Reload the test URL.
4. Open one of the script.js source and observe the query string appended to the name in the tab
5. Add a debugger to the script.js and observe the query string appended to the name in the breakpoints sidebar

Mochitests

• Add check for querystring in tab name to dbg-sources-querystring
• Add check for querystring in breakpoints side bar in dbg-sources-querystring

Screenshots

Questions/Thoughts

I considered moving https://github.com/wenincode/debugger.html/blob/7159-source-querystring-logic-tabs-sidebar/src/reducers/sources.js#L434-L449 into a separate utils because they aren't actual reducers and aren't actually being used by the reducer in this file. I think they are in here because the code is a bit tied to the OuterState type. I was going to move it and change the types to just be an array of sources to try and decouple it from this file, but the more I work with it the more I see why it is the way it is now. Just seemed a bit odd to have these functions in here.

For the adding logic to sidebar stuff I am thinking of moving [this code] into a sub-component. The reasoning being that I think I could leverage a similar mapStateToProps with OuterState approach as the other two areas. I am not entirely sure how that all works yet, still pretty new to redux land. I just don't currently see how I can get the right state to pass into those functions in the reducer without moving this code. Just wanted to capture my thoughts before I shut down for the night 😄

[WenInCode]

The source tree item stuff has this in a span, but I wasn't sure if this needed to be. I think it looks better sans span in the tab, but I am open to feedback 😄

[darkwing]

I think this function is in the SourcesTree file, so I think we should move it somewhere in utils/source.js

[darkwing]

Ooops, missed the change about it 🤕

[darkwing]

This works great! 👍

[WenInCode]

I wanted to add a breakpoint to one of the files and assert that the query shows in the panel. I'm having issues getting the breakpoint to show up in the panel when adding it with the helpers.

diff --cc src/test/mochitest/browser_dbg-sources-querystring.js
index f381197a,f381197a..6b7067e8
--- a/src/test/mochitest/browser_dbg-sources-querystring.js
+++ b/src/test/mochitest/browser_dbg-sources-querystring.js
@@@ -33,4 -33,4 +33,7 @@@ add_task(async function()
    const activeSourceLabel = getLabel(dbg, 3);
    const tab = findElement(dbg, "activeTab");
    is(tab.innerText, activeSourceLabel, `Tab label is ${activeSourceLabel}`);
++
++  await addBreakpoint(dbg, activeSourceLabel, 4, 0);
++  await waitForever();
  });

[darkwing]

Hello @WenInCode! It took me a while to track down but try this:

// Select the source so that the breakpoint displays in sidebar
  const source = findSource(dbg, "simple1.js?x=1");
  await selectSource(dbg, source);
  await addBreakpoint(dbg, "simple1.js?x=1", 6);
  await waitForever();

[WenInCode]

@darkwing that makes a lot of sense 😂 thanks! I also didn't realize you could just use selectSource with the name of the source. I've added the test for the BreakpointHeading.

I am going to start looking more into getting the project search to work with params again. That work can either land in this, or separate, whatever works best 👍

[darkwing]

Nice work so far @WenInCode ! Only one quick thing to look at:

We need to ensure truncation occurs within tabs and sidebar. The tabs already use a truncate function, so you simply need to concat the filename add the querystring before using the function there.

For the sidebar, we need to (1) remove the space between the querystring and the filename, and then ensure we use text-overflow: ellipsis

[WenInCode]

@darkwing I truncated the long file names 👍 I also noticed that the title attributes for the heading and the tab were not consistent. The heading showed the entire file url, whereas the tab showed a truncated portion which ended up just being part of the query. I updated them to be consistent. Let me know if you think it should be different 😄

New:

Old: