1327604 - Options tab - icons on the left compress by 1px when category becomes selected on HiDPI and zoom level > 100%

Status: NEW

(Firefox :: Settings UI, defect)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open about:preferences#general
2. Set zoom level to 110% or 120% or 130% (or set DPI level to 125%)
3. Click on category "Search" at the left. Click on category "Content", then "Applications"

AR:  Icons in said categories compress horizontally by ~1px (visually)
ER:  Icons shouldn't compress/move

Notes:
1) This is consequence of bug 477157 that causes problems eveywhere
2) There're 2 ways of fixing this in file chrome://global/skin/in-content/common.css :

   1st: replace set of rules
    .category[selected], .category.selected {
        background-color: var(--in-content-category-background-active);
        color: var(--in-content-category-text-selected);
        padding-inline-start: 11px;
        border-inline-start: solid 4px var(--in-content-border-highlight);
    }
   to
    .category[selected], .category.selected {
        background-color: var(--in-content-category-background-active);
        color: var(--in-content-category-text-selected);
      /*padding-inline-start: 11px;*/
      /*border-inline-start: solid 4px var(--in-content-border-highlight);*/
        box-shadow: inset 4px 0px 0px 0px var(--in-content-border-highlight);
    }

   2nd: replace set of rules
    .category {
        -moz-appearance: none;
        color: var(--in-content-category-text);
        border-inline-end-width: 0;
        padding-inline-start: 15px;
        padding-inline-end: 21px;
        min-height: 40px;
        transition: background-color 150ms;
    }
   to
    .category {
        -moz-appearance: none;
        color: var(--in-content-category-text);
        border-inline-end-width: 0;
      /*padding-inline-start: 15px;*/
        padding-inline-end: 21px;
        min-height: 40px;
        transition: background-color 150ms;
/* + */ padding-inline-start: 11px;
/* + */ border-inline-start: solid 4px var(--in-content-border-highlight);
    }