Finding the CSS identifier (or what the CSS identifier is) for the hangouts box on Hangouts.google.com

Question

I am using the Web Slice widget in the KDE Desktop Enviroment and I am wondering how I can find the CSS identifier (or what the CSS identifier is) for the hangouts box on Hangouts.google.com so that I can set the web slice to show me only that portion of the page.

The Info for the Web Slice widget says:

The Webslice Widget allows you to display a part of a webpage on your desktop or in a panel. The webslice is fully interactive. Specify the URL of the webpage in the URL field.In the Element to Show field, fill in a CSS identifier (for example #mybox for elements with the id "mybox"). This is the preferred method as it works best with layout changes on the webpage." Alternatively, you can specify a rectangle on the webpage to use as slice. Use "x,y,width,height" in pixels, for example "100,80,300,360". This method is a fallback for webpages that do not provide enough semantic markup for the above mechanism. If both methods (element and geometry) are used, the element will take precedence.

Answer 1

The web slice widget refers to an "id" within a webpage - this is literally an id="" tag that might be attached to a div element or any other.

It is best to test this out on a page far simpler than Hangouts so you can get the measure of how it works.

You need to use a browser with developer tools installed, and I'll use this site as an example.

On the right of the SuperUser page when you are looking at a question, there is the sidebar with meta posts and Related questions. Lets say you wanted a webslice of the sidebar.

If you right click the region, and choose "Inspect", you get a view of the HTML. Going up from element you selected, you need to find an element that encompasses the whole area you want in the webslice.

You can see how this works by hovering your mouse over the elements - you step through each one until you find an element that turns the entire section blue.

You'll see <div id="sidebar" class="show-votes">

This covers the entire sidebar, so using the URL of this question, and the id of "sidebar", you'll get a webslice of the sidebar only.

Doing the same with Hangouts is tricky. Each conversation is its own web page effectively. If you pop out the conversation, you'll see that it has a URL, but if you take the URL and put it into a new browser window, you get nothing. The same would happen with a webslice. It probably isn't doable, because there is javascript maintaining the state, that isn't migrated with the URL.

The contacts list is similarly difficult. It is contained within an iframe. The iframe is wrapped inside a div with the id "hangout-landing-chat", so it is possible that will work, but unlikely.

The short version of this is id in a webslice refers to an id of an web page element (such as a div) that contains all of the parts of the page you want to see - it is the parent of them.