Better identify and select image styles that are in actual use

Problem/Motivation

In today's coffee call we've discussed the following recipe https://www.drupal.org/project/normalized_responsive_images → which provides a set of image and responsive image style presets. out of curiosity i wanted to see the behavior of image style warmer in context with such an extensive set of styles (havent really used the image style warmer module yet). After installing i've realized my initial worry of too many or all image styles are being used for warming was unwarranted, but there is one other potential issue. In my test setup i've only configured that the image field on the article content type is using the responsive image style Landscape 32:9 which contains the following image styles...

NIS Landscape 32:9 - size 8 (128x36)
NIS Landscape 32:9 - size 16 (256x72)
NIS Landscape 32:9 - size 24 (384x108)
NIS Landscape 32:9 - size 32 (512x144)
NIS Landscape 32:9 - size 40 (640x180)
NIS Landscape 32:9 - size 48 (768x216)
NIS Landscape 32:9 - size 56 (896x252)
NIS Landscape 32:9 - size 64 (1024x288)
NIS Landscape 32:9 - size 72 (1152x324)
NIS Landscape 32:9 - size 88 (1408x396)
NIS Landscape 32:9 - size 104 (1664x468)
NIS Landscape 32:9 - size 120 (1920x540)
NIS Landscape 32:9 - size 136 (2176x612)
NIS Landscape 32:9 - size 160 (2560x720)
NIS Landscape 32:9 - size 184 (2944x828)
NIS Landscape 32:9 - size 208 (3328x936)
NIS Landscape 32:9 - size 240 (3840x1080)

...as the active image styles. When i visit admin/config/development/performance/image-style-warmer i get a list of all available image style, styles that are used/defined on fields and styles that are not being used, and with that recipe applied that list is long, very long (see image_styles.jpg).

Problem is it seems there is currently no way to see which of the listed image styles are actually being used on my installation. I would have to go to the different image fields and see which responsive image style(s) i have assigned, write down or memorize the image styles that are used on these responsive image style(s) in question, and then go to admin/config/development/performance/image-style-warmer and select those image styles by ticking each of the checkboxes.
Then there is also the problem if you have for example 30 image styles overall, you would have to click 30 times, there is no way to batch check several checkboxes at once or a select all option.
And a recipe like normalized_responsive_images applied illustrates also another problem, with many image styles available, the list quickly becomes hard to process cognitively - an overwhelming homogenous "endless scroll" of abstract image style labels.

Steps to reproduce

• apply https://www.drupal.org/project/normalized_responsive_images

Proposed resolution

1. In the screenshot the first batch of listed image styles are the ones that are being used on the image field on the article content type in my case, but i am uncertain if that is the reason why the image styles of the NIS Landscape 32:9 responsive image style are the first in the list in the screenshot? Coincidence or are image styles in use listed before those not in use? Even if the latter is the case, it might a good thing (if possible at all) to clearly label which image styles are being actively used on any image/media field within the site?
2. admin/content uses the pattern clicking a checkbox in the list and then clicking another checkbox further down the line with the shift key pressed, all checkboxes in between get checked as well. adopting that pattern for admin/config/development/performance/image-style-warmer would improve the ability to tick image styles in bulk. Not sure how much sense a "select all" checkbox makes sense alongside?
3. in regard of how to tackle the length of the list i dont have a good idea yet. paginating the list seems more of a nag, providing secondary tabs (one for used image styles one for unused), the only option that might work might be adding an option to filter the list of image styles. that way you would on one hand be able to narrow down the list and or also be able to filter by used and unused image styles.

Remaining tasks

User interface changes

API changes

Data model changes