Source colorization customization?

[kamahen]

Is there a way to colorize the sources displayed by Underhood? When I display Python source, it correctly colorizes (for example) print, if, for; incorrectly colorizes map (but does allow it as an anchor); and doesn't colorize def, not, in.

Also, it would be nice if there were a way to customize display of comments and to turn off colorization within them.

=== Edit by @robinp below

• [ ] Option to underline xrefs or not by default
• [ ] Pass language to CodeMirror
• [x] Selectable CodeMirror theme css

[kamahen]

Also, is it possible to remove the underlines for tokens? -- they make it difficult to read snake_case variables. And there are probably a few other small customizations that would improve the UI.

If you can point me to where colorization, underlining, comment-handling is done, then I can make a PR.

[robinp]

Underhood uses CodeMirror, so most of the coloring option of that or its themes apply.

Coloring:

Source code colorization now seems to be fixed to go mode, see https://github.com/TreeTide/underhood/blob/develop/treetide/underhood/ui/src/App.vue#L217. This is certainly not as intended - could set it based on the file name. (See https://codemirror.net/mode/ for the supported mode names).

One could either get the language by using a mapping based on the file extension (see https://github.com/TreeTide/underhood/blob/develop/treetide/underhood/ui/src/LangIcon.vue which already has a mapping, it could be extracted to a separate .js file), or get it from Kythe's returned lang and map that (which would need to be plumbed through the backend). I'm not really opinionated about either.

Underline:

It is hardcoded in .baseXref class, see: https://github.com/TreeTide/underhood/blob/develop/treetide/underhood/ui/src/App.vue#L489.

The nice thing here would be to add a tickbox somewhere about underlining(likely in some settings dialog), bound to a bool using vue, and returning the classes using vue dynamically computed attributes.

(Note: I like to have the underlines since it shows what you can not click, which is usually suspicious of the indexer. To give the original motivation).

[kamahen]

The Kythe schema has a convention that the language for a file node is empty. I've raised a question about this: https://github.com/kythe/kythe/issues/4246 My preference would be to use the Kythe facts for determining file type -- there's always the possibility that the sources will use some non-standard file extension that's understood only by the people who run the indexer.

I agree that for debugging, it's useful to see what items have anchors.

[kamahen]

I've opened two items in the Kythe project for languages and colorization: https://github.com/kythe/kythe/issues/4249 https://github.com/kythe/kythe/issues/4250

[kamahen]

The language fact has been added to the schema for file nodes. https://github.com/kythe/kythe/pull/4252

Of course, indexers have to support this. ;)

[kamahen]

I tried changing https://github.com/TreeTide/underhood/blob/develop/treetide/underhood/ui/src/App.vue#L217 to python ... and got no colorization. Do I need to import additional things to get colorization for languages other than Go?

[robinp]

In App.vue there's

import 'codemirror/mode/clike/clike.js';
import 'codemirror/mode/go/go.js';

so likely yes.

[kamahen]

This worked (but needs to be parameterized of course):

--- a/treetide/underhood/ui/src/App.vue
+++ b/treetide/underhood/ui/src/App.vue
@@ -30,7 +30,7 @@
       <div class="bottom_panel">
         <References
             :ticket="refTicket"
-            highlight-mode="go"
+            highlight-mode="python"
             highlight-style="solarized" />
       </div>
     </div>
@@ -44,6 +44,7 @@ import CodeMirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/clike/clike.js';
 import 'codemirror/mode/go/go.js';
+import 'codemirror/mode/python/python.js';
 import 'codemirror/theme/monokai.css';
 import 'codemirror/theme/solarized.css';
 import 'codemirror/theme/idea.css';
@@ -214,12 +215,12 @@ export default {
       code: '// Foobar\n// Baz\nint main() {}',
       refTicket: null,
       cmOptions: {
-        mode: 'go',
+        mode: 'python',
         lineNumbers: true,
         theme: 'solarized',
-        // TODO: with Infinitiy, full-page-search works, but rendering and
+        // TODO: with Infinity, full-page-search works, but rendering and
         //   adding xrefs to big docs gets slow. We should add our own search,
-        //   then can ditch Infitity, so we get speedup.
+        //   then can ditch Infinity, so we get speedup.
         viewportMargin: Infinity,
         readOnly: true,
         cursorBlinkRate: -1,