794237 - [rule view] [style editor] Display/Save CSS Diffs

Status: RESOLVED DUPLICATE of bug 1468775

(DevTools :: Inspector: Changes, enhancement, P3)

Description

[Andrei Hajdukewycz [:sancus]]

Similar to the Firediff add-on: https://addons.mozilla.org/en-US/firefox/addon/firediff/
it would be really nice if the Inspector could track changes made and display them in a diff-type format, as well as letting you save them as a file.

Comment 1

[Rob Campbell [:rc] (:robcee)]

+1.

This was a very-oft requested feature for Firebug and one that was extremely difficult to implement due to the way Firebug made its edits. I think we could do this, though real diffing is going to be challenging.

Comment 2

[Andrei Hajdukewycz [:sancus]]

Yeah, Firediff's diffs are not guaranteed to be line-by-line, I don't think, so you can't necessarily always apply them to a CSS file directly. However, I think just the display without saving has a lot of benefits because even if you can't apply the patch, you still gain an at-a-glance summary of all the changes you've made, which makes it much easier to duplicate them on your real file.

Comment 3

[Paul Rouget [:paul]]

Bug triage, filter on PINKISBEAUTIFUL

Comment 5

[Tom Tromey :tromey]

Since as-authored went in, all the changes go through the style sheet.
Ultimately this is handled in stylesheets.js.

A copy of the modified style sheet is stashed in the global modifiedStyleSheets map.

To get the original text, I think just adding a bit of new code to StyleSheetActor.update
to store it on first edit would do.  It could be stored in another weak map to avoid
leak issues.

Comment 7

[Patrick Brosset <:pbro>]

Moving a couple of comments I made in bug 1324757:

Things to track:
- adding, editing, deleting code in the style-editor 
- adding, disabling, editing, deleting properties in the rule-view
- adding rules or modifying selectors in the rule-view

Firediff seems to also track DOM changes, this sounds really cool, but we should handle this in another bug.

In terms of features, I think it should be possible to:
- know that CSS was changed
- export the changes
- revert the changes

In terms of proposal, I think comment 5 by Tom sounds great.
I would just add the following:

- The "unmodified" CSS text for each stylesheet should be stored server-side since it makes it possible to persist this across toolbox restarts.
- Adding a new method to StyleSheetActor that returns the unmodified text would be simple and powerful enough.
- The front-end would then be responsible for: getting the unmodified text, diffing it somehow with the current text and presenting it in the UI.
- There could be an icon in the style-editor and in the rule-view that reminds users changes have been made locally. Clicking the button would bring up a panel containing the changes.

There might be other ways, especially as far as the UI goes (diffs could be shown inline in the style-editor for instance).