Skip to content

Commit 86b3dbf

Browse files
calixtemancalixteman
committed
Change the sidebar for a views manager
Update the styles and HTML to reflect the new views manager concept. For now, nothing about split/merge functionality is implemented or visible. The new styles for the outline, attachments, and layers will be added later. The thumbnail view is now accessible with the keyboard.
1 parent d946f05 commit 86b3dbf

22 files changed

+1291
-467
lines changed

‎gulpfile.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,13 @@ function createWebpackAlias(defines) {
211211
"web-pdf_layer_viewer": "web/pdf_layer_viewer.js",
212212
"web-pdf_outline_viewer": "web/pdf_outline_viewer.js",
213213
"web-pdf_presentation_mode": "web/pdf_presentation_mode.js",
214-
"web-pdf_sidebar": "web/pdf_sidebar.js",
215214
"web-pdf_thumbnail_viewer": "web/pdf_thumbnail_viewer.js",
216215
"web-preferences": "",
217216
"web-print_service": "",
218217
"web-secondary_toolbar": "web/secondary_toolbar.js",
219218
"web-signature_manager": "web/signature_manager.js",
220219
"web-toolbar": "web/toolbar.js",
220+
"web-views_manager": "web/views_manager.js",
221221
};
222222

223223
if (defines.CHROME) {

‎l10n/en-US/viewer.ftl‎

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -180,26 +180,6 @@ pdfjs-printing-not-ready = Warning: The PDF is not fully loaded for printing.
180180
181181
## Tooltips and alt text for side panel toolbar buttons
182182

183-
pdfjs-toggle-sidebar-button =
184-
.title = Toggle Sidebar
185-
pdfjs-toggle-sidebar-notification-button =
186-
.title = Toggle Sidebar (document contains outline/attachments/layers)
187-
pdfjs-toggle-sidebar-button-label = Toggle Sidebar
188-
pdfjs-document-outline-button =
189-
.title = Show Document Outline (double-click to expand/collapse all items)
190-
pdfjs-document-outline-button-label = Document Outline
191-
pdfjs-attachments-button =
192-
.title = Show Attachments
193-
pdfjs-attachments-button-label = Attachments
194-
pdfjs-layers-button =
195-
.title = Show Layers (double-click to reset all layers to the default state)
196-
pdfjs-layers-button-label = Layers
197-
pdfjs-thumbs-button =
198-
.title = Show Thumbnails
199-
pdfjs-thumbs-button-label = Thumbnails
200-
pdfjs-current-outline-item-button =
201-
.title = Find Current Outline Item
202-
pdfjs-current-outline-item-button-label = Current Outline Item
203183
pdfjs-findbar-button =
204184
.title = Find in Document
205185
pdfjs-findbar-button-label = Find
@@ -702,3 +682,91 @@ pdfjs-editor-edit-comment-dialog-cancel-button = Cancel
702682

703683
pdfjs-editor-add-comment-button =
704684
.title = Add comment
685+
686+
## The view manager is a sidebar displaying different views:
687+
## - thumbnails;
688+
## - outline;
689+
## - attachments;
690+
## - layers.
691+
## The thumbnails view is used to edit the pdf: remove/insert pages, ...
692+
693+
pdfjs-toggle-views-manager-button =
694+
.title = Toggle Sidebar
695+
pdfjs-toggle-views-manager-notification-button =
696+
.title = Toggle Sidebar (document contains outline/attachments/layers)
697+
pdfjs-toggle-views-manager-button-label = Toggle Sidebar
698+
699+
pdfjs-views-manager-sidebar =
700+
.aria-label = Sidebar
701+
pdfjs-views-manager-view-selector-button =
702+
.title = Views
703+
pdfjs-views-manager-view-selector-button-label = Views
704+
pdfjs-views-manager-pages-title = Pages
705+
pdfjs-views-manager-outlines-title = Document Outline
706+
pdfjs-views-manager-attachments-title = Attachments
707+
pdfjs-views-manager-layers-title = Layers
708+
709+
pdfjs-views-manager-pages-option-label = Pages
710+
pdfjs-views-manager-outlines-option-label = Document outline
711+
pdfjs-views-manager-attachments-option-label = Attachments
712+
pdfjs-views-manager-layers-option-label = Layers
713+
714+
pdfjs-views-manager-add-file-button =
715+
.title = Add file
716+
pdfjs-views-manager-add-file-button-label = Add file
717+
718+
# Variables:
719+
# $count (Number) - the number of selected pages.
720+
pdfjs-views-manager-pages-status-action-label =
721+
{ $count ->
722+
[one] { $count } selected
723+
*[other] { $count } selected
724+
}
725+
pdfjs-views-manager-pages-status-none-action-label = Select pages
726+
pdfjs-views-manager-pages-status-action-button-label = Manage
727+
pdfjs-views-manager-pages-status-copy-button-label = Copy
728+
pdfjs-views-manager-pages-status-cut-button-label = Cut
729+
pdfjs-views-manager-pages-status-delete-button-label = Delete
730+
pdfjs-views-manager-pages-status-save-as-button-label = Save as…
731+
732+
# Variables:
733+
# $count (Number) - the number of selected pages to be cut.
734+
pdfjs-views-manager-status-undo-cut-label =
735+
{ $count ->
736+
[one] 1 page cut
737+
*[other] { $count } pages cut
738+
}
739+
740+
# Variables:
741+
# $count (Number) - the number of selected pages to be copied.
742+
pdfjs-views-manager-pages-status-undo-copy-label =
743+
{ $count ->
744+
[one] 1 page copied
745+
*[other] { $count } pages copied
746+
}
747+
748+
# Variables:
749+
# $count (Number) - the number of selected pages to be deleted.
750+
pdfjs-views-manager-pages-status-undo-delete-label =
751+
{ $count ->
752+
[one] 1 page deleted
753+
*[other] { $count } pages deleted
754+
}
755+
756+
pdfjs-views-manager-pages-status-waiting-ready-label = Getting your file ready…
757+
pdfjs-views-manager-pages-status-waiting-uploading-label = Uploading file…
758+
759+
## For now keep the previous translations in waiting for some new strings or
760+
## clear explanations on what "outline" is.
761+
762+
pdfjs-views-manager-current-outline-item-button =
763+
.title = Find Current Outline Item
764+
pdfjs-views-manager-current-outline-item-button-label = Current Outline Item
765+
pdfjs-views-manager-status-warning-cut-label = Couldn’t cut. Refresh page and try again.
766+
pdfjs-views-manager-status-warning-copy-label = Couldn’t copy. Refresh page and try again.
767+
pdfjs-views-manager-status-warning-delete-label = Couldn’t delete. Refresh page and try again.
768+
pdfjs-views-manager-status-warning-save-label = Couldn’t save. Refresh page and try again.
769+
pdfjs-views-manager-status-undo-button-label = Undo
770+
pdfjs-views-manager-status-close-button =
771+
.title = Close
772+
pdfjs-views-manager-status-close-button-label = Close

‎test/integration/thumbnail_view_spec.mjs‎

Lines changed: 103 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
1-
import { awaitPromise, closePages, loadAndWait } from "./test_utils.mjs";
1+
import {
2+
awaitPromise,
3+
closePages,
4+
kbFocusNext,
5+
loadAndWait,
6+
} from "./test_utils.mjs";
7+
8+
function waitForThumbnailVisible(page, pageNum) {
9+
return page.waitForSelector(
10+
`.thumbnailImage[data-l10n-args='{"page":${pageNum}}']`,
11+
{ visible: true }
12+
);
13+
}
214

315
describe("PDF Thumbnail View", () => {
416
describe("Works without errors", () => {
517
let pages;
618

719
beforeEach(async () => {
8-
pages = await loadAndWait("tracemonkey.pdf", "#sidebarToggleButton");
20+
pages = await loadAndWait("tracemonkey.pdf", "#viewsManagerToggleButton");
921
});
1022

1123
afterEach(async () => {
@@ -15,14 +27,12 @@ describe("PDF Thumbnail View", () => {
1527
it("should render thumbnails without errors", async () => {
1628
await Promise.all(
1729
pages.map(async ([browserName, page]) => {
18-
await page.click("#sidebarToggleButton");
30+
await page.click("#viewsManagerToggleButton");
1931

20-
const thumbSelector = "#thumbnailView .thumbnailImage";
32+
const thumbSelector = "#thumbnailsView .thumbnailImage";
2133
await page.waitForSelector(thumbSelector, { visible: true });
2234

23-
await page.waitForSelector(
24-
"#thumbnailView .thumbnail:not(.missingThumbnailImage)"
25-
);
35+
await waitForThumbnailVisible(page, 1);
2636

2737
const src = await page.$eval(thumbSelector, el => el.src);
2838
expect(src)
@@ -37,7 +47,7 @@ describe("PDF Thumbnail View", () => {
3747
let pages;
3848

3949
beforeEach(async () => {
40-
pages = await loadAndWait("tracemonkey.pdf", "#sidebarToggleButton");
50+
pages = await loadAndWait("tracemonkey.pdf", "#viewsManagerToggleButton");
4151
});
4252

4353
afterEach(async () => {
@@ -48,7 +58,7 @@ describe("PDF Thumbnail View", () => {
4858
const handle = await page.evaluateHandle(
4959
num => [
5060
new Promise(resolve => {
51-
const container = document.getElementById("thumbnailView");
61+
const container = document.getElementById("viewsManagerContent");
5262
container.addEventListener("scrollend", resolve, { once: true });
5363
// eslint-disable-next-line no-undef
5464
PDFViewerApplication.pdfLinkService.goToPage(num);
@@ -62,13 +72,15 @@ describe("PDF Thumbnail View", () => {
6272
it("should scroll the view", async () => {
6373
await Promise.all(
6474
pages.map(async ([browserName, page]) => {
65-
await page.click("#sidebarToggleButton");
75+
await page.click("#viewsManagerToggleButton");
76+
77+
await waitForThumbnailVisible(page, 1);
6678

6779
for (const pageNum of [14, 1, 13, 2]) {
6880
await goToPage(page, pageNum);
6981
const thumbSelector = `.thumbnailImage[data-l10n-args='{"page":${pageNum}}']`;
7082
await page.waitForSelector(
71-
`.thumbnail:has(${thumbSelector}).selected`,
83+
`.thumbnail ${thumbSelector}[aria-current="page"]`,
7284
{ visible: true }
7385
);
7486
const src = await page.$eval(thumbSelector, el => el.src);
@@ -80,4 +92,84 @@ describe("PDF Thumbnail View", () => {
8092
);
8193
});
8294
});
95+
96+
describe("The view is accessible with the keyboard", () => {
97+
let pages;
98+
99+
beforeEach(async () => {
100+
pages = await loadAndWait("tracemonkey.pdf", "#viewsManagerToggleButton");
101+
});
102+
103+
afterEach(async () => {
104+
await closePages(pages);
105+
});
106+
107+
function isElementFocused(page, selector) {
108+
return page.$eval(selector, el => el === document.activeElement);
109+
}
110+
111+
it("should navigate with the keyboard", async () => {
112+
await Promise.all(
113+
pages.map(async ([browserName, page]) => {
114+
await page.click("#viewsManagerToggleButton");
115+
116+
await waitForThumbnailVisible(page, 1);
117+
await waitForThumbnailVisible(page, 2);
118+
await waitForThumbnailVisible(page, 3);
119+
120+
await kbFocusNext(page);
121+
expect(await isElementFocused(page, "#viewsManagerSelectorButton"))
122+
.withContext(`In ${browserName}`)
123+
.toBe(true);
124+
125+
await kbFocusNext(page);
126+
expect(
127+
await isElementFocused(
128+
page,
129+
`#thumbnailsView .thumbnailImage[data-l10n-args='{"page":1}']`
130+
)
131+
)
132+
.withContext(`In ${browserName}`)
133+
.toBe(true);
134+
135+
await page.keyboard.press("ArrowDown");
136+
expect(
137+
await isElementFocused(
138+
page,
139+
`#thumbnailsView .thumbnailImage[data-l10n-args='{"page":2}']`
140+
)
141+
)
142+
.withContext(`In ${browserName}`)
143+
.toBe(true);
144+
145+
await page.keyboard.press("ArrowUp");
146+
expect(
147+
await isElementFocused(
148+
page,
149+
`#thumbnailsView .thumbnailImage[data-l10n-args='{"page":1}']`
150+
)
151+
)
152+
.withContext(`In ${browserName}`)
153+
.toBe(true);
154+
155+
await page.keyboard.press("ArrowDown");
156+
await page.keyboard.press("ArrowDown");
157+
expect(
158+
await isElementFocused(
159+
page,
160+
`#thumbnailsView .thumbnailImage[data-l10n-args='{"page":3}']`
161+
)
162+
)
163+
.withContext(`In ${browserName}`)
164+
.toBe(true);
165+
await page.keyboard.press("Enter");
166+
const currentPage = await page.$eval(
167+
"#pageNumber",
168+
el => el.valueAsNumber
169+
);
170+
expect(currentPage).withContext(`In ${browserName}`).toBe(3);
171+
})
172+
);
173+
});
174+
});
83175
});

‎test/unit/unit_test.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@
4040
"web-pdf_layer_viewer": "../../web/pdf_layer_viewer.js",
4141
"web-pdf_outline_viewer": "../../web/pdf_outline_viewer.js",
4242
"web-pdf_presentation_mode": "../../web/pdf_presentation_mode.js",
43-
"web-pdf_sidebar": "../../web/pdf_sidebar.js",
4443
"web-pdf_thumbnail_viewer": "../../web/pdf_thumbnail_viewer.js",
4544
"web-preferences": "../../web/genericcom.js",
4645
"web-print_service": "../../web/pdf_print_service.js",
4746
"web-secondary_toolbar": "../../web/secondary_toolbar.js",
4847
"web-toolbar": "../../web/toolbar.js"
48+
"web-views_manager": "../../web/views_manager.js"
4949
}
5050
}
5151
</script>

0 commit comments

Comments
 (0)