Extract DOM and CSS up to the root element #8

crdev · 2013-09-30T08:27:27Z

While being immensely useful, the extension does not allow the extraction of the entire ancestor tree (up to the root element, with the ancestor elements' CSS), which may be crucial for getting the element's HTML in its surrounding context (e.g. when debugging layout issues)

kdzwinel · 2013-09-30T08:33:33Z

Hi! Thanks for input. I'm not 100% sure what situation are we talking here about, can you give me an example? Dumping whole <body> should work just fine (although SnappySnippet was created with small DOM subtrees in mind).

crdev · 2013-09-30T08:46:56Z

Sure, here's what some users would like to see. Having

<html>
<body>
  <div id="header">...</div>
  <div id="content">
    <div class="foo">
      <span class="investigate-this">...</span>
      <span class="sibling">...</span>
    </div>
  </div>
  <div id="footer">...</div>
</body>
</html>

a developer might want to get only a tree of direct ancestors of .investigate-this with their respective CSS styles applied in order to stay focused on the element of interest:

<html>
<body>
  <div id="content">
    <div class="foo">
      <span class="investigate-this">...</span>
    </div>
  </div>
</body>
</html>

since ancestors may drastically affect the entire layout by means of successor/child selectors (we are not taking siblings into account, even though detecting if sibling selectors affect each of the ancestors in the tree would be awesome).

kdzwinel · 2013-09-30T08:59:33Z

Interesting proposition! Now that you mentioned it, I've seen that SnappySnippet is breaking position:absolute sometimes due to lack of ancestors. With your idea implemented this wouldn't be a problem. I think that we can add this as a setting that's disabled by default. I'll try to find some time this week to implement this.

crdev · 2013-09-30T09:39:43Z

Awesome! That thing with position: absolute is exactly in the stream of what users are trying to achieve!

crdev · 2013-10-31T09:02:16Z

Hey Konrad. Any progress or ETA on this feature available? :)

kdzwinel · 2013-10-31T09:38:13Z

Hi! Sorry I haven't kept my promise. I'm snowed under nowadays, but I remember about this feature. It shouldn't be very hard to implement but there is one catch that comes to my mind. This functionality doesn't really fit anywhere right now (from the code and UI perspective):

First thing that comes to my mind is creating another filter in the 'advanced settings' panel. However, each time someone checks/unchecks it we will have to re-fetch the HTML/CSS from the page. Loader will have to be shown and no one likes loaders. Plus, in the code we will have to somehow keep the reference to the object that should be fetched. If someone inspects element A, clicks 'create snippet', inspects element B, turns on filter 'get all parent nodes' then we should know that we have to fetch element A and it's parents not B. Plus, filters were not designed to 'talk to' with Snapshooter objects.
Creating another big button saying 'create a snippet... + get all parent nodes' also comes to my mind. The benefit here is that code will be simple, but this functionality is pretty 'advanced' and I'd prefer to keep it hidden. Besides, it will be hard to name the button so that everyone understands what it does.
Hm, so maybe a small checkbox somewhere near the 'shapshot' button saying 'grab parents'?

Thoughts?

crdev · 2013-10-31T13:45:18Z

Hey. I've got a patch. Basically, the object returned from Snapshooter will look like this:

{
    html: ...,
    leadingAncestorHtml: ...,
    trailingAncestorHtml: ...,
    css: ...,
    ancestorCss: ...
}

Now, if we want to include the ancestor chain in the results, we just

styles = lastSnapshot.ancestorCss.concat(styles);
html = lastSnapshot.leadingAncestorHtml + html + lastSnapshot.trailingAncestorHtml;

But I need another pull request (related to CSS properties handling, already sent out) to get landed first.

aharon-lanin · 2013-11-03T09:04:36Z

I too am extremely interested in including the ancestors' HTML and CSS in SnappySnippet. See https://code.google.com/p/chromium/issues/detail?id=121416 for use cases.

kdzwinel · 2013-11-20T23:29:26Z

Released to the Web Store (v0.4).

crdev mentioned this issue Nov 1, 2013

Use ancestor elements in the generated HTML and CSS #12

Merged

kdzwinel closed this as completed Nov 20, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extract DOM and CSS up to the root element #8

Extract DOM and CSS up to the root element #8

crdev commented Sep 30, 2013

kdzwinel commented Sep 30, 2013

crdev commented Sep 30, 2013

kdzwinel commented Sep 30, 2013

crdev commented Sep 30, 2013

crdev commented Oct 31, 2013

kdzwinel commented Oct 31, 2013

crdev commented Oct 31, 2013

aharon-lanin commented Nov 3, 2013

kdzwinel commented Nov 20, 2013

Extract DOM and CSS up to the root element #8

Extract DOM and CSS up to the root element #8

Comments

crdev commented Sep 30, 2013

kdzwinel commented Sep 30, 2013

crdev commented Sep 30, 2013

kdzwinel commented Sep 30, 2013

crdev commented Sep 30, 2013

crdev commented Oct 31, 2013

kdzwinel commented Oct 31, 2013

crdev commented Oct 31, 2013

aharon-lanin commented Nov 3, 2013

kdzwinel commented Nov 20, 2013