658674 - Extract minimal test case from complex page

Status: NEW

(DevTools :: General, enhancement, P3)

Description

[Steve Fink [:sfink] [:s:]]

Attachment: problem.html - input page

I just filed this on the firebug issue tracker at http://code.google.com/p/fbug/issues/detail?id=4450 but will repeat it here, so I can be ignored both places. :) (It's a difficult task, and many people will probably disagree on its usefulness.)

When working on the CSS for a large, dynamic web page, I often run into cases where I want to reduce a problematic situation down to the minimal steps to reproduce it in a simpler environment. I can use Firefox to save the page to a local set of files, but those can still be very large (and hence slow and confusing to work with) and "live" -- JS scripts are still there, so XHR requests may still fire off etc.

Optimally, I'd like to be able to select a rectangular region on the screen and save out the minimal HTML and CSS to reproduce the contents of that region.

I imagine that this would magically find all elements that intersect the region of interest, find their bounding box, then replace everything outside of that bounding box with spacer divs/spans. For CSS, keep only the rules that affect elements intersecting the region of interest. Possibly keep the elements to the left and right of the region of interest to avoid mutating the source too much from what the author is familiar with.

I'm attaching a pair of files: problem.html and minimal.html. problem.html is a sample of a file to be debugged. Imagine you selected a fairly tight region around the word "how". The desired output would look something like minimal.html (even though you didn't select any part of the word "angered", its shadow extended into the region of interest so it was kept.)

Comment 1

[Steve Fink [:sfink] [:s:]]

Attachment: minimal.html - possible output

Comment 2

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

Are you asking for a tool to help you minimize a page (and its associated css and script files) down to a minimal test case?

It should be possible. Having a UI that shows a representation of various pieces of the web page, being able to selectively turn them off and dump the resulting output. I know it would help us when someone gives us a complex web page and says, "Feature X is broken!", but it seems like it'd be mostly useful as a tool for Firefox/platform devs.

CC-ing Martijn who has a lot of experience building minimized test-cases. Do you have any tools that help you do this?

Comment 3

[Martijn Wargers (dead)]

I'm normally using the dom inspector for that. You can select nodes you want to investigate by clicking on the "find a node to inspect by clicking on it" button. You can then press the del key to delete dom nodes in the dom inspector.

Comment 4

[Steve Fink [:sfink] [:s:]]

(In reply to comment #2)
> Are you asking for a tool to help you minimize a page (and its associated
> css and script files) down to a minimal test case?

Yes and no. I do want to minimize a page, but the result is not something that I would use to submit a bug report with. Well, it is, but that's not my motivation here. It's just a part of my normal workflow when trying to figure out puzzling CSS behavior in an actual page: if I can't figure out why it's doing something different from what I want it to do by using the firebug CSS inspector and/or random flailing, then I try writing out a minimal case that (I hope) matches the real problem I'm dealing with. Then I'll try tweaking that minimal case to see if I can get it to do what I want. Sometimes, I'm doing this even after I tweaked the full scenario and got it to do what I wanted, because I don't understand why what I did worked and I want to learn whatever esoteric bit of CSS is relevant. And many times, my minimal example doesn't exhibit the behavior of my full test, and I progressively make it more and more like the real page. 

> It should be possible. Having a UI that shows a representation of various
> pieces of the web page, being able to selectively turn them off and dump the
> resulting output. I know it would help us when someone gives us a complex
> web page and says, "Feature X is broken!", but it seems like it'd be mostly
> useful as a tool for Firefox/platform devs.

I agree that would be useful, but that's not my use case. See above.

I generally don't want any associated scripts, by the way -- I want a rendering of the relevant region of the *dynamic* page to HTML+CSS, even if it doesn't match the original static HTML all that well. This is all about focusing in on specific layout issues.

A specific example: I was trying to figure out a way to display a "selected" set of builds in tbpl. I wanted to draw a box around each selected build, but I did not want that box (border) to modify any element's dimensions. Or really, I didn't want anything else to move on the page as a result of a box getting drawn around a build letter.

I got it to almost work with negative margins and a 1px solid border, but the top line of the border didn't appear. I played with z-index, but no luck. If I extracted what I thought was the relevant CSS and HTML, it didn't behave the same way. I think I had all of the CSS right for the elements that I wanted to style, but not for the neighboring elements that were "interfering".

I never figure out the problem, btw, so perhaps what I describe in this bug wouldn't have helped. But I've often had similar issues.

As for deleting DOM nodes until the relevant ones are left -- that seems like it would work ok for this, but I was hoping for something that would get me to the end (minimal) result immediately rather than O(removed) (in time proportional to the number of elements I have to delete, that is.)

Comment 5

[Kevin Dangoor]

This is a neat idea for a tool, but I'll note that we have a tool in progress (the Style Doctor) to help with CSS problems in particular. It won't help every case, but the idea in general is that the Style Doctor will figure out why the styles are not being applied as you had wanted them to be. It's a more direct way to solve the problem rather than a diagnostic tool.

That said, I can see at least a couple of use cases for something like what you're describing, so it's worth considering. Thanks!

Comment 6

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

found during triage. This is still a neat idea for a tool, but I don't think it would fit in a Style Doctor. It's a more specific problem that would share some code with a CSS doctor, particularly the association of CSS selectors to specific nodes in a page.

See bug 657352.