Document Outline Panel 0.2

[jgraham]

<a href="http://forums.mozillazine.org/viewtopic.php?p=569586#569586">As promised</a>:

http://www-jcsu.jesus.cam.ac.uk/~jg307/ ... tliner.xpi

Known Issues:
<ol>
<li>Doesn't work well with scrollable elements on the page (iframes, <code>overflow:scroll</code> elements, frames, etc.)</li>
<li>Doesn't update after the page finishes loading (I'm not quite sure what to do about this - should, I suppose, listen for changes in the document but I'd need a significantly more refined approach to updating the outline - at the momennt I just tear everything down and rebuild it)</li>
</ol>

[jgraham]

I should add that this is Firefox with new EM only. Also Issue 1 above just means that I haven't implemented code to scroll anything other than the main window - it won't break any pages I've used the extension a little and it's pretty useful

[Sencer]

I can't believe this hasn't gotten more attention.

This is an excellent idea, and it is well implemented. I was specifically looking for something like this, and I just registered to say thanks.

This really should get some more "promotion".


Keep up the good work.

[jgraham]

New version, same URL.

Fixed:
Several fixes for annoying bugs (doesn't interfere with browser chrome, always gets the full outline).

Remaining Issues:
Doesn't listen for DOM mutation events so won't update after the document loads
Doesn't load the outline untill the whole document has finished loading (if anyone knows how to tell when the DOM has finished loading even if the other resources such as images haven't, this wll be fixed soon. Otherwise I'll implement imcremental updating and fix both issues together).

Feedback welcome, I'd like to put this on update.mozilla.org soon, so it would be good to know if there are any bugs (other than the two listed) that need attention.

[©dn]

How would you go about 'incremental updating' ?

URIid needs to know when it's got a body to attach an id / classes to, but at present has to make do with onload which means a wait for images and the like.

[Hidea]

sorry, but what does it do?

[jgraham]

How would you go about 'incremental updating' ?

Well the idea I had was to start trying to load when the location bar changes (i.e. on the call to nsIWebProgress::onLocationChange). At that poiint you'd set a timeout interval equal to the users paint delay (with some sutiable minimum if their paint delay is 0 or really small). On each callback requery the document for new elements and add them if appropriate. Stop this when the DOM is finished loading or when the whole document has finished loading.

Does that sound reasonable?

[jgraham]

sorry, but what does it do?

Sorry, it's not very obvious. It adds a 'Document Outline' entry to View - Sidebar (you can also use Alt+O). This displays the outline of the document in a panel. The outline is based on any heading tags (<h1> to <h6>) present. If the document doesn't have any heading tags (e.g. Mozillazine forums) then it doesn't do anything useful. If the document uses heradings well, it provides a useful way of navigating the document (like the Outline view in MS Word or the similar feature in Acrobat Reader).

[theuiguy]

That's a very nice and useful extension. Thanks!

On long and complex documents, it would be useful to be able to collapse all and expand all in the outline. Perhaps you could add a dropdown menu similar to the view menu in the History sidebar.

In looking at a number of sites, I'm somewhat saddened by how few properly use headings. It's a little confusing that the Outliner doesn't always show the heading depth. For example, if I have document with h3 followed by h2 followed by h1, they show up as if they are all at the same level in the outline. That doesn't seem quite correct, but then the markup is quite confused as well. I guess I'm wanting the outline to more clearly show how broken the markup is.

[jgraham]

On long and complex documents, it would be useful to be able to collapse all and expand all in the outline. Perhaps you could add a dropdown menu similar to the view menu in the History sidebar.

Good idea

It's a little confusing that the Outliner doesn't always show the heading depth. For example, if I have document with h3 followed by h2 followed by h1, they show up as if they are all at the same level in the outline.

Well, in that case, I could do something like:

Missing
- Missing
-- h3
Missing
- h2
h1

But I'm not sure that's an improvement, since you end up with a lot of superflous entries. Hmm...

[©dn]

How would you go about 'incremental updating' ?

Well the idea I had was to start trying to load when the location bar changes (i.e. on the call to nsIWebProgress::onLocationChange). At that point you'd set a timeout interval equal to the user's paint delay (with some suitable minimum if their paint delay is 0 or really small). On each callback requery the document for new elements and add them if appropriate. Stop this when the DOM is finished loading or when the whole document has finished loading.

Does that sound reasonable?

Possibly, I don't know enough about load events, that's why I asked.

on before page load listener - in use in a development version of URIid (fires too soon : ] *)

So it just needs that paint delay thingy .. ?

* hence interest in a listener for a <body> ...

[jgraham]

on before page load listener - in use in a development version of URIid (fires too soon : ] *)

I'm using the same copied code

So it just needs that paint delay thingy .. ?

* hence interest in a listener for a <body> ...

Well strictly, the delay can be anything, not just the paint delay - the paint delay seems logical as a minimum since the screen won't update more often than that. Something like:

Code: Select all

const NOTIFY_STATUS =
Components.interfaces.nsIWebProgress.NOTIFY_STATE_WINDOW;
const STATE_STOP =
Components.interfaces.nsIWebProgressListener.STATE_STOP;
const STATE_START =
Components.interfaces.nsIWebProgressListener.STATE_START;

var gTimerID;
var gIsNewLoad = false;

var accesskeysLoadListener =
  {
    onStateChange:function(aProgress,aRequest,aFlag,aStatus)
    {
      //This fires if the loading state changes. We want to make sure we update when the document has finished loading
      if (aFlag & STATE_START) {
   //This  fires when a document starts loading
        //we can use this event to distinguish real loads from the user switching tabs
   gIsNewLoad = true;
      }
      if (aFlag & STATE_STOP) {
   //We need to cancel the timer at the end
        clearInterval(gTimerID);
   gIsNewLoad = false;
   //make sure we are really up-to-date at the end
   init();
      }
      return 0;
    },
    onLocationChange:function(aProgress,aRequest,aLocation){
      //This fires if the location changes
      if (!gIsNewLoad) {
   //event here if  you want one when a tab switches 
   init();
      }
      else {
        //if it's a real load we set an interval here for our function
   gTimerID = setInterval("init()", 500);
      }
      return 0;
    }
  }

Sorry, the indentation sucks. In your case, you probably want to cancel the timer as soon as you have a body to hook onto and you probably don't care about tab-switching events.

[©dn]

Got to be worth a try ... thanks

[Chris Fritz]

This is a most excellent extension, jgraham. I definitely appreciate the work people do on extensions like this (and hope I'll get the hang over writing extensions eventually to start writing and contributing my own!) I use W3's outliner all the time, and this'll save my time (since I'm on a dial-up connection) as well as W3's bandwidth (which I'll immediately use on validating various web sites just to could the errors =P )

--Chris

[FinalKut]

but I would love it if you would update this extension for FF 1 PR .1

It worked fine with 0.93- but wont run now.

please update it :O) it is a handy extension for use in additional testing of sites I develop to make sure they have sensible structure

thanks