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

Remove redundant class names from the button DOM-elements

Browse Source 
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.
This commit is contained in:
Jonas Jenwald 2022-04-27 16:04:00 +02:00
parent b72a448327
commit 4f69d66ab2
2 changed files with 64 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/viewer.css
View File

@ -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;
}

58
web/viewer.html
View File

@ -149,53 +149,53 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
<div id="secondaryToolbarButtonContainer">
<button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
<button id="secondaryPresentationMode" class="secondaryToolbarButton visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>
<!--#if !MOZCENTRAL-->
<button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
<button id="secondaryOpenFile" class="secondaryToolbarButton visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
</button>
<!--#endif-->
<button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
<button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>
<button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
<button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
<span data-l10n-id="bookmark_label">Current View</span>
</a>
<div class="horizontalToolbarSeparator visibleLargeView"></div>
<button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
<button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
<span data-l10n-id="first_page_label">Go to First Page</span>
</button>
<button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
<button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
<span data-l10n-id="last_page_label">Go to Last Page</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
<button id="pageRotateCw" class="secondaryToolbarButton" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
<span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
</button>
<button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
<button id="pageRotateCcw" class="secondaryToolbarButton" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
<span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<div id="cursorToolButtons" role="radiogroup">
<button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool" role="radio" aria-checked="true">
<button id="cursorSelectTool" class="secondaryToolbarButton toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool" role="radio" aria-checked="true">
<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
</button>
<button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool" tabindex="61" data-l10n-id="cursor_hand_tool" role="radio" aria-checked="false">
<button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61" data-l10n-id="cursor_hand_tool" role="radio" aria-checked="false">
<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
</button>
</div>
@ -203,16 +203,16 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="horizontalToolbarSeparator"></div>
<div id="scrollModeButtons" role="radiogroup">
<button id="scrollPage" class="secondaryToolbarButton scrollPage" title="Use Page Scrolling" tabindex="62" data-l10n-id="scroll_page" role="radio" aria-checked="false">
<button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62" data-l10n-id="scroll_page" role="radio" aria-checked="false">
<span data-l10n-id="scroll_page_label">Page Scrolling</span>
</button>
<button id="scrollVertical" class="secondaryToolbarButton scrollVertical toggled" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="scroll_vertical" role="radio" aria-checked="true">
<button id="scrollVertical" class="secondaryToolbarButton toggled" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="scroll_vertical" role="radio" aria-checked="true">
<span data-l10n-id="scroll_vertical_label" >Vertical Scrolling</span>
</button>
<button id="scrollHorizontal" class="secondaryToolbarButton scrollHorizontal" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="scroll_horizontal" role="radio" aria-checked="false">
<button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="scroll_horizontal" role="radio" aria-checked="false">
<span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
</button>
<button id="scrollWrapped" class="secondaryToolbarButton scrollWrapped" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="scroll_wrapped" role="radio" aria-checked="false">
<button id="scrollWrapped" class="secondaryToolbarButton" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="scroll_wrapped" role="radio" aria-checked="false">
<span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
</button>
</div>
@ -220,20 +220,20 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="horizontalToolbarSeparator"></div>
<div id="spreadModeButtons" role="radiogroup">
<button id="spreadNone" class="secondaryToolbarButton spreadNone toggled" title="Do not join page spreads" tabindex="66" data-l10n-id="spread_none" role="radio" aria-checked="true">
<button id="spreadNone" class="secondaryToolbarButton toggled" title="Do not join page spreads" tabindex="66" data-l10n-id="spread_none" role="radio" aria-checked="true">
<span data-l10n-id="spread_none_label">No Spreads</span>
</button>
<button id="spreadOdd" class="secondaryToolbarButton spreadOdd" title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="spread_odd" role="radio" aria-checked="false">
<button id="spreadOdd" class="secondaryToolbarButton" title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="spread_odd" role="radio" aria-checked="false">
<span data-l10n-id="spread_odd_label">Odd Spreads</span>
</button>
<button id="spreadEven" class="secondaryToolbarButton spreadEven" title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="spread_even" role="radio" aria-checked="false">
<button id="spreadEven" class="secondaryToolbarButton" title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="spread_even" role="radio" aria-checked="false">
<span data-l10n-id="spread_even_label">Even Spreads</span>
</button>
</div>
<div class="horizontalToolbarSeparator"></div>
<button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="69" data-l10n-id="document_properties" aria-controls="documentPropertiesDialog">
<button id="documentProperties" class="secondaryToolbarButton" title="Document Properties…" tabindex="69" data-l10n-id="document_properties" aria-controls="documentPropertiesDialog">
<span data-l10n-id="document_properties_label">Document Properties…</span>
</button>
</div>
@ -251,36 +251,36 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="findbar_label">Find</span>
</button>
<div class="splitToolbarButton hiddenSmallView">
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
<button class="toolbarButton" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
<button class="toolbarButton" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
<span data-l10n-id="next_label">Next</span>
</button>
</div>
<input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page" autocomplete="off">
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page" autocomplete="off">
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
<button id="presentationMode" class="toolbarButton hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>
<!--#if !MOZCENTRAL-->
<button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
<button id="openFile" class="toolbarButton hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
</button>
<!--#endif-->
<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
<button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>
<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
<button id="download" class="toolbarButton hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
<a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
<a href="#" id="viewBookmark" class="toolbarButton hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
<span data-l10n-id="bookmark_label">Current View</span>
</a>
@ -292,11 +292,11 @@ See https://github.com/adobe-type-tools/cmap-resources
</div>
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
<button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
<span data-l10n-id="zoom_out_label">Zoom Out</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
<button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
<span data-l10n-id="zoom_in_label">Zoom In</span>
</button>
</div>