Bug 1619312 Comment 19 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Some instructions, not that this feels more like second-good-bug:

1) The debugger is using CodeMirror to render JS source. The basic wrapper for CodeMirror is here:
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/utils/editor/source-editor.js#10

2) CodeMirror has built-in support for Highlighting all occurrences of a selected token called `highlightSelectionMatches`. Luckily it's in the source base already: https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/shared/sourceeditor/codemirror/addon/search/match-highlighter.js#51

You might also search online to understand how to switch on this feature, some random links:
* https://discuss.codemirror.net/t/highlightselectionmatches-count/472
* https://codemirror.net/demo/matchhighlighter.html

You need to figure out how to plugin and activate the feature.

3) The debugger is utilizing the basic wrapper in this React component `Editor`
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/components/Editor/index.js#99

You might be interested in 
* setupEditor() method
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/components/Editor/index.js#131
which is calling `getEditor`

* getEditor() method
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/utils/editor/index.js#18

which is calling `createEditor`

* createEditor() - which is instantiating the SourceEditor() component (the basic wrapper)
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/utils/editor/create-editor.js#15

4) The `Editor` component should handle doubleclick  event to perform the highlighting
You can look at how `onClick` is implemented
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/components/Editor/index.js#446

To see how to get source location  from the mouse click event, etc.
This will be needed to know what keyword to highlight.

I am not expert on the code base, so you need to spend the time and do good analysis of the code base first :-) 

HTH

Honza
Some instructions, note that this feels more like second-good-bug:

1) The debugger is using CodeMirror to render JS source. The basic wrapper for CodeMirror is here:
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/utils/editor/source-editor.js#10

2) CodeMirror has built-in support for Highlighting all occurrences of a selected token called `highlightSelectionMatches`. Luckily it's in the source base already: https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/shared/sourceeditor/codemirror/addon/search/match-highlighter.js#51

You might also search online to understand how to switch on this feature, some random links:
* https://discuss.codemirror.net/t/highlightselectionmatches-count/472
* https://codemirror.net/demo/matchhighlighter.html

You need to figure out how to plugin and activate the feature.

3) The debugger is utilizing the basic wrapper in this React component `Editor`
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/components/Editor/index.js#99

You might be interested in 
* setupEditor() method
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/components/Editor/index.js#131
which is calling `getEditor`

* getEditor() method
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/utils/editor/index.js#18

which is calling `createEditor`

* createEditor() - which is instantiating the SourceEditor() component (the basic wrapper)
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/utils/editor/create-editor.js#15

4) The `Editor` component should handle doubleclick  event to perform the highlighting
You can look at how `onClick` is implemented
https://searchfox.org/mozilla-central/rev/a8773ba2a8f015e0525f219a7e55087b04d30258/devtools/client/debugger/src/components/Editor/index.js#446

To see how to get source location  from the mouse click event, etc.
This will be needed to know what keyword to highlight.

I am not expert on the code base, so you need to spend the time and do good analysis of the code base first :-) 

HTH

Honza

Back to Bug 1619312 Comment 19