From 918e2a2b2664adcec353a2af7037445c9147c783 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 29 Mar 2023 13:47:52 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/7813

---
 app/src/asset/index.ts          | 110 +++++++++++++++++---------------
 app/src/asset/pdf/app.js        |   1 +
 app/src/asset/pdf/pdf_viewer.js |   2 +
 3 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/app/src/asset/index.ts b/app/src/asset/index.ts
index 1060a80e7..36d03224f 100644
--- a/app/src/asset/index.ts
+++ b/app/src/asset/index.ts
@@ -88,23 +88,23 @@ export class Asset extends Model {
       <div id="sidebarContainer">
         <div id="toolbarSidebar">
           <div id="toolbarSidebarLeft">
-              <button id="viewThumbnail" class="toolbarButton toggled b3-tooltips b3-tooltips__ne" tabindex="2" aria-label="${window.siyuan.languages.thumbsTitle}">
+              <button id="viewThumbnail" class="toolbarButton toggled b3-tooltips b3-tooltips__ne" aria-label="${window.siyuan.languages.thumbsTitle}">
                 <svg><use xlink:href="#iconImage"></use></svg>
               </button>
-              <button id="viewOutline" class="toolbarButton b3-tooltips b3-tooltips__ne" tabindex="3" aria-label="${window.siyuan.languages.outline}">
+              <button id="viewOutline" class="toolbarButton b3-tooltips b3-tooltips__ne" aria-label="${window.siyuan.languages.outline}">
                  <svg><use xlink:href="#iconAlignCenter"></use></svg>
               </button>
-              <button id="viewAttachments" class="toolbarButton fn__none" tabindex="4" data-l10n-id="attachments">
+              <button id="viewAttachments" class="toolbarButton fn__none" data-l10n-id="attachments">
                  <span data-l10n-id="attachments_label">Attachments</span>
               </button>
-              <button id="viewLayers" class="toolbarButton fn__none" tabindex="5" data-l10n-id="layers">
+              <button id="viewLayers" class="toolbarButton fn__none" data-l10n-id="layers">
                  <span data-l10n-id="layers_label">Layers</span>
               </button>
           </div>
           <div class="fn__flex-1"></div>
           <div id="toolbarSidebarRight">
             <div id="outlineOptionsContainer" class="fn__hidden">
-              <button id="currentOutlineItem" class="toolbarButton b3-tooltips b3-tooltips__nw" disabled="disabled" tabindex="6" aria-label="${window.siyuan.languages.focusOutline}">
+              <button id="currentOutlineItem" class="toolbarButton b3-tooltips b3-tooltips__nw" disabled="disabled" aria-label="${window.siyuan.languages.focusOutline}">
                 <svg><use xlink:href="#iconFocus"></use></svg>
               </button>
             </div>
@@ -124,31 +124,31 @@ export class Asset extends Model {
       </div>
       <div id="mainContainer">
         <div class="findbar b3-menu fn__hidden doorHanger" id="findbar">
-            <input id="findInput" class="toolbarField b3-text-field" placeholder="${window.siyuan.languages.search}" tabindex="91">
+            <input id="findInput" class="toolbarField b3-text-field" placeholder="${window.siyuan.languages.search}">
             <div class="fn__space"></div>
-            <button id="findPrevious" class="toolbarButton findPrevious b3-tooltips b3-tooltips__n" tabindex="92" aria-label="${window.siyuan.languages.previous}">
+            <button id="findPrevious" class="toolbarButton findPrevious b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.previous}">
                 <svg><use xlink:href="#iconUp"></use></svg>
             </button>
-            <button id="findNext" class="toolbarButton findNext b3-tooltips b3-tooltips__n" tabindex="93" aria-label="${window.siyuan.languages.next}">
+            <button id="findNext" class="toolbarButton findNext b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.next}">
                 <svg><use xlink:href="#iconDown"></use></svg>
             </button>
             <label class="b3-button b3-button--outline b3-button--small">
-                <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
+                <input type="checkbox" id="findHighlightAll" class="toolbarField">
                 ${window.siyuan.languages.findHighlight}
             </label>
             <div class="fn__space"></div>
             <label class="b3-button b3-button--outline b3-button--small">
-                <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
+                <input type="checkbox" id="findMatchCase" class="toolbarField">
                 ${window.siyuan.languages.searchCaseSensitive}
             </label>
             <div class="fn__space"></div>
             <label class="b3-button b3-button--outline b3-button--small">
-                <input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96">
+                <input type="checkbox" id="findMatchDiacritics" class="toolbarField">
                 ${window.siyuan.languages.matchDiacritics}
             </label>
             <div class="fn__space"></div>
             <label class="b3-button b3-button--outline b3-button--small">
-                <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97">
+                <input type="checkbox" id="findEntireWord" class="toolbarField">
                 ${window.siyuan.languages.findEntireWord}
             </label>
             <div class="fn__space"></div>
@@ -157,32 +157,52 @@ export class Asset extends Model {
         </div>  <!-- findbar -->
         <div id="secondaryToolbar" class="secondaryToolbar fn__hidden doorHangerRight b3-menu">
           <div id="secondaryToolbarButtonContainer">
-            <button id="pdfLight" class="secondaryToolbarButton b3-menu__item toggled" tabindex="54">
+            <button id="pdfLight" class="secondaryToolbarButton b3-menu__item toggled">
               <svg class="b3-menu__icon"><use xlink:href="#iconLight"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.themeLight}</span>
             </button>
-            <button id="pdfDark" class="secondaryToolbarButton b3-menu__item" tabindex="55">
+            <button id="pdfDark" class="secondaryToolbarButton b3-menu__item">
               <svg class="b3-menu__icon"><use xlink:href="#iconDark"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.themeDark}</span>
             </button>
             <div class="horizontalToolbarSeparator b3-menu__separator"></div>
-            <button id="firstPage" class="secondaryToolbarButton b3-menu__item firstPage" tabindex="56">
+            <button id="previous" class="secondaryToolbarButton b3-menu__item pageUp">
               <svg class="b3-menu__icon"><use xlink:href="#iconUp"></use></svg> 
+              <span class="b3-menu__label">${window.siyuan.languages.previousLabel}</span>
+              <span class="b3-menu__accelerator">${updateHotkeyTip("P")}/${updateHotkeyTip("K")}</span>
+            </button>
+            <button id="next" class="secondaryToolbarButton b3-menu__item pageDown">
+              <svg class="b3-menu__icon"><use xlink:href="#iconDown"></use></svg> 
+              <span class="b3-menu__label">${window.siyuan.languages.nextLabel}</span>
+              <span class="b3-menu__accelerator">${updateHotkeyTip("J")}/${updateHotkeyTip("N")}</span>
+            </button>
+            <button id="firstPage" class="secondaryToolbarButton b3-menu__item firstPage">
+              <svg class="b3-menu__icon"><use xlink:href="#iconBack"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.firstPage}</span>
               <span class="b3-menu__accelerator">Home</span>
             </button>
-            <button id="lastPage" class="secondaryToolbarButton b3-menu__item lastPage" tabindex="57">
-              <svg class="b3-menu__icon"><use xlink:href="#iconDown"></use></svg> 
+            <button id="lastPage" class="secondaryToolbarButton b3-menu__item lastPage">
+              <svg class="b3-menu__icon"><use xlink:href="#iconForward"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.lastPage}</span>
               <span class="b3-menu__accelerator">End</span>
             </button>
             <div class="horizontalToolbarSeparator b3-menu__separator"></div>
-            <button id="pageRotateCw" class="secondaryToolbarButton b3-menu__item rotateCw" tabindex="58">
+            <button id="zoomOut" class="secondaryToolbarButton b3-menu__item zoomOut">
+               <svg class="b3-menu__icon"><use xlink:href="#iconLine"></use></svg> 
+               <span class="b3-menu__label">${window.siyuan.languages.zoomOut}</span>
+               <span class="b3-menu__accelerator">${updateHotkeyTip("⌘-")}</span>
+            </button>
+            <button id="zoomIn" class="secondaryToolbarButton b3-menu__item zoomIn">
+               <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg> 
+               <span class="b3-menu__label">${window.siyuan.languages.zoomIn}</span>
+               <span class="b3-menu__accelerator">${updateHotkeyTip("⌘=")}</span>
+            </button>
+            <button id="pageRotateCw" class="secondaryToolbarButton b3-menu__item rotateCw">
                <svg class="b3-menu__icon"><use xlink:href="#iconRedo"></use></svg> 
                <span class="b3-menu__label">${window.siyuan.languages.rotateCw}</span>
                <span class="b3-menu__accelerator">R</span>
             </button>
-            <button id="pageRotateCcw" class="secondaryToolbarButton b3-menu__item rotateCcw" tabindex="59">
+            <button id="pageRotateCcw" class="secondaryToolbarButton b3-menu__item rotateCcw">
                <svg class="b3-menu__icon"><use xlink:href="#iconUndo"></use></svg> 
                <span class="b3-menu__label">${window.siyuan.languages.rotateCcw}</span>
                <span class="b3-menu__accelerator">⇧R</span>
@@ -190,46 +210,51 @@ export class Asset extends Model {
 
             <div class="horizontalToolbarSeparator b3-menu__separator"></div>
 
-            <button id="cursorSelectTool" class="secondaryToolbarButton b3-menu__item selectTool toggled" tabindex="60">
+            <button id="cursorSelectTool" class="secondaryToolbarButton b3-menu__item selectTool toggled">
                <svg class="b3-menu__icon"><use xlink:href="#iconSelectText"></use></svg> 
                <span class="b3-menu__label">${window.siyuan.languages.cursorText}</span>
                <span class="b3-menu__accelerator">S</span>
             </button>
-            <button id="cursorHandTool" class="secondaryToolbarButton b3-menu__item handTool" tabindex="61">
+            <button id="cursorHandTool" class="secondaryToolbarButton b3-menu__item handTool">
               <svg class="b3-menu__icon"><use xlink:href="#iconHand"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.cursorHand}</span>
               <span class="b3-menu__accelerator">H</span>
             </button>
             <div class="horizontalToolbarSeparator b3-menu__separator"></div>
-            <button id="scrollVertical" class="secondaryToolbarButton b3-menu__item scrollModeButtons scrollVertical toggled" tabindex="62">
+            <button id="scrollVertical" class="secondaryToolbarButton b3-menu__item scrollModeButtons scrollVertical toggled">
              <svg class="b3-menu__icon"><use xlink:href="#iconScrollVert"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.scrollVertical}</span>
             </button>
-            <button id="scrollHorizontal" class="secondaryToolbarButton b3-menu__item scrollModeButtons scrollHorizontal" tabindex="63">
+            <button id="scrollHorizontal" class="secondaryToolbarButton b3-menu__item scrollModeButtons scrollHorizontal">
               <svg class="b3-menu__icon"><use xlink:href="#iconScrollHoriz"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.scrollHorizontal}</span>
             </button>
-            <button id="scrollWrapped" class="secondaryToolbarButton b3-menu__item scrollModeButtons scrollWrapped" tabindex="64">
+            <button id="scrollWrapped" class="secondaryToolbarButton b3-menu__item scrollModeButtons scrollWrapped">
              <svg class="b3-menu__icon"><use xlink:href="#iconScrollWrapped"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.scrollWrapped}</span>
             </button>
 
             <div class="horizontalToolbarSeparator b3-menu__separator scrollModeButtons"></div>
 
-            <button id="spreadNone" class="secondaryToolbarButton b3-menu__item spreadModeButtons spreadNone toggled" tabindex="65">
+            <button id="spreadNone" class="secondaryToolbarButton b3-menu__item spreadModeButtons spreadNone toggled">
               <svg class="b3-menu__icon"><use xlink:href="#iconFile"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.spreadNone}</span>
             </button>
-            <button id="spreadOdd" class="secondaryToolbarButton b3-menu__item spreadModeButtons spreadOdd" tabindex="66">
+            <button id="spreadOdd" class="secondaryToolbarButton b3-menu__item spreadModeButtons spreadOdd">
               <svg class="b3-menu__icon"><use xlink:href="#iconSpreadOdd"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.spreadOdd}</span>
             </button>
-            <button id="spreadEven" class="secondaryToolbarButton b3-menu__item spreadModeButtons spreadEven" tabindex="67">
+            <button id="spreadEven" class="secondaryToolbarButton b3-menu__item spreadModeButtons spreadEven">
               <svg class="b3-menu__icon"><use xlink:href="#iconSpreadEven"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.spreadEven}</span>
             </button>
+            <button id="presentationMode" class="secondaryToolbarButton b3-menu__item presentationMode">
+              <svg class="b3-menu__icon"><use xlink:href="#iconPlay"></use></svg>
+              <span class="b3-menu__label">${window.siyuan.languages.presentationMode}</span>
+              <span class="b3-menu__accelerator">${updateHotkeyTip("⌥⌘P")}</span>
+            </button>
             <div class="horizontalToolbarSeparator b3-menu__separator spreadModeButtons"></div>
-            <button id="documentProperties" class="secondaryToolbarButton b3-menu__item documentProperties" tabindex="68">
+            <button id="documentProperties" class="secondaryToolbarButton b3-menu__item documentProperties">
               <svg class="b3-menu__icon"><use xlink:href="#iconInfo"></use></svg> 
               <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
             </button>
@@ -239,32 +264,20 @@ export class Asset extends Model {
         <div class="pdf__toolbar">
           <div id="toolbarContainer">
             <div id="toolbarViewer">
-                <button id="sidebarToggle" class="toolbarButton b3-tooltips b3-tooltips__se" tabindex="11" aria-expanded="false" aria-controls="sidebarContainer" aria-label="${window.siyuan.languages.toggleSidebarNotification2Title} ${updateHotkeyTip("F4")}">
+                <button id="sidebarToggle" class="toolbarButton b3-tooltips b3-tooltips__se" aria-expanded="false" aria-controls="sidebarContainer" aria-label="${window.siyuan.languages.toggleSidebarNotification2Title} ${updateHotkeyTip("F4")}">
                     <svg><use xlink:href="#iconLayoutRight"></use></svg>
                 </button>
-                <button id="viewFind" class="toolbarButton b3-tooltips b3-tooltips__s" tabindex="12" aria-expanded="false" aria-controls="findbar" aria-label="${window.siyuan.languages.search} ${updateHotkeyTip("⌘F")}">
+                <button id="viewFind" class="toolbarButton b3-tooltips b3-tooltips__s" aria-expanded="false" aria-controls="findbar" aria-label="${window.siyuan.languages.search} ${updateHotkeyTip("⌘F")}">
                   <svg><use xlink:href="#iconSearch"></use></svg>
                 </button>
-                <button id="rectAnno" class="toolbarButton b3-tooltips b3-tooltips__s" tabindex="12" aria-expanded="false" aria-controls="findbar" aria-label="${window.siyuan.languages.rectAnnotation} ${updateHotkeyTip("⌘D")}/${updateHotkeyTip("⌥D")}">
+                <button id="rectAnno" class="toolbarButton b3-tooltips b3-tooltips__s" aria-expanded="false" aria-controls="findbar" aria-label="${window.siyuan.languages.rectAnnotation} ${updateHotkeyTip("⌘D")}/${updateHotkeyTip("⌥D")}">
                   <svg><use xlink:href="#iconLeftTop"></use></svg>
                 </button>
-                <button class="toolbarButton pageUp b3-tooltips b3-tooltips__s" aria-label="${window.siyuan.languages.previousLabel} ${updateHotkeyTip("P")}/${updateHotkeyTip("K")}" id="previous" tabindex="13">
-                  <svg><use xlink:href="#iconUp"></use></svg>
-                </button>
-                <button class="toolbarButton pageDown b3-tooltips b3-tooltips__s" id="next" tabindex="14" aria-label="${window.siyuan.languages.nextLabel} ${updateHotkeyTip("J")}/${updateHotkeyTip("N")}">
-                  <svg><use xlink:href="#iconDown"></use></svg>
-                </button>
-                <input type="number" id="pageNumber" class="toolbarField pageNumber b3-text-field" value="1" size="4" min="1" tabindex="15" autocomplete="off">
+                <input type="number" id="pageNumber" class="toolbarField pageNumber b3-text-field" value="1" size="4" min="1" autocomplete="off">
                 <span id="numPages"></span>
                 <div class="fn__flex-1"></div>
-                <button id="zoomOut" class="toolbarButton zoomOut b3-tooltips b3-tooltips__sw" tabindex="21" aria-label="${window.siyuan.languages.zoomOut} ${updateHotkeyTip("⌘-")}">
-                  <svg><use xlink:href="#iconLine"></use></svg>
-                </button>
-                <button id="zoomIn" class="toolbarButton zoomIn b3-tooltips b3-tooltips__sw" tabindex="22" aria-label="${window.siyuan.languages.zoomIn} ${updateHotkeyTip("⌘=")}">
-                  <svg><use xlink:href="#iconAdd"></use></svg>
-                </button>
                 <span id="scaleSelectContainer" class="dropdownToolbarButton">
-                  <select id="scaleSelect" tabindex="23" class="b3-select">
+                  <select id="scaleSelect" class="b3-select">
                     <option id="pageAutoOption" value="auto" selected="selected">${window.siyuan.languages.pageScaleAuto}</option>
                     <option id="pageActualOption" value="page-actual">${window.siyuan.languages.pageScaleActual}</option>
                     <option id="pageFitOption" value="page-fit">${window.siyuan.languages.pageScaleFit}</option>
@@ -280,15 +293,12 @@ export class Asset extends Model {
                     <option value="4">400%</option>
                   </select>
                 </span>
-                <button id="presentationMode" class="toolbarButton presentationMode b3-tooltips b3-tooltips__sw hiddenLargeView" tabindex="31" aria-label="${window.siyuan.languages.presentationMode} ${updateHotkeyTip("⌥⌘P")}">
-                  <svg><use xlink:href="#iconPlay"></use></svg>
-                </button>
                 <span id="scrollPage" class="fn__none"></span>
                 <span id="print" class="fn__none"></span>
                 <span id="secondaryPrint" class="fn__none"></span>
                 <span id="viewBookmark" class="fn__none"></span>
                 <span id="secondaryViewBookmark" class="fn__none"></span>
-                <button id="secondaryToolbarToggle" class="toolbarButton b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.more}" tabindex="36" aria-expanded="false" aria-controls="secondaryToolbar">
+                <button id="secondaryToolbarToggle" class="toolbarButton b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.more}" aria-expanded="false" aria-controls="secondaryToolbar">
                   <svg><use xlink:href="#iconMore"></use></svg>
                 </button>
             </div>
@@ -301,7 +311,7 @@ export class Asset extends Model {
           </div>
         </div>
 
-        <div id="viewerContainer" tabindex="0">
+        <div id="viewerContainer">
           <div id="viewer" class="pdfViewer"></div>
           <div class="pdf__resize fn__none"></div>
         </div>
diff --git a/app/src/asset/pdf/app.js b/app/src/asset/pdf/app.js
index 4bd975a4a..af5f7e857 100644
--- a/app/src/asset/pdf/app.js
+++ b/app/src/asset/pdf/app.js
@@ -3131,6 +3131,7 @@ function webViewerClick(evt) {
   if (!pdfInstance) {
     return
   }
+  pdfInstance.pdfViewer.focus();
   if (!pdfInstance.secondaryToolbar?.isOpen) {
     return;
   }
diff --git a/app/src/asset/pdf/pdf_viewer.js b/app/src/asset/pdf/pdf_viewer.js
index 8a8232f28..6c248accc 100644
--- a/app/src/asset/pdf/pdf_viewer.js
+++ b/app/src/asset/pdf/pdf_viewer.js
@@ -1492,6 +1492,8 @@ class PDFViewer {
 
   focus() {
     this.container.focus();
+    // NOTE 防止焦点没在 PDF 上时快捷键失效
+    this.container.parentElement.querySelector("#sidebarToggle").focus()
   }
 
   get _isContainerRtl() {