Firediff 1.0 Released

by on Mar.21, 2010, under Firediff

After more than a year of development I am absolutely ecstatic to announce the 1.0 release of Firediff. There were quite a few hiccups due to personal commitments in this development cycle, but I feel like this release is quite solid and brings quite a few must have features.

As noted in the previous alpha and beta announcements, this release adds many key features to the 0.2.1 release:

  • Revert Changes
  • Save Snapshot
  • Save Diff
  • Document Formatters
  • Search
  • Activation Data Handling Improvements
  • Style attribute change handling

At this point I have achieved the majority of my initial goals for Firediff and feel as though it fits most of the realistic needs that I originally envisioned when I set out on this project. From this point onward the community is even more vital in defining the future direction of Firediff as I am looking for additional features that can be implemented.

The following features and fixes are currently under consideration for future releases but we are looking for more to implement.

  • Filtering of the changes view
  • Stack trace
  • Free Edit Diffing
  • Entire tree diffs on insertion or removal
  • Improved handling of inline stylesheets
  • Iframe Support
  • Parity changes with Firebug enhancements

Any input from the community in terms of feature request or code contributions that will help improve the quality of the project. If you have a cool feature that you would like to see implemented in Firediff, please feel free to file bugs or enhancement requests with the fbug project or contact me directly.

Version 1.0 is available on here and has been seeded to AMO (Under review as of this writing).

:, ,

13 Comments for this entry

  • Jeff L

    Looks like a really useful tool, thank you.

    Question about one of the features under consideration: “Improved handling of inline stylesheets”

    By that, do you mean “inline styles” in general? It seems as though Firediff doesn’t track changes made to inline styles by a jquery script.

  • kpdecker

    More of improving the way the snapshots and diffs are created for inline stylesheets.

    Do you have an example of the code that you are expect to see a diff on but are not?

  • Jeff L

    I have a jquery script that’s running an animation of the opacity of an element using their fadeOut() method. This updates the inline style of the element that’s being faded, by stepping down the opacity of the element from 1 to 0, and then setting display: none on it. None of this is getting tracked by firediff, not sure if it should be or not? Nothing is being added or removed from the DOM.

    You can try it on their live example:
    http://api.jquery.com/fadeOut/

  • Scott Plumlee

    Great extension. Two minor issues I’ve hit testing. I had to insert a CR at the end of the diff file that was generated, and I also had to manually set the fuzziness to 4 for the patch to take. I think the second issue is due to how FB renders the CSS file that Firediff is working against. For example, I use 4 spaces as a tab, and the diff file used 2.

    If it would be helpful, I’ll write up a test case and put it on the FB issue tracker, but wanted to see if these were known issues already.

  • kpdecker

    Thanks :)

    re fuzziness: There is not much that we can do about this without some changes to the Firefox codebase. Firefox drops quite a bit of formatting data to reduce memory overhead for the non-developer case. You might be able to play around with the formatter options to see if there are better results for you, but I suspect that most users will run into at least a few cases where patches do not apply cleanly :(

    re whitespace: If you change the formatter options (This is under the panel dropdown menu) does it output the whitespace that you are looking for? If it does not then that is a bug.

  • kpdecker

    The fadeOut styles issue is related to https://bugzilla.mozilla.org/show_bug.cgi?id=338679

    Long story short the data that we receive when the style attribute does not include the previous state, so there is no clean we that we can manage this. I’ll put this on my list to investigate possible work arounds.

  • Jeff L

    Fair enough, thanks for the explanation!

  • Nikita Vasilyev

    How could I apply changes?

    I edit some CSS via Firebug. Then I want to save it. How can I do it? I copy all changes by hand, paste it to my editor, and save. Is there a better way?

    It would be great to hit some floppy icon and apply a changeset (write it to actual file). Is it possible?

  • kpdecker

    @Nikita: If you right click on the last change in the Changes panel it should display the option to Save Snapshot. You can save this in place of your original file if you like. I would recommend being careful doing this as you may loose some formatting and comment data.

  • Nikita Vasilyev

    I see Firebug’s stuff saved with my page:

    <style>/* See license.txt for terms of usage */

    .firebugCanvas {

    position:fixed;

    top: 0;

    left: 0;

    display:none;

    border: 0 none;


    </style>

    <div id=”_firebugConsole” firebugversion=”1.5.3″ style=”display: none;”></div>

  • kpdecker

    @Nikita, This is a known issue and is being tracked here. http://code.google.com/p/fbug/issues/detail?id=2668

    Firebug 1.6 will hopefully improve this issue (The _firebugConsole part was literally removed today in code committed yesterday ;)).

  • Nikita Vasilyev

    It’s a great news, but I think the problem is much deeper. Page can modify itself.

    So, how to reproduce the bug:
    1. Open http://elv1s.ru/files/html+css/firediff-selfmodify-issue.html
    2. Change background-color to green via Firebug
    3. Save snapshot

    Expected result:

    <body style=”background-color: green”>
    Ok
    </body>

    Instead I see:

    <body style=”background-color: green”>
    Fail
    </body>

    It doesn’t matter on or off “Show App Changes” checkbox. Path applies on top of current state of page, not initial. Is it possible to temporarily save innerHTML of page *before* any JS executed and apply path on it?

  • kpdecker

    The snapshot is a snapshot of ALL changes up to that point, so the snapshot will include both application and Firebug changes. Attempting to do this in a general manner could be fairly complicated if even possible. I have filed Issue 2983 to track this development.

    Thanks for the input!

2 Trackbacks / Pingbacks for this entry

Visit our friends!

A few highly recommended friends...