1202492 - Checkboxes on about:preferences page take all line width, so they may be accidentally clicked

Status: RESOLVED DUPLICATE of bug 1399883

(Firefox :: Settings UI, defect)

Description

[arni2033]

Attachment: Checkboxes on about-preferences page take all line width, so they may be accidentally clicked.png

STR:   (Win7_64, Nightly 43, 32bit, ID 20150905030205, new profile, safe mode)
1. Open about:preferences
2. Open devtools->Style editor, create new style "checkbox{outline:2px dashed violet}"
3. Switch through categories on preferences tab and notice that some checkboxes take all line width

Expectations: Checkbox rectangle should match the checkbox image+text label. Not take all line.

Also, I described connected issue in bug 1169306 comment 3

Solution: For element groupbox[id="locationBarGroup"] the solution is to set attribute [align="left"]
          For other elements the solution is to place checkbox into additional <hbox>

Comment 1

[johngraciliano]

Actually the attribute align should be set to "start" not "left" (otherwise it is bad for rtl locales).  This attribute should be set for the container box that has the affected check-boxes.  This may also be done through the css property -moz-box-align, example, for the #locationBarGroup in the initial comment you can set through css (e.g., in the theme):

#locationBarGroup .groupbox-body{
  -moz-box-align: start;
}

and the problem is solved for the check-boxes in the section.  However, this solution cannot be applied everywhere because this shrinks the container box so it would create a problem for the container of #e10sAutoStart.  That one in particular should be enclosed in an hbox.  After checking in Firefox Developer Edition 44.0a2, I find that with exception of the e10s checkbox it is enough to add into chrome://browser/skin/preferences/in-content/preferences.css the rule:

#locationBarGroup .groupbox-body,
#encryptionPanel,
#separateProfileBox{
 -moz-box-align: start;
}

That solves the problem everywhere (with the noted exception).  The selectors belong to different tabs, so the rule may be split through the file to fit the format of preferences.css.