Web Inspector: Changes View / Drawer

• Component: Web Inspector (Deprecated)
• Status: RESOLVED DUPLICATE

[Joseph Pecoraro]

This has been discussed numerous times on IRC. It would be similar to Firediff <http://www.incaseofstairs.com/firediff/> in that you would be able to see the number of changes you have made, what the changes were, potentially export them etc. I tried to identify what can be handled today:

Behaviors:
Add    = Ability to Create in Inspector
Edit   = Ability to Modify in Inspector
Remove = Ability to Delete from Inspector
Move   = Ability to Move in Inspector, think Drag+Drop

Fundamentals:
- DOM Node               [            Remove ]
- DOM Attribute          [ Add  Edit  Remove ]
- CSS Selector           [ Add  Edit  Remove ]
- CSS Property / Metrics [ Add  Edit  Remove ]
- Properties Sidebar     [ Add  Edit  Remove ]
- DOM Storage Pair       [ Add  Edit  Remove ]
- Cookies                [            Remove ]

Inspector Items: (might be worth knowing about)
- Inspected an Element   [ Add               ]
- Breakpoints            [ Add        Remove ]
- Watch Expressions      [ Add        Remove ]
- Profiles               [ Add               ]

Future Items to Consider:
- EventListeners (Remove/Move)
- Cookies (Add/Edit)

[Patrick Mueller]

The Items listed under "Inspector Items" would be useful to see from a "history" perspective, perhaps, especially if it would put the user in a position where they could easily "replay" the action

- Inspected an Element - could take you back to the same element in the Elements panel

- Breakpoints - could take you back to the same line in the file
 
- Watch Expressions - just display the expression; user could copy it, then paste back into the watch pane.

Might also want to see the list of things typed into the console, mainly for completeness.

[Paul Bakaus]

I love the idea of this functionality and I like the history idea as well. For inspiration, have a look at the branched history functionality of the "e" texteditor at http://www.e-texteditor.com.

I think really the most tricky part is the actual diffing. The problem is that running scripts have the ability to change the markup and CSS of the page. So in the most lazy implementation, the user hits save and gets all the script generated garbage into his export/file. So a couple thing we need to do:

1) Keep track of the initial, unchanged state
2) Optional: Log all subsequent changes into the new history (using DOMAttrChanged or something)
3) Optional: Offer an option to do a diff including script changes (easy!)
3) Normal export/save would ignore script changes, therefore tries to diff only if the user has changed DOM nodes and/or CSS that were already there at launch

[Alessio]

An easy and fast solution before THE BIG solution may be the following:

from style.css I make changes in the inspector and I can save as modifiedStyle.css with the original style automatically commented and the modified style just below.

So that the modifiedStyle.css may look like:

/* original style overridden by Web Inspector
a:link {
	color: #CCC;
}
new style below */

a:link {
	color: #CCC;
	text-decoration: none;
}

/* end of new style by Web Inspector */

[Alexei Masterov]

Depends on 20633 for exporting functionality.  I am not sure that once we have 
an abilty to export this feature (being able to track all history) will be 
useful.

[Alexei Masterov]

After discussing this with the team, I am marking this as a duplicate of 20663, 
because they both essentially talk about implementing functionality that is 
similar to Firediff.

*** This bug has been marked as a duplicate of bug 20663 ***