Giters

kdzwinel / SnappySnippet

Chrome extension that allows easy extraction of CSS and HTML from selected element.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Extract DOM and CSS up to the root element

crdev opened this issue · comments

commented

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)

commented

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).

commented

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).

commented

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.

commented

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

commented

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

commented

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?

commented

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.

commented

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.

commented

Released to the Web Store (v0.4).