960987 - Show me the diff of what I've changed in the style editor and inspector.

Status: RESOLVED DUPLICATE of bug 794237

(DevTools :: Style Editor, defect)

Description

[Blake Winton (:bwinton) (:☕️)]

I like to poke around in the Inspector, and I just watched shorlander poke around in the Style Editor for an hour, and it would be nice for both of us to have an easy way to see (and save) what we've changed so that we can back-port it to the source files.

Comment 1

[Patrick Brosset <:pbro>]

By inspector, you mean the style-inspector (i.e. the rule-view), right? Cause you can make changes to the HTML markup tree too, but back-porting changes from there might be more complex since in many cases, the markup is generated and/or modified client-side via javascript.
When it comes to the rule-view, I think we could definitely find ways to save a diff or something.
When it comes to the style-editor, you can save on disk the file you changed directly from that tool, were you thinking of something different?

Comment 2

[Blake Winton (:bwinton) (:☕️)]

I did mean the rule-view, yes.

Darrin also pointed out that I could save the file directly.  (He's sitting beside me right now!  ;)  But…

If the original file was in SASS or LESS, or if it was one of the pre-processed files from the Firefox source tree, then saving the original file isn't as helpful as seeing what I changed.

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

I should be done with my source outline patch today. I would like to work on this next.

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

Source outline requires a bit more work, but I will still be interested in working on this later.

Comment 5

[Victor Porof [:vporof][:vp]]

(In reply to Gabriel L (:gluong) from comment #4)
> Source outline requires a bit more work, but I will still be interested in
> working on this later.

Thank you Gabriel! Your work is much appreciated :)

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

The current plan is to implement diff annotations in the Style Editor followed by the ability to save a diff patch. The diff annotations would look similar to GitGutter (https://raw.githubusercontent.com/jisaacks/GitGutter/master/screenshot.png) which would put an icon next to the line numbers illustrating whether or not the line has been changed, added or deleted. 

I am leaning towards using google-diff-match-patch (https://code.google.com/p/google-diff-match-patch/) as the diff library due to the fact that it was used in the merge addon for codemirror (http://codemirror.net/demo/merge.html). I have not looked into any of the diff libraries too deeply, but some concerns would be licenses, performance and integration with codemirror. The libraries I have found so far:
https://github.com/kpdecker/jsdiff
https://github.com/cemerick/jsdifflib

Comment 7

[Gabriel Luong [:gl] (ΦωΦ)]

One other consideration is how would the diff patch be generated in presentable manner.

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 960987.patch [WIP]

This patch ports most of CodeMirror's merge addon, and google-diff-match-patch library. In the screenshot (https://cloudup.com/clRryAXj-ic), you can see that the single empty line illustrates a chunk of code that was deleted. In addition, lines that are modified are highlighted, and values that are modified/added also has a green underline.

The next step we are planning is to remove the line markers and show markers in the line number gutter. This is illustrated in the screenshot of GitGutter for Sublime Text (https://github.com/jisaacks/GitGutter).

Any feedback or suggestions before I make additional changes are very welcome.

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: DiffView with Line Markers

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 960987.patch [WIP2]

Comment 11

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 960987-part-1.patch

Comment 12

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 960987-part-2.patch