31667 2009-11-19 07:31:03 -0800 Web Inspector: Changes View / Drawer 2010-07-07 08:27:58 -0700 1 1 1 Unclassified WebKit Web Inspector (Deprecated) 528+ (Nightly build) All All RESOLVED DUPLICATE 20663 P2 Enhancement --- 0 joepeck webkit-unassigned alessio.zito apavlov bweinstein joepeck pbakaus pfeldman pmuellr rik timothy oldest_to_newest 164969 0 joepeck 2009-11-19 07:31:03 -0800 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) 164982 1 pmuellr 2009-11-19 08:16:52 -0800 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. 165371 2 pbakaus 2009-11-20 11:17:57 -0800 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 239026 3 alessio.zito 2010-06-16 12:46:53 -0700 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 */ 247561 4 masterov 2010-07-07 08:12:27 -0700 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. 247567 5 masterov 2010-07-07 08:27:58 -0700 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 ***