How to change tree row font size without hard-coding class names?


#1

I’m working on a plugin that should allow the user to change the style (e.g., font size) of tree rows and ace tabs on a click of a button. I’m selecting tree rows by class name and giving them new font sizes:

// assuming tree is listed in main.consumes
var treeRowElements = imports.tree.getElementsByClassName('tree-row');
Array.prototype.forEach.call(treeRowElements, function(currRow) {
    currRow.style.fontSize = '20px';
});

I imagine something similar could be done for ace tabs as well, but I hate the idea of hard-coding class names like that. is there a better way to achieve this?

thanks in advance!


#2

getElementsByClassName won’t work for changing appearance, since new tree rows are created all the time.
You need to use css instead.


#3

good point! mind giving more details about the way I should do it using CSS? does this involve using ~/.c9/styles.css?


#4

It depends on what you are trying to do, is the plugin meant to provide zoom button for the ui or something else?


#5

@harutyun kind of. it’s meant to provide a button that toggles a mode where the font sizes, and possibly other properties (e.g., width, height) of some plugins/UI elements (e.g., ace, terminal, etc) increase.

of course it’s easy to increase font sizes of things like ace and terminal, so it’s mostly about other UI elements (e.g., tree rows, ace tabs, etc).


#6

never mind. managed to change font size of tree rows by applying some CSS using ui.insertCss on tree.container. see https://apidoc.c9.io/c9v3/#!/api/ui-method-insertCss!