1569878 - The tracking protection - Separator is misaligned on Compact density

Status: RESOLVED DUPLICATE of bug 1569872

(Firefox :: Protections UI, defect)

Description

[Serge]

Attachment: TP.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

Open any site where tracking protection icon is visible.
Set density to Compact. Observe that Separator is misaligned

Actual results:

Separator is misaligned on Compact density (It looks fine on Normal and Touch Density)

Expected results:

Separator should be aligned correctly on any density

Comment 1

[Serge]

Attachment: TP2.png

Comment 2

[Serge]

Also I've noticed that implementation of this separator is done via ::after, which is really unprofessional when compared to other separators already implemented in URL bar (for example #identity-box)

#urlbar[pageproxystate="valid"] > #identity-box.notSecureText, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity, #urlbar[pageproxystate="valid"] > #identity-box.chromeUI, #urlbar[pageproxystate="valid"] > #identity-box.extensionPage, #urlbar-display-box {
    margin-inline-end: 8px;
    border-inline-end: 1px solid var(--urlbar-separator-color);
    border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
    border-image-slice: 1;
}