Use a CSS-only solution to set the dropdownToolbarButton width (issue 17137)

[Snuffleupagus]

Note that CSS-features such as e.g. flex didn't exist, or had poor cross-browser support, back when the JavaScript-based solution was initially implemented.

[Snuffleupagus]

To my surprise, this actually seemed much easier to implement than I originally thought.

/botio-linux preview

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Received

Command cmd_preview from @Snuffleupagus received. Current queue size: 1

Live output at: http://54.241.84.105:8877/c55d24b8001f6b9/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Success

Full output at http://54.241.84.105:8877/c55d24b8001f6b9/output.txt

Total script time: 1.44 mins

Published

• Viewer: http://54.241.84.105:8877/c55d24b8001f6b9/web/viewer.html
• Viewer (legacy): http://54.241.84.105:8877/c55d24b8001f6b9/legacy/web/viewer.html

[calixteman]

And the arrow is at the right place in arabic !
LGTM. Thank you very much.

[Snuffleupagus]

And the arrow is at the right place in arabic !

That's because we're (already) positioning it manually, in a direction-aware way, at the end of the dropdown:

pdf.js/web/viewer.css

Lines 804 to 809 in 6a6f6f1

	.dropdownToolbarButton::after {
	top: 6px;
	inset-inline-end: 6px;
	pointer-events: none;
	mask-image: var(--toolbarButton-menuArrow-icon);
	}