[prev in list] [next in list] [prev in thread] [next in thread] 

List:       mozilla-ui
Subject:    Re: chrome question/help
From:       Ben Goodger <deadmooncircus () hotmail ! com>
Date:       1999-08-15 0:23:17
[Download RAW message or body]

This reply is a little technical for the UI newsgroup, so if you're
offended by JavaScript turn away now! :)

> Since these ideas have to do with the UI, would i be able to do it my
> self? I don't know how to program, but if some one can give me some
> links on how to make your own skin that would be very helpful. Also, is
> chrome or whatever as easy to learn as HTML? I know some HTML.
---
you should try to learn JavaScript, if you haven't already, since most
of the UI is "programmed" in JavaScript, with the odd function call to
core services.

I don't know how difficult it'd be to pull off what you suggest. Maybe
some sort of "hot" area that when moused over caused the personal
toolbar's visibility/display property to be set in such a way as it
became visible, and when moused out it'd go away:

// hook up to an onMouseOver event handler on your hotspot (annotated)
function onHotSpotOver()
{
   // get all the <toolbar> elements and put in an array
   var toolbars = document.getElementsByTagName("toolbar");
   var personalbar;
   // loop through all the toolbar elements in the chrome
   for(i = 0; i < toolbars.length; i++)
   {
      // if the current toolbar has its ref attribute equal to 
      // "NC:PersonalToolbarFolder" (which happens to be something that
      // uniquely identifies the personal toolbar).
      if(toolbars[i].getAttribute("ref") == "NC:PersonalToolbarFolder")
      {
          // put the current toolbar into a variable so we can 
          // manipulate it
          personalbar = toolbars[i];
          // stop looping because we've found our target.
          break;
      }
   }
   // set the display CSS property of the personal bar to be "block"
   // (makes it visible)
   personalbar.style.display = "block";
}

// hook up to an onMouseOut event handler on your hotspot
function onHotSpotOut()
{
   var toolbars = document.getElementsByTagName("toolbar");
   var personalbar;
   for(i = 0; i < toolbars.length; i++)
   {
      if(toolbars[i].getAttribute("ref") == "NC:PersonalToolbarFolder")
      {
          personalbar = toolbars[i];
          break;
      }
   }
   // set the display CSS property of the personal bar to be "none"
   // (makes it invisible)
   personalbar.style.display = "none";
}

This is a rather cheap hack, as Navigator.xul doesnt currently give an
ID to the personal<toolbar>, but that could be fixed and this code
significantly simplified. As you can see, a little JavaScript is
probably necessary for UI hacks (although you wont need it to create
skins), but fortunately JS isn't that hard to learn, and there are some
good tutorials available. See Devedge's JavaScript section at
http://developer.netscape.com/ to get started.

Chrome is defined in XUL, which looks as easy as HTML but it is a bit
pickier. You either have to close your XUL tags, or put a "/" before the
closing ">" for non-closable tags, e.g.:

<box>this is a xul box</box>
<titledbutton value="this is a XUL titledbutton"/>

Once you teach yourself to stop forgetting the "/"s, its not that hard
:)
Some useful documentation is available at:
http://www.mozilla.org/xpfe/xptoolkit
which should be enough to get you started.

(also note that I dont think you can show/hide toolbars easily yet, so
this script may not work for a milestone or so ;) but that just may be
me doing the wrong thing.)

I think that the moveable toolbars may be a core feature that will be
added later once the D&D of toolbar buttons etc is working. 

Ben

[prev in list] [next in list] [prev in thread] [next in thread]