As much of my code in my extension for Keep, Google’s note-taking service, it’s totally a hack. But it’s stupid and it works, it ain’t stupid.
A while ago, Google added the capability to share a note in Keep with anyone (as long as they have a Google account). You can click the share button in the main list view or on an individually opened note.
Prior to this update, this is what you saw if you clicked the share button from the main list view:
You could add a person to share with, but you couldn’t get over to the save button. Clicking enter didn’t do anything, either. So the only way to share a note was to send the panel back to a tab, share with them there, and then send Keep back to a panel again.
Well, that wouldn’t do at all. So I set about to fix it.
Obfuscation is the deliberate act of creating source code that is difficult for humans to understand.
But when I dove into Google’s markup on the Keep website, I was introduced to something else entirely. The markup itself was obfuscated; at least, the classes were. Here’s a sample.
And I’m like:
I’ve never seen classes get obfuscated before. I can only imagine what kind of crazy deployment magic Google has got going on.
I’m making the assumption that the classes are static, and not randomly generated on each page load. I put in some positioning overrides in a stylesheet that loads after the webapp finishes loading.
A couple notes on what I had to do. Everything is inside a media query, so it’s only executed on narrower screens. (The panel has a default width of 400.)
The right value makes the parent element stretch the entire width, which is what we want. Notes already do this on the page, as do other modals.
The first child element, which is what contains the actual popup, has a width of 600 pixels. Since that is wider than the panel window, we’ll give it a maximum width, as well.
The result is nice, just like if Google had coded their share popup right the first time.