What is the difference between tabbrowser, browser, gBrowser?

While developing Firefox extensions, I've been looking at those terms for quite some time and I find them really confusing.

Look at this link. They use the term browser in so many ways which in spite of the explanation leaves the real differences of contexts unattended.

I'm wondering if anyone can provide a top-down picture of the whole thing.

Like if there are n different Firefox windows (in the sense of an OS window) open, how do I access each window's XUL content (like address bar, scroll bar, etc.), HTML content and how do those terms come into the picture there?

EDIT: After reading Kashif's awesome answer and looking at DOM inspector, I'm left with these questions:

• tabbrowser has a property called contentDocument. It refers to the HTML document under it. But tabbrowser can have multiple documents (on in each tab). Does it even make sense to have a contentDocument property under tabbrowser? Shouldn't it exist under browser? (browser is under tabbrowser and contains just one HTML document object).
• Where does window object come? Not the XUL element, but the HTML element which all web developers use off the chrome context. The one that contains the HTML document object directly.
• To access the tab elements (the UI rectangles that represent the open tabs in Firefox) and their context menus, one must use document present in browser.xul right? They don't come under tabbrowser do they? That is what I could see from DOM inspector.

EDIT: Kashif answered all these in his answer.