Updated the styling on the chrome verion.
Also got the page updates to work well. Basically every selector has its own separate style tag injected onto the content page. If the extension wants to update the style for that selecotor on the page, the content page first see if that style element exists, since the style tags id contains the selector. If it does exist it deletes the style tag, then creates a new one for the same selector.So if we are updating all headers so
So if we are updating all headers so selectors are [h1, h2, h3, h4, ..] then a separate style tag is created for each selector. That way say if later we want to update the h1 selector only, we can easily delete its style tag and then update it. Also if we have multiple selectors in the style tag, the * selector seems to be able to override them, as oppose to if they are separate, they have more power/specificity over hte * selector.
Also noticed the extension popup was taking a while to open. I discovered the reason is because it is trying to prerender the entire list of fonts before opening. With 818 fonts, it takes a while for it to do that.
So I have discovered a workaroudn where I will only load the first 10 fonts initially, but I still need to figure out how to get the lazyloading working for the fonts also, or just how to render the rest of the fonts once the popup has opened.
I thought the slowness was from the api request to Google to get the list of fonts, but it was not that in the end.
So once I get this fast loading OK, I will be ready to share with Dennis to get started on the logos and tiles for the chrome store.
At that point I can start building the details page.