Concerned about having add-on disabled with the next update

[noitidart]

styleSheet = [
// start| Playlist spacer
"@media screen and (min-width: 640px){\n",
" .part_playlist_spacer #watch-appbar-playlist{\n",
" margin-left: 0 !important;\n",
" }\n",
"}\n",
// … etc
].join(’’);

Creating style tag

var css = document.createElement(‘style’);
vat txt = ‘…’; // for a short CSS
// For a long CSS, read from a separate file and then use
css.textContent = txt;
// alternative (slightly faster) to above line
css.appendChild(document.createTextNode(txt));
document.head.appendChild(css);

Insert rules into the stylesheet

stylesheet.insertRule(rule, index)

Oh to do this equiavlent with jsonToDom you would do:

var myStylesheet = ['html:style', {},
                        '@media screen and (min-width: 640px) {',
                            '.part_playlist_spacer #watch-appbar-playlist {',
                                'margin-left: 0 !important;',
                            '}',
                        '}'
                   ];
document.head.appendChild(jsonToDOM(myStylesheet, document, {}));

kinda cool huh? easy too cross browser too

[erosman]

Slightly off-topic: @noitidart
Has anyone done a performance comparison for jsonToDOM vs other methods?

[noitidart]

That’s a good q @erosman but I never bothered because if there is a lower performance to use jsonToDOM (which I doubt) the strengths far outweigh it. Templating is absolute cake with jsonToDOM.

Only weakness of jsonToDOM is that it doesnt handle attaching multiple listneres to a specific event. Like for example, you can only add one listener to onclick, as the object is a key value pair, i was thinking of improving it, doing a test on the on* things, and if its an array then it attaches them all.