Panel View for Keep 2.5

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.

The problem

Prior to this update, this is what you saw if you clicked the share button from the main list view:

This happens to Keep in any narrow browser windows, not just in my extension.

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.

Obfuscated markup

Obfuscation is the deliberate act of creating source code that is difficult for humans to understand.
Wikipedia

Obfuscating and/or minimizing front-end code is pretty well-known by now. It’s common enough with CSS and JavaScript, and I’ve done more than my share of reverse engineering companies’ code before.

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.

@media only screen and (max-width : 450px) {
    .VIpgJd-TUo6Hb.XKSfm-L9AdLc.eo9XGd {
        left: 0 !important;
        right: 0;
        
        > div:first-child {
            max-width: 100%;
        }
    }
}

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 left value is actually already assigned inline by JavaScript, so I have to override it with !important. Much as I dislike doing that, it seems the only way until Google fixes it on their end. (And since they’re pushing the native app for phones, which are the primary viewers of Keep on small screens, it seems unlikely they will.)

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.

As usual, I’ve pushed out the updated extension to the Chrome Web Store, and the source to the Github repo.

Eiche fam