Sunday, February 14, 2010

"Edit this page" menu command in Jetpack

Every once in a while, I persist a web page to disk (maybe it's an airline itinerary, or whatever), and I like to make notes to myself in the page before saving it. I have a Mozilla Jetpack script that lets me edit the web page directly (in Firefox) before saving it. It works by setting the document property designMode to "on." If you're not familiar with this technique, I blogged about it previously here.

The Jetpack script puts a menu command in the right-mouse (context) menu for the page, called "Edit this page." (See screenshot below. The menu command is at the bottom.)



It would have been simple to just have the script set designMode to "on" and then have another script, with a menu command of "Disable editing," that sets it to "off," and perhaps have the menu-command label toggle back and forth depending on the mode the page is in. But I decided that would be a poor UI decision. When a page is in "edit" mode, there should be some sort of always-visible indication of that fact; otherwise you could forget why the page's links aren't working, for example. Also, there needs to be a quicker, easier way to turn off page editing than to go back to a menu command. Hence, I decided not to do a "Disable editing" menu command. Instead, I put a bright red "DESIGN MODE" flag at the top of the page and make it non-scrollable so it's always in view. To exit design mode, you just have to click anywhere in the red DESIGN MODE label. The label immediately goes away and you're back to a normal non-editable page.




The red DESIGN MODE indicator is a little obnoxious, but it's that way by design. ;)

In any event, the code for doing all this is fairly short and self-explanatory. The only non-obvious part, I think, is obtaining a reference to the current page's (or tab's) document, which in Jetpack you have to access via
jetpack.tabs.focused.contentDocument
Aside from that, the code is pretty straightforward:

jetpack.future.import("menu");

jetpack.menu.context.page.add({
label: "Edit this page",
command: function enableDesignMode( ) {

// Get a reference to the current page's DOM:
Document = jetpack.tabs.focused.contentDocument;

var INDICATOR_TEXT = "DESIGN MODE";
var INDICATOR_STYLE = 'position: fixed; ' +
'top:10px; left:400px; z-index:100' +
'font-color:black; ' +
'background-color:red;padding:10px;';

var modeIndicator =
createIndicator( INDICATOR_TEXT, INDICATOR_STYLE );

Document.body.insertBefore( modeIndicator ,
Document.body.firstChild );

function stopDesignMode( ) {
Document.body.removeChild( modeIndicator );
Document.designMode = "off";
}


// Exit Design Mode when the indicator takes a click
modeIndicator.addEventListener( "click",
stopDesignMode, false );

// This line makes the page editable:
Document.designMode = "on";

function createIndicator( text, style ) {

var span =
Document.createElement( "span" );
span.setAttribute( "style", style );
span.innerHTML = text.bold( );
return span;
}

} // end enableDesignMode( )
});

The code is public domain. Do with it as you will. No warranties of any kind are made, blah-cubed. :)

6 comments:

  1. Thanks for sharing this code.

    ReplyDelete
  2. Our company has well equipped machines and modern tools that ensure quality and fast production with the help of which we are able to manufacture more than 5,000 office chairs per year. And thus, we are able to meet the ever- growing demand of chairs. Among the many places where our products are supplied among those two biggest supplies are done in Mumbai, Pune in India.
    Movers and Packers in Gachibowli
    Movers and Packers in Kukatpally
    Movers and Packers in Chanda Nagar
    Movers and Packers in Manikonda

    ReplyDelete
  3. Our company has well equipped machines and modern tools that ensure quality and fast production with the help of which we are able to manufacture more than 5,000 office chairs per year.
    Chair Manufacturers in Mumbai
    Chair Supplier in Mumbai
    Office Chair Supplier in Mumbai
    Visitor Chair Supplier in Mumbai
    Chair Dealers in Mumbai

    ReplyDelete
  4. As a leading service provider for Packers and Movers in Mumbai we have a mission to provide the best services. Quality, excellence, politeness are the main attributes which we work upon to build the relation with our clients. With our services companies use our services very frequently.
    Packers and Movers in Kamothe
    Movers and Packers in Vashi
    Movers and Packers in Chembur
    Movers and Packers in Jogeshwari
    Movers and Packers in Kharghar
    Movers and Packers in Dombivli

    ReplyDelete
  5. A house is made up of bricks and walls, but it becomes a home when filled with love and happiness. We’re sure you can’t wait to get there and fill your new home with lots of happy memories, we’ll show you the quickest way to do that with reliable Packers and Movers Hyderabad.
    Chair Manufacturers in Mumbai
    Chair Supplier in Mumbai
    Office Chair Supplier in Mumbai
    Visitor Chair Supplier in Mumbai

    ReplyDelete
  6. Availing the services of the best movers packers Hyderabad prove to be beneficial in terms of expenses as well as ease of moving. They bring the packing material and equipment necessary to move your items safely.
    Movers and Packers in Gachibowli
    Movers and Packers in Kukatpally
    Movers and Packers in Chanda Nagar
    Movers and Packers in Manikonda

    ReplyDelete

Add a comment. Registration required because trolls.