1439811 - Paddings are subtracted from content width in WebExtension popup

Status: RESOLVED WONTFIX

(WebExtensions :: Untriaged, defect)

Description

[html-js]

Attachment: Padding subtracted from content width in WebExtension popups

I have designed a tiny calendar WebExtension, which makes use of the popup to display a calendar.

It displays the days in this element structure:

html > body > div#calendar > div#days > div.week > div

Applied CSS rules:

* {
    margin: 0;
    padding: 0;
    font-family: Segoe UI;
    font-size: 8pt;
}
#calendar {
    margin: 1px;
    width: 188px;
}
#days {
    display: flex;
    flex-direction: column;
}
.week {
    font-size: 0%;
}
.week > div {
    text-align: center;
    font-size: 10pt;
    display: inline-block;
    width: 24px;
    padding: 1px;
    margin-left: 1px;
}
.week > div:first-child {
    margin-left: 0;
}
#days .week > div {
    background-color: white;
    cursor: pointer;
}

As you can see, the total width is set to 188px, which is the width you get if you have 7 days, each 1+24+1=26px wide, plus 6 times 1px margin between them: 7*27-1 = 188.

Until yesterday when I was still running FF 59.0 Beta 10 (20180215111455), each week = row of 7 days took up the full width as calculated.

As of today, after installation of FF 59.0 Beta 11 (20180219114835), the week rows do not take the whole width.

This is a regression from Beta 10 to Beta 11.

Using the add-on debugger developer tools, I found out that the box model per day is calculated to a width of 22px + 1px padding per side, opposed to the CSS defining 24px.

If I open the popup's html document directly, it shows correctly.

Attached is a screenshot where the popup document is opened directly as well as inside the popup. The developer tools for the document and the web extension popup have selected the same element. You can see that the CSS rules are the same. Yet you can see the difference and the different width values in the box model inspector.

Comment 1

[html-js]

The height padding is also not taken into account. The reason seems to be that inside the popup, the divs have "box-sizing: border-box", but on the page it's "box-sizing: content-box". Explicitly adding "box-sizing: content-box;" to the ".week > div" ruleset solves the problem.

The border-box value is inherited from chrome://browser/content/extension.css:19:

18  body * {
19    box-sizing: border-box;
20    text-align: start;
21  }

Comment 2

[Kris Maglione [:kmag]]

It sounds like you want `browser_style: false` in your manifest.