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

21
web/toolbar.js
View File

@ -320,15 +320,10 @@ class Toolbar {
]); ]);
await animationStarted; await animationStarted;
const style = getComputedStyle(items.scaleSelect), const style = getComputedStyle(items.scaleSelect);
scaleSelectContainerWidth = parseInt( const scaleSelectWidth = parseFloat(
style.getPropertyValue("--scale-select-container-width"), style.getPropertyValue("--scale-select-width")
10 );
),
scaleSelectOverflow = parseInt(
style.getPropertyValue("--scale-select-overflow"),
10
);
// The temporary canvas is used to measure text length in the DOM. // The temporary canvas is used to measure text length in the DOM.
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -342,10 +337,12 @@ class Toolbar {
maxWidth = width; 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) { if (maxWidth > scaleSelectWidth) {
docStyle.setProperty("--scale-select-container-width", `${maxWidth}px`); docStyle.setProperty("--scale-select-width", `${maxWidth}px`);
} }
// Zeroing the width and height cause Firefox to release graphics resources // Zeroing the width and height cause Firefox to release graphics resources
// immediately, which can greatly reduce memory consumption. // immediately, which can greatly reduce memory consumption.

15
web/viewer.css
View File

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