As @jfkthame pointed out on matrix, 'ch' units are based on the
rendering of the '0' character, and thus their width in CSS 'px'
can vary for fonts that line things up to device pixels, which
can cause pretty big variations if you start multiplying with
large numbers like the dialog width. As a result, the dialog
was 30 CSS pixels narrower at 100% scaling than at 150% scaling,
which caused the wrapping.
I also noticed we forgot to update the width for checkboxes
and text in dialogs after our font-size changes in bug 1701920,
so I took the opportunity of fixing that here.
Differential Revision: https://phabricator.services.mozilla.com/D112241
If the site specifies the background-color, we also specify the color to the
HTML UA style. This fixes the msn issue in a better way.
Unstyled selects would still get dark mode.
Differential Revision: https://phabricator.services.mozilla.com/D110586
This regression was partially fixed in D106670. This sets the remaining window background properties on :root in Windows 7/8.
Differential Revision: https://phabricator.services.mozilla.com/D109806
This regression was partially fixed in D106670. This sets the remaining window background properties on :root in Windows 7/8.
Differential Revision: https://phabricator.services.mozilla.com/D109806
The page actions menu is normally hidden.
When the window is smaller than a threshold, and there's more than one action,
the single actions are hidden while the menu is shown. This allows for a nicer
overflow experience.
This patch introduces a pageActions-proton test folder where we'll move proton
tests temporarily. The head.js file is just a copy of the original one, we'll
clean it up in bug 1700582 after porting the other tests.
Differential Revision: https://phabricator.services.mozilla.com/D109606
This restyling mainly focuses on the text inputs, but also adjusts some
margins so that they apply more consistently between permission panels
and the password panel.
Differential Revision: https://phabricator.services.mozilla.com/D109105
This also fixes an issue with block margins that I noticed while developing
this patch, namely that the Profiler menu item was a few pixels too short
in addition to being offset to the right.
Differential Revision: https://phabricator.services.mozilla.com/D109453
This commit uses CSS grid layout to position content modal prompts, and to get the
requisite 5% top and bottom margins in a way that doesn't require JS to update,
and adapts to resizing and things like the find bar and devtools opening. To make
this work right it also removes the 5px negative top margin for these dialogs.
Then this commit adds some logic to SubDialog.jsm to support this behaviour.
Prior to this change, SubDialog.jsm sets height/width on the dialogs that go
through it, except if they pass sizeto=available (used by the print dialog).
This new sizeTo value similarly avoids all the complex sizing logic - but also
avoids the print logic of having an aspect ratio to maintain when the window
changes size. We use the content size it determines to set the height of the
dialog (a grid row): either 90% (so there's 5% above and 5% below) or the
document height, whichever is smaller.
The next commit will use this setup to deal with the problem of variable length
content inside the dialog that we're trying to show.
Differential Revision: https://phabricator.services.mozilla.com/D107110
This moves some inline styles into CSS and fixes modal masks and shadows to match the spec.
I also noticed some negative effects from other Proton button styles on close-icon buttons in dialogs
in about:preferences (e.g. check the oversized titlebar for the fonts dialog) that I fixed here.
Differential Revision: https://phabricator.services.mozilla.com/D107109
CLOSED TREE
Backed out changeset 0580aaec32a0 (bug 1693277)
Backed out changeset be8108cd9820 (bug 1693277)
Backed out changeset 8b9986d057d7 (bug 1693277)
This commit uses CSS grid layout to position content modal prompts, and to get the
requisite 5% top and bottom margins in a way that doesn't require JS to update,
and adapts to resizing and things like the find bar and devtools opening. To make
this work right it also removes the 5px negative top margin for these dialogs.
Then this commit adds some logic to SubDialog.jsm to support this behaviour.
Prior to this change, SubDialog.jsm sets height/width on the dialogs that go
through it, except if they pass sizeto=available (used by the print dialog).
This new sizeTo value similarly avoids all the complex sizing logic - but also
avoids the print logic of having an aspect ratio to maintain when the window
changes size. We use the content size it determines to set the height of the
dialog (a grid row): either 90% (so there's 5% above and 5% below) or the
document height, whichever is smaller.
The next commit will use this setup to deal with the problem of variable length
content inside the dialog that we're trying to show.
Differential Revision: https://phabricator.services.mozilla.com/D107110
This moves some inline styles into CSS and fixes modal masks and shadows to match the spec.
I also noticed some negative effects from other Proton button styles on close-icon buttons in dialogs
in about:preferences (e.g. check the oversized titlebar for the fonts dialog) that I fixed here.
Differential Revision: https://phabricator.services.mozilla.com/D107109
While using -moz-os-version selectors in a shared CSS file isn't ideal, I think it's the best approach here. These selectors will hopefully be temporary, and will be removed when bug 1695280 is fixed. I considered a creating a ruleset like
```
@media (-moz-os-version: windows-win7),
(-moz-os-version: windows-win8) {
#navigator-toolbox:-moz-lwtheme {
background-color: unset;
}
:root:-moz-lwtheme {
background-color: var(--lwt-accent-color);
}
}
```
in browser/themes/windows/browser.css, but I think unsetting the background-color could become a headache if we need to make any other changes to the #navigator-toolbox background. We could also move these background rules to platform-specific stylesheets, but that way they're defined much later in the CSS despite being fairly foundational rules. It would also create more code to remove in bug 1695280.
Differential Revision: https://phabricator.services.mozilla.com/D106670
`appearance` CSS rules allow elements to take on system appearance. For UI elements that we want to take on system styling, we set `appearance: auto` combined with platform-specific rules like `-moz-default-appearance: -moz-mac-vibrant-titlebar-light;`
macOS sidebar vibrancy broke because a background-color was being applied to `root`. That colour appeared under elements with `appearance: auto` set, so we wouldn't see the platform-specific styling. This patch moves the root background-color to `#navigator-toolbox`, so that it does not appear under `#sidebar-box`.
We still want a background colour applied to sidebars when a lwtheme includes one. We only want `appearance: auto` applied to sidebars when the active theme does not have sidebar styling rules. That's why `#sidebar-box:not(:-moz-lwtheme)` is changed to `#sidebar-box:not([lwt-sidebar])`.
This patch also removes the rule
```
:root:-moz-lwtheme {
appearance: none;
}
```
from osx/global/global.css. There's no corresponding addition of a `#navigator-toolbox { appearance:none; }` rule because that rule already exists in [osx/browser.css](https://searchfox.org/mozilla-central/rev/7067bbd8194f4346ec59d77c33cd88f06763e090/browser/themes/osx/browser.css#45).
Differential Revision: https://phabricator.services.mozilla.com/D104416
- Added a new permission panel managed by the gPermissionPanel object
- Updated identity-box to separate identity and permission section
Differential Revision: https://phabricator.services.mozilla.com/D99892
- Added a new permission panel managed by the gPermissionPanel object
- Updated identity-box to separate identity and permission section
Differential Revision: https://phabricator.services.mozilla.com/D99892
