Labs/Bespin/DesignDocs/Editor/OpenFiles

From MozillaWiki
< Labs‎ | Bespin‎ | DesignDocs
Jump to: navigation, search

Design Document: Quick Open Files

Status: Much Done

Thanks to Julian, we have got a bunch of this implemented and done!

This is a 50 points implementation! :)

Overview

Being able to easily switch to the file that you are using in an editor is an incredibly important, core feature. Right now there are two ways to open files:

  • Select one from the Dashboard screen (not convenient if you are in the editor already)
  • Run "open path/to/filename" (not convenience without command line completion, and bad anyway with large paths)

There are a couple of features that we want to implement to help out here:

  • Drop in the file browser even when you are on the editor (not just in the Dashboard)
  • Have second level completion on the command line and be "file" aware
  • Have a simple way to jump to a file that you want to open

This document describes the later functionality.

File Jumper

We have mocked up the functionality here (and we have the sliced images available for anyone who wants to implement):

bespineditor_find-and_search.png

The workflow is the following:

  • User shoots off an action (Cmd-T, types "open ")
  • The popup comes out of the left hand command line
    • It is pre-populated showing the most recently opened files. This is especially important for the use case of jumping between your current scope of work. I find that I often use Cmd-T in Textmate as an Alt-Tab type replacement
  • The user can use the mouse and keyboard to navigate through the list of files that you can now open
  • If the user clicks on a file it is opened and the popup closes
  • If the user starts to type, the results are changed to show results of the search. They can be ordered by recent-opened time and alphanumeric sort order
    • There are often collisions on names (index.html) so signal the name info to the user via:
      • If duplicates in the same search: "index.html - directoryin"
      • Put the full path of the selected item into the component

Implementation

Attached to this design document are all of the images needed to get this working.

One implementation would be to do the following:

  • Create bespin/editor/fileopen.js
  • Create an event that opens up the popup, and tie a key binding to it
  • Create storage to remember the recently opened files. Note that we already have some of this information in the "Open Sessions" area of the code that could be piggy backed on
  • Decision: Preload all of the filenames in the given projects so they are searchable
    • Could do this on demand by instead of pre-loading it all, when the user types something go to the server and have it implement a simple service that returns filenames that can match the query
    • The "store" for the project -> files mapping could be stored in an indexed database allowing for quick queries, else use JavaScript array searching. Could use binary search or bucket search algorithms if needed.