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); mask-image: var(--findbarButton-next-icon);
} }
.toolbarButton.pageUp::before { .toolbarButton#previous::before {
mask-image: var(--toolbarButton-pageUp-icon); mask-image: var(--toolbarButton-pageUp-icon);
} }
.toolbarButton.pageDown::before { .toolbarButton#next::before {
mask-image: var(--toolbarButton-pageDown-icon); mask-image: var(--toolbarButton-pageDown-icon);
} }
.toolbarButton.zoomOut::before { .toolbarButton#zoomOut::before {
mask-image: var(--toolbarButton-zoomOut-icon); mask-image: var(--toolbarButton-zoomOut-icon);
} }
.toolbarButton.zoomIn::before { .toolbarButton#zoomIn::before {
mask-image: var(--toolbarButton-zoomIn-icon); mask-image: var(--toolbarButton-zoomIn-icon);
} }
.toolbarButton.presentationMode::before, .toolbarButton#presentationMode::before,
.secondaryToolbarButton.presentationMode::before { .secondaryToolbarButton#secondaryPresentationMode::before {
mask-image: var(--toolbarButton-presentationMode-icon); mask-image: var(--toolbarButton-presentationMode-icon);
} }
.toolbarButton.print::before, .toolbarButton#print::before,
.secondaryToolbarButton.print::before { .secondaryToolbarButton#secondaryPrint::before {
mask-image: var(--toolbarButton-print-icon); mask-image: var(--toolbarButton-print-icon);
} }
.toolbarButton.openFile::before, /* -webkit-non-mozcentral */ .toolbarButton#openFile::before, /* -webkit-non-mozcentral */
.secondaryToolbarButton.openFile::before /* -webkit-non-mozcentral */ { .secondaryToolbarButton#secondaryOpenFile::before /* -webkit-non-mozcentral */ {
mask-image: var(--toolbarButton-openFile-icon); mask-image: var(--toolbarButton-openFile-icon);
} }
.toolbarButton.download::before, .toolbarButton#download::before,
.secondaryToolbarButton.download::before { .secondaryToolbarButton#secondaryDownload::before {
mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon);
} }
.secondaryToolbarButton.bookmark { a.secondaryToolbarButton {
padding-top: 6px; padding-top: 6px;
text-decoration: none; text-decoration: none;
} }
a.toolbarButton[href="#"],
.bookmark[href="#"] { a.secondaryToolbarButton[href="#"] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.toolbarButton.bookmark::before, .toolbarButton#viewBookmark::before,
.secondaryToolbarButton.bookmark::before { .secondaryToolbarButton#secondaryViewBookmark::before {
mask-image: var(--toolbarButton-bookmark-icon); mask-image: var(--toolbarButton-bookmark-icon);
} }
@ -898,59 +898,59 @@ select {
padding-inline-end: 4px; padding-inline-end: 4px;
} }
.secondaryToolbarButton.firstPage::before { .secondaryToolbarButton#firstPage::before {
mask-image: var(--secondaryToolbarButton-firstPage-icon); mask-image: var(--secondaryToolbarButton-firstPage-icon);
} }
.secondaryToolbarButton.lastPage::before { .secondaryToolbarButton#lastPage::before {
mask-image: var(--secondaryToolbarButton-lastPage-icon); mask-image: var(--secondaryToolbarButton-lastPage-icon);
} }
.secondaryToolbarButton.rotateCcw::before { .secondaryToolbarButton#pageRotateCcw::before {
mask-image: var(--secondaryToolbarButton-rotateCcw-icon); mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
} }
.secondaryToolbarButton.rotateCw::before { .secondaryToolbarButton#pageRotateCw::before {
mask-image: var(--secondaryToolbarButton-rotateCw-icon); mask-image: var(--secondaryToolbarButton-rotateCw-icon);
} }
.secondaryToolbarButton.selectTool::before { .secondaryToolbarButton#cursorSelectTool::before {
mask-image: var(--secondaryToolbarButton-selectTool-icon); mask-image: var(--secondaryToolbarButton-selectTool-icon);
} }
.secondaryToolbarButton.handTool::before { .secondaryToolbarButton#cursorHandTool::before {
mask-image: var(--secondaryToolbarButton-handTool-icon); mask-image: var(--secondaryToolbarButton-handTool-icon);
} }
.secondaryToolbarButton.scrollPage::before { .secondaryToolbarButton#scrollPage::before {
mask-image: var(--secondaryToolbarButton-scrollPage-icon); mask-image: var(--secondaryToolbarButton-scrollPage-icon);
} }
.secondaryToolbarButton.scrollVertical::before { .secondaryToolbarButton#scrollVertical::before {
mask-image: var(--secondaryToolbarButton-scrollVertical-icon); mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
} }
.secondaryToolbarButton.scrollHorizontal::before { .secondaryToolbarButton#scrollHorizontal::before {
mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
} }
.secondaryToolbarButton.scrollWrapped::before { .secondaryToolbarButton#scrollWrapped::before {
mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
} }
.secondaryToolbarButton.spreadNone::before { .secondaryToolbarButton#spreadNone::before {
mask-image: var(--secondaryToolbarButton-spreadNone-icon); mask-image: var(--secondaryToolbarButton-spreadNone-icon);
} }
.secondaryToolbarButton.spreadOdd::before { .secondaryToolbarButton#spreadOdd::before {
mask-image: var(--secondaryToolbarButton-spreadOdd-icon); mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
} }
.secondaryToolbarButton.spreadEven::before { .secondaryToolbarButton#spreadEven::before {
mask-image: var(--secondaryToolbarButton-spreadEven-icon); mask-image: var(--secondaryToolbarButton-spreadEven-icon);
} }
.secondaryToolbarButton.documentProperties::before { .secondaryToolbarButton#documentProperties::before {
mask-image: var(--secondaryToolbarButton-documentProperties-icon); mask-image: var(--secondaryToolbarButton-documentProperties-icon);
} }
@ -975,9 +975,7 @@ select {
border-radius: 2px; border-radius: 2px;
background-color: var(--field-bg-color); background-color: var(--field-bg-color);
background-clip: padding-box; background-clip: padding-box;
border-width: 1px; border: 1px solid var(--field-border-color);
border-style: solid;
border-color: var(--field-border-color);
box-shadow: none; box-shadow: none;
color: var(--field-color); color: var(--field-color);
font-size: 12px; font-size: 12px;
@ -993,19 +991,18 @@ select {
margin-inline-start: 7px; margin-inline-start: 7px;
} }
.toolbarField.pageNumber { .toolbarField#pageNumber {
-moz-appearance: textfield; /* hides the spinner in moz */ -moz-appearance: textfield; /* hides the spinner in moz */
text-align: right; text-align: right;
width: 40px; width: 40px;
} }
.toolbarField#pageNumber.visiblePageIsLoading {
.toolbarField.pageNumber.visiblePageIsLoading {
background-image: var(--loading-icon); background-image: var(--loading-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 3px; background-position: 3px;
} }
.toolbarField.pageNumber::-webkit-inner-spin-button { .toolbarField#pageNumber::-webkit-inner-spin-button {
-webkit-appearance: none; -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="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
<div id="secondaryToolbarButtonContainer"> <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> <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button> </button>
<!--#if !MOZCENTRAL--> <!--#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> <span data-l10n-id="open_file_label">Open</span>
</button> </button>
<!--#endif--> <!--#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> <span data-l10n-id="print_label">Print</span>
</button> </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> <span data-l10n-id="download_label">Download</span>
</button> </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> <span data-l10n-id="bookmark_label">Current View</span>
</a> </a>
<div class="horizontalToolbarSeparator visibleLargeView"></div> <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> <span data-l10n-id="first_page_label">Go to First Page</span>
</button> </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> <span data-l10n-id="last_page_label">Go to Last Page</span>
</button> </button>
<div class="horizontalToolbarSeparator"></div> <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> <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
</button> </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> <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
</button> </button>
<div class="horizontalToolbarSeparator"></div> <div class="horizontalToolbarSeparator"></div>
<div id="cursorToolButtons" role="radiogroup"> <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> <span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
</button> </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> <span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
</button> </button>
</div> </div>
@ -203,16 +203,16 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="horizontalToolbarSeparator"></div> <div class="horizontalToolbarSeparator"></div>
<div id="scrollModeButtons" role="radiogroup"> <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> <span data-l10n-id="scroll_page_label">Page Scrolling</span>
</button> </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> <span data-l10n-id="scroll_vertical_label" >Vertical Scrolling</span>
</button> </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> <span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
</button> </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> <span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
</button> </button>
</div> </div>
@ -220,20 +220,20 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="horizontalToolbarSeparator"></div> <div class="horizontalToolbarSeparator"></div>
<div id="spreadModeButtons" role="radiogroup"> <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> <span data-l10n-id="spread_none_label">No Spreads</span>
</button> </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> <span data-l10n-id="spread_odd_label">Odd Spreads</span>
</button> </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> <span data-l10n-id="spread_even_label">Even Spreads</span>
</button> </button>
</div> </div>
<div class="horizontalToolbarSeparator"></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> <span data-l10n-id="document_properties_label">Document Properties…</span>
</button> </button>
</div> </div>
@ -251,36 +251,36 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="findbar_label">Find</span> <span data-l10n-id="findbar_label">Find</span>
</button> </button>
<div class="splitToolbarButton hiddenSmallView"> <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> <span data-l10n-id="previous_label">Previous</span>
</button> </button>
<div class="splitToolbarButtonSeparator"></div> <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> <span data-l10n-id="next_label">Next</span>
</button> </button>
</div> </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> <span id="numPages" class="toolbarLabel"></span>
</div> </div>
<div id="toolbarViewerRight"> <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> <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button> </button>
<!--#if !MOZCENTRAL--> <!--#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> <span data-l10n-id="open_file_label">Open</span>
</button> </button>
<!--#endif--> <!--#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> <span data-l10n-id="print_label">Print</span>
</button> </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> <span data-l10n-id="download_label">Download</span>
</button> </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> <span data-l10n-id="bookmark_label">Current View</span>
</a> </a>
@ -292,11 +292,11 @@ See https://github.com/adobe-type-tools/cmap-resources
</div> </div>
<div id="toolbarViewerMiddle"> <div id="toolbarViewerMiddle">
<div class="splitToolbarButton"> <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> <span data-l10n-id="zoom_out_label">Zoom Out</span>
</button> </button>
<div class="splitToolbarButtonSeparator"></div> <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> <span data-l10n-id="zoom_in_label">Zoom In</span>
</button> </button>
</div> </div>