How does the Screenshot part of the Google+ Feedba

Question

I don't have an invite but it been used on TWIG. It works as following:

You can select a parts to highlight, parts to blackout. In the next step a screenshot of that is created (??) and you can preview what other browser information is transmitted.

So how does Google create that screenshot? does it send the complete modified DOM for server-side processing? or what other black magic is involved here?

Answer 1

The highlights and black outs are just HTML divs. The screenshot of the page is a canvas.

I used Chrome's developer tools to confirm this. It even works in Firefox and Internet Explorer, so it definitely isn't just a Chrome thing.

Here's a screenshot of developer tools with one of the highlight elements highlighted to show that it is a div:

There is one canvas:

When the dialog says this:

Please wait while we take a snapshot of the page so you can highlight the relevant areas.

It seems to be rendering a screenshot of the page on the server (as there is a request in the Network tab and it has to do with a snapshot and the feedback according to the variables in the request URL) and then it places the screenshot over the page.

After you click on "Next," another dialog opens with all of the information and renders the final screenshot with your highlights and black outs in it.

I'm not sure how they did the "Highlighted Text" part though.

Answer 2

It could just send the entire DOM tree up to the server and have it rendered on the other end.

Answer 3

dont know the feature, but how your describing it; its not a crossplatform feature and not in the specs. Your looking for drawWindow of the canvas element. They then base64/urlencode the canvas and send it to the server. Can imagine they back it with serverside black magic for IE6 support.. or they make google+ a html5 browser only thing..