search

firefox-devtools / profiler

Firefox Profiler — Web app for Firefox performance analysis
https://profiler.firefox.com
Mozilla Public License 2.0
1.23k stars 399 forks source link

When searching in the stack chart, the matched nodes should be highlighted #1818

Open julienw opened 5 years ago

julienw commented 5 years ago

STR:

  1. Go to a profile (for example https://perfht.ml/2SJYNMu) in the stack chart panel
  2. search for something (for example "remoteframe") (resulting permalink is: https://perfht.ml/2SIYHVp)

=> the matched nodes should be highlighted in some way

cc padenot

┆Issue is synchronized with this Jira Task

julienw commented 4 years ago

src/components/stack-chart/Canvas.js should take the search strings regexp, passed by src/components/stack-chart/index.js. It can be get from the state with this selector:

    searchStringsRegExp: getSearchStringsAsRegExp(state),

Then, in the canvas' drawCanvas we can use this regexp to test the text value (don't forget to set its lastIndex property to 0 before using it), and use strokeRect on the same values to make a border. Or possibly use a path and reuse it so that we can both fill and stroke it (but we'll need to test the performance of the 2 solutions).

I believe that a border of 2px would be good enough as a first try (so a lineWidth of 2). Maybe also use a lineJoin = round value.

js636f commented 4 years ago

Hello! I'm an outreachy applicant. May I work on this issue?

canova commented 4 years ago

Hi @js636f ! Sure, assigning the issue to you. Let us know if you need anything!

js636f commented 4 years ago

Hi, @canova ! Thank you! I'm working on this. I'll write if I have some questions.

julienw commented 4 years ago

Hey @js636f, are you still working on this? Do you have any question?

js636f commented 4 years ago

Hello @julienw , Yes, I'm still working on this. Thank you! I'll write if I have some questions.

js636f commented 4 years ago

Hello @canova @julienw I made a PR look at it please. Thanks!