Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I asked myself this question recently and when looking at it through the chrome debugger it would appear that they are using some techniques that are more advanced than just sectioning off the screen into highlighted and un-highlighted areas.</p> <p>The first thing to notice is that google uses 5 iframes to acheive their feedback system.</p> <p><code>google-feedback-mask-frame</code> : This is used just for the mask, it covers the whole screen. I'm not sure why they chose to use a whole iframe for this. But it serves the purpose of making sure you dont click any page links in feedback mode</p> <p><code>google-feedback-screenshot-frame</code> :This is where the real magic happens I suspect. It contains a copy of the page you were viewing, but with some proprietary HTML tags (<code>&lt;gft&gt;&lt;/gft&gt;</code>) to let the script know where highlight-able content is (images, text, links, etc.)</p> <p><code>google-feedback-feedback-frame</code> : This holds the controls for the highlighted areas as well as the X button for the whole widget. </p> <p>To pull off the effect google actually does use a bunch of sections like @Jani Hartikainen suggests. In the screenshot below you can see that when you have multiple selections there's quite a few div's that need to be created to accommodate the effect.</p> <p><img src="https://i.stack.imgur.com/hLCnj.jpg" alt="enter image description here"></p> <p>I'm sure there's a very complicated algorithm for figuring out where all the div's go, but that's what makes software dev fun right??</p> <p><code>google-feedback-proxy-frame</code> : has the controls that you see in the bottom right side.</p> <p><code>google-feedback-render-frame</code> : This one is a bit more mysterious, all it contains is a script called render_frame.js which is obviously obfuscated and illegible.</p> <p>In conclusion, using sections IS the way that google does it but there's a lot more magic that allows them to auto-highlight links and images. If you find out more I'm really interested too so let me know!</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to draw rectangle on the website to highlight?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USGreg Guida
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to draw rectangle on the website to highlight?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload