And more relevant to that linked comment, here's 3 of our report clients' DOM structures:

Standalone report

.lh-root.lh-vars
    <main>
        .lh-topbar
        .lh-container
            (cats.length > 1) ? undefined : .lh-sticky-header
            (cats.length > 1) ? <div> : .lh-header--solo-category
                .lh-header-container
            .lh-report
                .lh-categories
                .lh-footer
            .lh-element-screenshot__overlay

DevTools report

.lh-root.lh-vars
    .lh-topbar
    .lh-container
        (same .lh-container contents as standalone)
    .lh-element-screenshot__overlay (one level higher than standalone)

PSI report (which has two LH reports)

.lh-vars (explicit .element-screenshots-container way up here so the overlay isn't behind PSI's blue sticky header)
    .lh-element-screenshot__overlay
.result-tabs
.result-container
    .result.goog-control.lh-vars.lh-root
        .psi-category-wrapper
            .report-summary
                .lh-score__gauge
                .inspected-url-text
                .lh-scorescale
        .result-body
            .report-body
                .field-data
                .psi-category-wrapper
                    .lab-data
                        .lh-category
    .result.goog-control.lh-vars.lh-root (the Desktop one)
            (the the same stuff as the last .result)

A few things I noticed:

lh-vars and lh-root serve a very similar role and can probably merge. And there's no lh-report in PSI, but I have an alternate proposal for that.
PSI doesnt currently render toplevel warnings
PSI's DOM is the worst, because legacy. it'll be nice to clean this up going forward.
Since I've been figuring out the elem-screenshot stuff a lot.. I think we probably could tweak some things (what node the overlay defaults to, and where the css vars are installed). But right now I think I'd only move them for aesthetic reasons.
i saw a few cases where elements are called headerContainer and elemScreenshotContainer, but they're actually not the elements that have those classNames.
there's probably some room to adjust the core DOM structure (so header/body/footer are siblings under a clear parent container). But at the same time, I don't this part is too critical.

Refactor report dom, report ui features, etc. #12254

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions