DEV: Solution accessing element

I was having a problem accessing the <toolbox>'s id due to the fact that I'm using overlay. Here is my previous XML structure:
overlay
---script
---toolbox id="tbxid"

The important thing about <overlay> is, all element inside the <overlay> will be put 'over' the existing elements within the Firefox browser. So it checks for each element's id, in order to lay it over the correct elements. If it doesn't find any id from the <overlay> element that match the element inside Firefox, it will drop that element and all its children. In our case, id = "tbxid" is not define anywhere inside Firefox, so it got dropped.

The solution to this is to give id to the child of the <toolbox>, and not the <toolbox> itself. So our XML structure will look like this:
overlay
---script
---toolbox
------toolbar id="tlbid"

We then get the parent node of <toolbar> by:
var the_parent = document.getElementById('tlbid').parentNode;

And now we can do DOM manipulation using the parent:
alert(the_parent.nodeName); // => alert 'toolbox'

Encapsulating XUL elements in and gave different result

I found an XUL code that enables us to put button and textbox on top of the statusbar. It uses that contains and . The sample codes are encapsulated in much like any other XUL files. Since TT codes are using different approaches, that is we encapsulate elements inside , and use it to lay over the default window, I changed the tag to to see what happen. It does gave a different output as shown in these two screenies:

using <window>- the chatbox is on top of statusbar












using <overlay> - the Chatbox is on the right side

How to add XUL elements on top of status bar?

I've been searching around for ways to add XUL elements on top of the statusbar. On previous findings, only <label> can be put there. But today, I found another way to put XUL elements on top of the status bar. Here are some sample codes:
<toolbox align="end" insertbefore="status-bar">
<toolbar id="nav-toolbar">
<textbox id="urlfield"/>
<toolbarbutton label="Send"/>
</toolbar>
</toolbox>

What is 'preferences'?

I found out 'preference' when I was trying to understand how XMPP.enableContentDocument() works. Somehow, SPS uses preferences to get the XUL content panel element to be passed to the function mentioned, as 1 of its parameter.

So, preferences may be, but not restricted to:
- a way to store values universally (cross-pages?)
- Storing shared data in preferences

DEV: Enable &quot;xmpp session" on TT

I've created a demo that appends dynamic XHTML element, onto the current loaded page, following the SPS hierarchy. I've tested it on google.com, so here's how the hierarchy looks like:
#document
---HTML
---HEAD
---BODY
---DIV id=xmpp-incoming
---DIV id=xmpp-outgoing
---script
Upon testing, I connect to another user through SPS. I send a message using the dinamically added chatbox and append the message to xmpp-outgoing. The message is appended successfully, but there is no message being sent to the other user. Then I activate the "xmpp session" by:
- clicking the user's name in my roster.
- Connect > Current Page
After that, I tried sending message again using the chatbox, and the message was sent successfully to the other user. The other user viewed the message in their SPS sidebar.


Theory:
by doing Connect > Current Page (C>CP), I initiated an xmpp session between me and the other user. According to SPS codes, C>CP invokes a function called XMPP.enableContentDocument(...). This function takes the following argument:
panel - a XUL content panel element (browser or iframe)
account - the account you're connecting from
address - the address of the contact you'll interact with inside the panel
type - 'chat' or 'groupchat' - if a message leaves the page without
type, it will get the type specified by this argument
createSocket - boolean - create the two div's in the page if they're
not already there
Thanks to Bard for his explanation of the parameters in this thread.

I will try to use this function in my codes, to enable xmpp session by itself.

Effort:
- add XMPP.enableContentDocument(...) to current codes.
- statically set XMPP.enableContentDocument(...) params to:
- panel = (still unknown, due to Firefox security restriction)
- account = user1@gmail.com
- address = user2@gmail.com
- type = 'chat'
- createSocket = false
- got these error message:
XMPP not define;
Solution: added script src "chrome://xmpp4moz/content/xmpp.js"
- then got this error:
Error: uncaught exception: Permission denied to get property UnnamedClass.classes
- and message is still not send.
- theory: maybe the value for panel is not correct. Tried all of these:
- doc
- root
- bodyRoot
- windowRoot
- browser

Share Cursor codeflow

I've got a chance to visit Share Cursor codes again today. I was having problem accessing functions from a dynamically added script. Some people says it couldn't be done directly, so I scoured around and found a workaround for it, as shown in previous post. Accessing anything isn't a problem anymore.

Here's the flow:
- user click Connect > Virtual workspace > Share Cursor ... the extension added <script src="laser.js">
- laser.js initialized everything from drawing the cursor, to creating 2 xmpp divs and all required elements.
- therefore, there is no problem to access anything as everything is generated from the same document and .js file.

Accessing chrome level function from browser's document

For security reasons, Firefox doesn't allow HTML element's inside a document's body to access functions / vars from chrome path files directly. Therefore, we need to append <script> tag at the appropriate places.
- inside <body> ==> didn't work
- inside <head> ==> didn't work
- inside <html> and same level as <head> and <body> ==> SUCCESS!
root.childNodes[0].appendChild(oScript);

Reminder:

windowRoot = document.documentElement;
bodyRoot = content.document.body;
root = content.document;
doc = window.document;

-------------------------------------------------
When in CHROME level
-------------------------------------------------

alert(windowRoot.nodeName); //window
alert(bodyRoot.nodeName); //body
alert(root.nodeName); //#document
alert(doc.nodeName); //#document

alert(root.childNodes[0].nodeName); //HTML
alert(doc.childNodes[0].nodeName); //window

-------------------------------------------------
When in document level
-------------------------------------------------
alert(windowRoot.nodeName); //HTML
alert(bodyRoot.nodeName); //body
alert(root.nodeName); //#document
alert(doc.nodeName); //#document

alert(root.childNodes[0].nodeName); //HTML
alert(doc.childNodes[0].nodeName); //HTML