From 4f69d66ab2f26ac4caf1cdd9e87d60707826eb52 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 27 Apr 2022 16:04:00 +0200 Subject: [PATCH 1/2] Remove redundant class names from the button DOM-elements Note how in the `viewer.html` file we're specifying class names for most buttons, despite that not really being necessary. First of all, in many cases those class names are *identical* to the element-ids. Secondly, looking through the CSS rules they are only ever used when specifying button icons. All-in-all, we should be able to simplify the HTML-code and use the element-ids in the CSS rules instead. Obviously ids have a higher CSS specificity than classes, but given how the old classes were being used that shouldn't be a problem here. Also, the patch generalizes the styling for buttons (e.g. `viewBookmark`) that are *actually* link-elements. Finally, while slightly unrelated, this patch also removes a little bit of duplication when specifying the border for `toolbarField`s. --- web/viewer.css | 73 ++++++++++++++++++++++++------------------------- web/viewer.html | 58 +++++++++++++++++++-------------------- 2 files changed, 64 insertions(+), 67 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 992430388..96c4b24a0 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -790,54 +790,54 @@ select { mask-image: var(--findbarButton-next-icon); } -.toolbarButton.pageUp::before { +.toolbarButton#previous::before { mask-image: var(--toolbarButton-pageUp-icon); } -.toolbarButton.pageDown::before { +.toolbarButton#next::before { mask-image: var(--toolbarButton-pageDown-icon); } -.toolbarButton.zoomOut::before { +.toolbarButton#zoomOut::before { mask-image: var(--toolbarButton-zoomOut-icon); } -.toolbarButton.zoomIn::before { +.toolbarButton#zoomIn::before { mask-image: var(--toolbarButton-zoomIn-icon); } -.toolbarButton.presentationMode::before, -.secondaryToolbarButton.presentationMode::before { +.toolbarButton#presentationMode::before, +.secondaryToolbarButton#secondaryPresentationMode::before { mask-image: var(--toolbarButton-presentationMode-icon); } -.toolbarButton.print::before, -.secondaryToolbarButton.print::before { +.toolbarButton#print::before, +.secondaryToolbarButton#secondaryPrint::before { mask-image: var(--toolbarButton-print-icon); } -.toolbarButton.openFile::before, /* -webkit-non-mozcentral */ -.secondaryToolbarButton.openFile::before /* -webkit-non-mozcentral */ { +.toolbarButton#openFile::before, /* -webkit-non-mozcentral */ +.secondaryToolbarButton#secondaryOpenFile::before /* -webkit-non-mozcentral */ { mask-image: var(--toolbarButton-openFile-icon); } -.toolbarButton.download::before, -.secondaryToolbarButton.download::before { +.toolbarButton#download::before, +.secondaryToolbarButton#secondaryDownload::before { mask-image: var(--toolbarButton-download-icon); } -.secondaryToolbarButton.bookmark { +a.secondaryToolbarButton { padding-top: 6px; text-decoration: none; } - -.bookmark[href="#"] { +a.toolbarButton[href="#"], +a.secondaryToolbarButton[href="#"] { opacity: 0.5; pointer-events: none; } -.toolbarButton.bookmark::before, -.secondaryToolbarButton.bookmark::before { +.toolbarButton#viewBookmark::before, +.secondaryToolbarButton#secondaryViewBookmark::before { mask-image: var(--toolbarButton-bookmark-icon); } @@ -898,59 +898,59 @@ select { padding-inline-end: 4px; } -.secondaryToolbarButton.firstPage::before { +.secondaryToolbarButton#firstPage::before { mask-image: var(--secondaryToolbarButton-firstPage-icon); } -.secondaryToolbarButton.lastPage::before { +.secondaryToolbarButton#lastPage::before { mask-image: var(--secondaryToolbarButton-lastPage-icon); } -.secondaryToolbarButton.rotateCcw::before { +.secondaryToolbarButton#pageRotateCcw::before { mask-image: var(--secondaryToolbarButton-rotateCcw-icon); } -.secondaryToolbarButton.rotateCw::before { +.secondaryToolbarButton#pageRotateCw::before { mask-image: var(--secondaryToolbarButton-rotateCw-icon); } -.secondaryToolbarButton.selectTool::before { +.secondaryToolbarButton#cursorSelectTool::before { mask-image: var(--secondaryToolbarButton-selectTool-icon); } -.secondaryToolbarButton.handTool::before { +.secondaryToolbarButton#cursorHandTool::before { mask-image: var(--secondaryToolbarButton-handTool-icon); } -.secondaryToolbarButton.scrollPage::before { +.secondaryToolbarButton#scrollPage::before { mask-image: var(--secondaryToolbarButton-scrollPage-icon); } -.secondaryToolbarButton.scrollVertical::before { +.secondaryToolbarButton#scrollVertical::before { mask-image: var(--secondaryToolbarButton-scrollVertical-icon); } -.secondaryToolbarButton.scrollHorizontal::before { +.secondaryToolbarButton#scrollHorizontal::before { mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); } -.secondaryToolbarButton.scrollWrapped::before { +.secondaryToolbarButton#scrollWrapped::before { mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); } -.secondaryToolbarButton.spreadNone::before { +.secondaryToolbarButton#spreadNone::before { mask-image: var(--secondaryToolbarButton-spreadNone-icon); } -.secondaryToolbarButton.spreadOdd::before { +.secondaryToolbarButton#spreadOdd::before { mask-image: var(--secondaryToolbarButton-spreadOdd-icon); } -.secondaryToolbarButton.spreadEven::before { +.secondaryToolbarButton#spreadEven::before { mask-image: var(--secondaryToolbarButton-spreadEven-icon); } -.secondaryToolbarButton.documentProperties::before { +.secondaryToolbarButton#documentProperties::before { mask-image: var(--secondaryToolbarButton-documentProperties-icon); } @@ -975,9 +975,7 @@ select { border-radius: 2px; background-color: var(--field-bg-color); background-clip: padding-box; - border-width: 1px; - border-style: solid; - border-color: var(--field-border-color); + border: 1px solid var(--field-border-color); box-shadow: none; color: var(--field-color); font-size: 12px; @@ -993,19 +991,18 @@ select { margin-inline-start: 7px; } -.toolbarField.pageNumber { +.toolbarField#pageNumber { -moz-appearance: textfield; /* hides the spinner in moz */ text-align: right; width: 40px; } - -.toolbarField.pageNumber.visiblePageIsLoading { +.toolbarField#pageNumber.visiblePageIsLoading { background-image: var(--loading-icon); background-repeat: no-repeat; background-position: 3px; } -.toolbarField.pageNumber::-webkit-inner-spin-button { +.toolbarField#pageNumber::-webkit-inner-spin-button { -webkit-appearance: none; } diff --git a/web/viewer.html b/web/viewer.html index 5b8b1a676..b6d0c83af 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -149,53 +149,53 @@ See https://github.com/adobe-type-tools/cmap-resources
- - - - - + Current View @@ -292,11 +292,11 @@ See https://github.com/adobe-type-tools/cmap-resources
-
-
From 1e24fe97f2d81847978c67851336ac4978e032d3 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 27 Apr 2022 16:13:26 +0200 Subject: [PATCH 2/2] Remove unnecessary CSS classes when specifying button icons Currently we're using *both* ids and classes when specifying the button icons, which seems completely unnecessary and only serves to bloat the CSS code. In general you always need to be careful about CSS specificity, but in these cases that should not actually be a problem. Also, while not a button, this patch makes a similar simplification for the `pageNumber`-input. --- web/viewer.css | 84 +++++++++++++++++++++++++------------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 96c4b24a0..a4d102880 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -772,57 +772,57 @@ select { inset-inline-start: 12px; } -.toolbarButton#sidebarToggle::before { +#sidebarToggle::before { mask-image: var(--toolbarButton-sidebarToggle-icon); transform: scaleX(var(--dir-factor)); } -.toolbarButton#secondaryToolbarToggle::before { +#secondaryToolbarToggle::before { mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); transform: scaleX(var(--dir-factor)); } -#findPrevious.toolbarButton::before { +#findPrevious::before { mask-image: var(--findbarButton-previous-icon); } -#findNext.toolbarButton::before { +#findNext::before { mask-image: var(--findbarButton-next-icon); } -.toolbarButton#previous::before { +#previous::before { mask-image: var(--toolbarButton-pageUp-icon); } -.toolbarButton#next::before { +#next::before { mask-image: var(--toolbarButton-pageDown-icon); } -.toolbarButton#zoomOut::before { +#zoomOut::before { mask-image: var(--toolbarButton-zoomOut-icon); } -.toolbarButton#zoomIn::before { +#zoomIn::before { mask-image: var(--toolbarButton-zoomIn-icon); } -.toolbarButton#presentationMode::before, -.secondaryToolbarButton#secondaryPresentationMode::before { +#presentationMode::before, +#secondaryPresentationMode::before { mask-image: var(--toolbarButton-presentationMode-icon); } -.toolbarButton#print::before, -.secondaryToolbarButton#secondaryPrint::before { +#print::before, +#secondaryPrint::before { mask-image: var(--toolbarButton-print-icon); } -.toolbarButton#openFile::before, /* -webkit-non-mozcentral */ -.secondaryToolbarButton#secondaryOpenFile::before /* -webkit-non-mozcentral */ { +#openFile::before, /* -webkit-non-mozcentral */ +#secondaryOpenFile::before /* -webkit-non-mozcentral */ { mask-image: var(--toolbarButton-openFile-icon); } -.toolbarButton#download::before, -.secondaryToolbarButton#secondaryDownload::before { +#download::before, +#secondaryDownload::before { mask-image: var(--toolbarButton-download-icon); } @@ -836,38 +836,38 @@ a.secondaryToolbarButton[href="#"] { pointer-events: none; } -.toolbarButton#viewBookmark::before, -.secondaryToolbarButton#secondaryViewBookmark::before { +#viewBookmark::before, +#secondaryViewBookmark::before { mask-image: var(--toolbarButton-bookmark-icon); } -#viewThumbnail.toolbarButton::before { +#viewThumbnail::before { mask-image: var(--toolbarButton-viewThumbnail-icon); } -#viewOutline.toolbarButton::before { +#viewOutline::before { mask-image: var(--toolbarButton-viewOutline-icon); transform: scaleX(var(--dir-factor)); } -#viewAttachments.toolbarButton::before { +#viewAttachments::before { mask-image: var(--toolbarButton-viewAttachments-icon); } -#viewLayers.toolbarButton::before { +#viewLayers::before { mask-image: var(--toolbarButton-viewLayers-icon); } -#currentOutlineItem.toolbarButton::before { +#currentOutlineItem::before { mask-image: var(--toolbarButton-currentOutlineItem-icon); transform: scaleX(var(--dir-factor)); } -#viewFind.toolbarButton::before { +#viewFind::before { mask-image: var(--toolbarButton-search-icon); } -.toolbarButton.pdfSidebarNotification::after { +.pdfSidebarNotification::after { position: absolute; display: inline-block; top: 1px; @@ -898,59 +898,59 @@ a.secondaryToolbarButton[href="#"] { padding-inline-end: 4px; } -.secondaryToolbarButton#firstPage::before { +#firstPage::before { mask-image: var(--secondaryToolbarButton-firstPage-icon); } -.secondaryToolbarButton#lastPage::before { +#lastPage::before { mask-image: var(--secondaryToolbarButton-lastPage-icon); } -.secondaryToolbarButton#pageRotateCcw::before { +#pageRotateCcw::before { mask-image: var(--secondaryToolbarButton-rotateCcw-icon); } -.secondaryToolbarButton#pageRotateCw::before { +#pageRotateCw::before { mask-image: var(--secondaryToolbarButton-rotateCw-icon); } -.secondaryToolbarButton#cursorSelectTool::before { +#cursorSelectTool::before { mask-image: var(--secondaryToolbarButton-selectTool-icon); } -.secondaryToolbarButton#cursorHandTool::before { +#cursorHandTool::before { mask-image: var(--secondaryToolbarButton-handTool-icon); } -.secondaryToolbarButton#scrollPage::before { +#scrollPage::before { mask-image: var(--secondaryToolbarButton-scrollPage-icon); } -.secondaryToolbarButton#scrollVertical::before { +#scrollVertical::before { mask-image: var(--secondaryToolbarButton-scrollVertical-icon); } -.secondaryToolbarButton#scrollHorizontal::before { +#scrollHorizontal::before { mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); } -.secondaryToolbarButton#scrollWrapped::before { +#scrollWrapped::before { mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); } -.secondaryToolbarButton#spreadNone::before { +#spreadNone::before { mask-image: var(--secondaryToolbarButton-spreadNone-icon); } -.secondaryToolbarButton#spreadOdd::before { +#spreadOdd::before { mask-image: var(--secondaryToolbarButton-spreadOdd-icon); } -.secondaryToolbarButton#spreadEven::before { +#spreadEven::before { mask-image: var(--secondaryToolbarButton-spreadEven-icon); } -.secondaryToolbarButton#documentProperties::before { +#documentProperties::before { mask-image: var(--secondaryToolbarButton-documentProperties-icon); } @@ -991,18 +991,18 @@ a.secondaryToolbarButton[href="#"] { margin-inline-start: 7px; } -.toolbarField#pageNumber { +#pageNumber { -moz-appearance: textfield; /* hides the spinner in moz */ text-align: right; width: 40px; } -.toolbarField#pageNumber.visiblePageIsLoading { +#pageNumber.visiblePageIsLoading { background-image: var(--loading-icon); background-repeat: no-repeat; background-position: 3px; } -.toolbarField#pageNumber::-webkit-inner-spin-button { +#pageNumber::-webkit-inner-spin-button { -webkit-appearance: none; }