From 2a22424c954866da395bc2807d65da9c483ef003 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sun, 11 Aug 2024 15:04:38 +0200 Subject: [PATCH] Remove the `secondaryToolbarButton` CSS class Secondary toolbar buttons are toolbar buttons with some extra rules, mainly to make them wider and have visible labels. However, this similarity is currently not clearly reflected in the implementation because the secondary toolbar buttons use a different CSS class, `secondaryToolbarButton`, compared to the other toolbar buttons that use the `toolbarButton` CSS class. This also causes some duplication in the rules and requires extra care to keep the common bits for the `secondaryToolbarButton` class in sync with the `toolbarButton` class. Fortunately, now that we have a dedicated CSS scope for the secondary toolbar, we can simplify this by giving all secondary toolbar buttons the `toolbarButton` class and explicitly listing the required overrides in the `#secondaryToolbar` scope instead. Doing so removes most of the special-casing for secondary toolbar buttons while explicitly listing the differences in a single place for a better overview. It also lays the foundation for making all toolbar buttons respect the `browser.uidensity` Firefox preference later by reducing differences. Co-authored-by: Calixte Denizet --- web/viewer.css | 104 ++++++++++++++++++++++++------------------------ web/viewer.html | 42 +++++++++---------- 2 files changed, 73 insertions(+), 73 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 9f3c3f9f6c8d8..7b1236e1078ae 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -629,7 +629,6 @@ body { } .toolbarButton, -.secondaryToolbarButton, .dialogButton { border: none; background: none; @@ -653,7 +652,7 @@ body { overflow: hidden; } -:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] { +:is(.toolbarButton, .dialogButton)[disabled] { opacity: 0.5; } @@ -679,7 +678,6 @@ body { .toolbarButton, .dropdownToolbarButton, -.secondaryToolbarButton, .dialogButton { min-width: 16px; margin: 2px 1px; @@ -697,27 +695,23 @@ body { .toolbarButton:is(:hover, :focus-visible) { background-color: var(--button-hover-color); } -.secondaryToolbarButton:is(:hover, :focus-visible) { - background-color: var(--doorhanger-hover-bg-color); - color: var(--doorhanger-hover-color); -} -:is(.toolbarButton, .secondaryToolbarButton).toggled, +.toolbarButton.toggled, .splitToolbarButton.toggled > .toolbarButton.toggled { background-color: var(--toggled-btn-bg-color); color: var(--toggled-btn-color); } -:is(.toolbarButton, .secondaryToolbarButton).toggled:hover, +.toolbarButton.toggled:hover, .splitToolbarButton.toggled > .toolbarButton.toggled:hover { outline: var(--toggled-hover-btn-outline) !important; } -:is(.toolbarButton, .secondaryToolbarButton).toggled::before { +.toolbarButton.toggled::before { background-color: var(--toggled-btn-color); } -:is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active, +.toolbarButton.toggled:hover:active, .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active { background-color: var(--toggled-hover-active-btn-color); } @@ -765,7 +759,7 @@ body { height: 1px; } -:is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before, +:is(.toolbarButton, .treeItemToggler)::before, .dropdownToolbarButton::after { /* All matching images have a size of 16x16 * All relevant containers have a size of 28x28 */ @@ -789,17 +783,10 @@ body { left: 6px; } -.toolbarButton:is(:hover, :focus-visible)::before, -.secondaryToolbarButton:is(:hover, :focus-visible)::before { +.toolbarButton:is(:hover, :focus-visible)::before { background-color: var(--toolbar-icon-hover-bg-color); } -.secondaryToolbarButton::before { - opacity: var(--doorhanger-icon-opacity); - top: 5px; - inset-inline-start: 12px; -} - #sidebarToggle::before { mask-image: var(--toolbarButton-sidebarToggle-icon); transform: scaleX(var(--dir-factor)); @@ -850,15 +837,6 @@ body { mask-image: var(--toolbarButton-download-icon); } -a.secondaryToolbarButton { - padding-top: 5px; - text-decoration: none; -} -a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { - opacity: 0.5; - pointer-events: none; -} - #viewThumbnail::before { mask-image: var(--toolbarButton-viewThumbnail-icon); } @@ -898,25 +876,6 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { border-radius: 50%; } -.secondaryToolbarButton { - position: relative; - margin: 0; - padding: 0 0 1px; - padding-inline-start: 36px; - height: auto; - min-height: 26px; - width: auto; - min-width: 100%; - text-align: start; - white-space: normal; - border-radius: 0; - box-sizing: border-box; - display: inline-block; -} -.secondaryToolbarButton > span { - padding-inline-end: 4px; -} - .verticalToolbarSeparator { display: block; margin: 5px 2px; @@ -1264,6 +1223,47 @@ dialog :link { } #secondaryToolbar { + .toolbarButton { + border-radius: 0; + display: inline-block; + height: auto; + margin: 0; + padding: 0 0 1px; + padding-inline-start: 36px; + position: relative; + min-height: 26px; + min-width: 100%; + text-align: start; + white-space: normal; + width: auto; + + &::before { + inset-inline-start: 12px; + opacity: var(--doorhanger-icon-opacity); + top: 5px; + } + + &:not(.toggled):is(:hover, :focus-visible) { + background-color: var(--doorhanger-hover-bg-color); + color: var(--doorhanger-hover-color); + } + + > span { + display: unset; + padding-inline-end: 4px; + } + } + + a.toolbarButton { + padding-top: 5px; + text-decoration: none; + + &[href="#"] { + opacity: 0.5; + pointer-events: none; + } + } + #secondaryToolbarButtonContainer { margin-bottom: -4px; max-height: calc(var(--viewer-container-height) - 40px); @@ -1540,7 +1540,7 @@ dialog :link { } .visibleMediumView { - display: none; + display: none !important; } @media all and (max-width: 900px) { @@ -1567,17 +1567,17 @@ dialog :link { --editor-toolbar-base-offset: 40px; } #outerContainer .hiddenMediumView { - display: none; + display: none !important; } #outerContainer .visibleMediumView { - display: inherit; + display: inherit !important; } } @media all and (max-width: 690px) { .hiddenSmallView, .hiddenSmallView * { - display: none; + display: none !important; } .toolbarButtonSpacer { width: 0; diff --git a/web/viewer.html b/web/viewer.html index d88391b8090c9..423dad49a2017 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -227,7 +227,7 @@