Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify the dropdownToolbarButton-select width computation

Browse Source 
The way that we set the width of the `dropdownToolbarButton`-select is very old, and despite some improvements over the years this is still somewhat hacky.
In particular, note how we're assigning the select-element a larger width than its containing `dropdownToolbarButton`-element. This was done to prevent displaying *two* separate icons, i.e. the native and the PDF.js one, since it's the only way to handle this in older browsers (particularly Internet Explorer).

Given the currently supported browsers, there's however a better solution available: use `appearance: none;` to disable native styling of the select-element. [According to MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#browser_compatibility), this is supported in all reasonably modern browsers.
This way we're able to simplify both the CSS rules and the JS-code that's used to adjust the `dropdownToolbarButton` width in a localization aware way.
This commit is contained in:
Jonas Jenwald 2022-10-07 17:50:55 +02:00
parent 3dc9b427b9
commit 450be1ad3e
2 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/toolbar.js
View File

@ -320,14 +320,9 @@ class Toolbar {
]);
await animationStarted;
const style = getComputedStyle(items.scaleSelect),
scaleSelectContainerWidth = parseInt(
style.getPropertyValue("--scale-select-container-width"),
10
),
scaleSelectOverflow = parseInt(
style.getPropertyValue("--scale-select-overflow"),
10
const style = getComputedStyle(items.scaleSelect);
const scaleSelectWidth = parseFloat(
style.getPropertyValue("--scale-select-width")
);
// The temporary canvas is used to measure text length in the DOM.
@ -342,10 +337,12 @@ class Toolbar {
maxWidth = width;
}
}
maxWidth += 2 * scaleSelectOverflow;
// Account for the icon width, and ensure that there's always some spacing
// between the text and the icon.
maxWidth += 0.3 * scaleSelectWidth;
if (maxWidth > scaleSelectContainerWidth) {
docStyle.setProperty("--scale-select-container-width", `${maxWidth}px`);
if (maxWidth > scaleSelectWidth) {
docStyle.setProperty("--scale-select-width", `${maxWidth}px`);
}
// Zeroing the width and height cause Firefox to release graphics resources
// immediately, which can greatly reduce memory consumption.

15
web/viewer.css
View File

@ -20,8 +20,7 @@
--sidebar-width: 200px;
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
--scale-select-container-width: 140px;
--scale-select-overflow: 22px;
--scale-select-width: 140px;
--toolbar-icon-opacity: 0.7;
--doorhanger-icon-opacity: 0.9;
@ -791,29 +790,27 @@ body {
}
.dropdownToolbarButton {
width: var(--scale-select-container-width);
width: var(--scale-select-width);
padding: 0;
overflow: hidden;
background-color: var(--dropdown-btn-bg-color);
border: var(--dropdown-btn-border);
}
.dropdownToolbarButton::after {
top: 6px;
inset-inline-end: 7px;
inset-inline-end: 6px;
pointer-events: none;
mask-image: var(--toolbarButton-menuArrow-icon);
}
.dropdownToolbarButton > select {
width: calc(
var(--scale-select-container-width) + var(--scale-select-overflow)
);
appearance: none;
width: inherit;
height: 28px;
font-size: 12px;
color: var(--main-color);
margin: 0;
padding: 1px 0 2px;
padding-inline-start: 4px;
padding-inline-start: 6px;
border: none;
background-color: var(--dropdown-btn-bg-color);
}