It doesn't make sense to have the progress bar and the dummy tree data displayed when the find files dialog is first displayed. These were added so that we could see them. Let's take them out now and have them displayed when the Find button is pressed. First, we need to make them initially invisible. The CSS property display is used to control whether an element is visible or not.

We'll change the progress meter so that is initially hidden. Also, we will add an id attribute so that we can refer to it in a script to show and hide it. While we're at it, let's also hide the splitter and results tree as we only need to show them after a search is performed.

<tree id="results" style="display:none;">

  .
  .
  .
<splitter id="splitbar" collapse="before" resizeafter="grow" style="display:none;"/>

<box orient="horizontal">

  <progressmeter id="progmeter" value="50%"
    style="margin: 4px; display: none;"/>

We've added a CSS style property display and set its value to none. This causes the element to be hidden when it first appears. By default, the display property defaults to a value which tells the element to be displayed. The exact value is different for each element, because each element has a different way of being displayed. Look in the file xul.css in the Mozilla chrome directory for details about the default styles for each XUL element and the file html.css in the Mozilla res directory for details about the default styles for each HTML element.

In the case of the progressmeter, the default display mode is inline. When we want to show the progress meter, we just set the display style property to this value. We'll do this in a moment.

First, let's add a function that is called when the Find button is pressed. We'll put scripts in a separate file findfile.js. In the last section, we added the script element in the XUL file. If you haven't done this, do that now, as shown below. An onclick handler will also be added to the Find button.

<script src="findfile.js"/>
  .
  .
  .
<button id="find-button" class="dialog" value="Find" default="true"
   style="width: 8ex" onclick="doFind();"/>

Now, create another file called findfile.js in the same directory as findfile.xul. We'll add the doFind() function is here. Later, we'll add some other functions. You should always put scripts in separate files, except for short fragments which can be put directly in the event handler.

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.setAttribute("style","margin: 4ex; display: inline;");
}

This function first gets a reference to the progress meter using its id, progmeter. Then, the second line of the function body sets the style attribute of the progress meter to have an inline display. Note that we've also had to add the margin also so that it doesn't get removed. This isn't the best way to set style properties. DOM level 2 allows us to do the following:

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.style.display="inline";
}

This is better as we do not change the margin on the element as well. But this doesn't work fully in Mozilla yet. (It does work for HTML elements so it should be coming soon.)

Finally, let's have an alert box pop up that displays what will be searched for. Of course, we wouldn't want this in the final version but we'll add it to reassure us that something would happen.

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.setAttribute("style","display: inline;");
  var searchtext=document.getElementById('find-text').value;
  alert("Searching for \""+searchtext+"\"");
}

Now, with that alert box in there, we know what should happen when we click the Find button. We could add additional code to get the selections from the drop-down boxes too.