1775995 - Truncate long CSS selectors

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Steps:

1. Open the URL at the bottom of this comment, which contains some CSS code with a really really long selector.
2. Open DevTools.
3. Select the <div> element in the Inspector panel.

Result: it takes a while for the Rules view to populate, and it's hard to use. Imagine I have a lot of rules with long selectors, finding my properties will quickly become difficult, and the panel will become really slow.

Proposal: truncate very long selectors like is done for HTML attributes in the DOM tree.

This came from this actual user feedback: https://twitter.com/danw_xyz/status/1539653751836770304?s=20&t=Z6reL_qCX1ZNsRxxpMLXUQ

data:text/html,<div>test<style>div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div,div{color:red}