The only clue we have as to this markup’s purpose is aria-label. The classes seem to be random strings of text. Upon further investigation, though, they’re not random; they’re the same in each page load. They are dependable, which just means that Google must be running the stylesheet and markup through some sort of obfuscator before rendering. I just need to map the classes out in my override stylesheet to the appropriate styles.
It’s somewhat handy that I moved all my CSS to being generated by Sass, so I can have my styles commented in the dev version. The stylesheet loaded by the extension is compiled without comments and minified.
In my efforts, I ran into a Sass bug. But before I get into that, let me back up. In order to get the note content to take up the full height, I did this:
Simple enough, right? Right. Except there’s a problem: the toolbar was being pushed out of view by the note content, which was taking up the entire page. 100%, of course.
From what I can tell, the toolbar is always the same height. So I set that height to an appropriately named variable (an advantage of Sass ftw). I opted for this, instead of defining the value in the class itself, so I can come back to it and I’ll know what that value is for. (You know I won’t remember six months from now.)
Using that, I set the height using the CSS function calc(). This is a CSS function, not a Sass function, so it will result in a dynamic value as the window gets resized.
Except it doesn’t work. Why doesn’t it work? I know that Chrome supports calc() (and this is the reason I don’t have a fallback defined, this being in a Chrome extension). Using the value outright, instead of coming from a variable, works just fine.