From d96558836ebd974c058db54c8efec1ca04f9f3ba Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 21 Aug 2024 17:15:32 +0200 Subject: [PATCH 1/2] Utilize Fluent to format numbers and dates in `PDFDocumentProperties` The `PDFDocumentProperties` dialog may not display correctly formatted data, especially in the GENERIC viewer, since it's using native methods[1] that depend on the *browser* locale instead of the viewer locale as intended. At the time when this dialog was introduced that was probably all we could easily do, but with Fluent we're able to improve things since it's got built-in support for formatting numbers and dates. Not only does this simplify the JavaScript code, but it also gives the localizer more fine-grained control of the desired output. Please find additional information here: - https://projectfluent.org/fluent/guide/builtins.html - https://projectfluent.org/fluent/guide/functions.html --- [1] `toLocaleString`, `toLocaleDateString`, and `toLocaleTimeString`. --- l10n/en-US/viewer.ftl | 17 ++++++++--------- web/pdf_document_properties.js | 35 ++++++++++------------------------ 2 files changed, 18 insertions(+), 34 deletions(-) diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl index c28352e692e2b..cea54a28242ae 100644 --- a/l10n/en-US/viewer.ftl +++ b/l10n/en-US/viewer.ftl @@ -113,14 +113,14 @@ pdfjs-document-properties-file-name = File name: pdfjs-document-properties-file-size = File size: # Variables: -# $size_kb (Number) - the PDF file size in kilobytes -# $size_b (Number) - the PDF file size in bytes -pdfjs-document-properties-kb = { $size_kb } KB ({ $size_b } bytes) +# $kb (Number) - the PDF file size in kilobytes +# $b (Number) - the PDF file size in bytes +pdfjs-document-properties-size-kb = { NUMBER($kb, maximumSignificantDigits: 3) } KB ({ $b } bytes) # Variables: -# $size_mb (Number) - the PDF file size in megabytes -# $size_b (Number) - the PDF file size in bytes -pdfjs-document-properties-mb = { $size_mb } MB ({ $size_b } bytes) +# $mb (Number) - the PDF file size in megabytes +# $b (Number) - the PDF file size in bytes +pdfjs-document-properties-size-mb = { NUMBER($mb, maximumSignificantDigits: 3) } MB ({ $b } bytes) pdfjs-document-properties-title = Title: pdfjs-document-properties-author = Author: @@ -130,9 +130,8 @@ pdfjs-document-properties-creation-date = Creation Date: pdfjs-document-properties-modification-date = Modification Date: # Variables: -# $date (Date) - the creation/modification date of the PDF file -# $time (Time) - the creation/modification time of the PDF file -pdfjs-document-properties-date-string = { $date }, { $time } +# $dateObj (Date) - the creation/modification date and time of the PDF file +pdfjs-document-properties-date-time-string = { DATETIME($dateObj, dateStyle: "short", timeStyle: "medium") } pdfjs-document-properties-creator = Creator: pdfjs-document-properties-producer = PDF Producer: diff --git a/web/pdf_document_properties.js b/web/pdf_document_properties.js index 39255b24471a3..70c36cab857f8 100644 --- a/web/pdf_document_properties.js +++ b/web/pdf_document_properties.js @@ -239,17 +239,12 @@ class PDFDocumentProperties { return this.l10n.get(`pdfjs-document-properties-${id}`, args); } - async #parseFileSize(fileSize = 0) { - const kb = fileSize / 1024, + async #parseFileSize(b = 0) { + const kb = b / 1024, mb = kb / 1024; - if (!kb) { - return undefined; - } - return this.#getL10nStr(mb >= 1 ? "mb" : "kb", { - size_mb: mb >= 1 && (+mb.toPrecision(3)).toLocaleString(), - size_kb: mb < 1 && (+kb.toPrecision(3)).toLocaleString(), - size_b: fileSize.toLocaleString(), - }); + return kb + ? this.#getL10nStr(`size-${mb >= 1 ? "mb" : "kb"}`, { mb, kb, b }) + : undefined; } async #parsePageSize(pageSizeInches, pagesRotation) { @@ -329,25 +324,15 @@ class PDFDocumentProperties { return this.#getL10nStr( `page-size-dimension-${name ? "name-" : ""}string`, - { - width: width.toLocaleString(), - height: height.toLocaleString(), - unit, - name, - orientation, - } + { width, height, unit, name, orientation } ); } async #parseDate(inputDate) { - const dateObject = PDFDateString.toDateObject(inputDate); - if (!dateObject) { - return undefined; - } - return this.#getL10nStr("date-string", { - date: dateObject.toLocaleDateString(), - time: dateObject.toLocaleTimeString(), - }); + const dateObj = PDFDateString.toDateObject(inputDate); + return dateObj + ? this.#getL10nStr("date-time-string", { dateObj }) + : undefined; } #parseLinearization(isLinearized) { From 6ce9f97943fd04830588dceea510c76e3fcd606b Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 21 Aug 2024 21:43:42 +0200 Subject: [PATCH 2/2] Utilize Fluent to format dates in the `AnnotationLayer` The `AnnotationLayer` may not display correctly formatted data in PopupAnnotations, especially in the GENERIC viewer, since it's using native methods[1] that depend on the *browser* locale instead of the viewer locale as intended. With Fluent we're able to improve things since it's got built-in support for formatting dates. Not only does this simplify the JavaScript code slightly, but it also gives the localizer more fine-grained control of the desired output. Please find additional information here: - https://projectfluent.org/fluent/guide/builtins.html - https://projectfluent.org/fluent/guide/functions.html --- [1] `toLocaleDateString`, and `toLocaleTimeString`. --- l10n/en-US/viewer.ftl | 5 ++--- src/display/annotation_layer.js | 7 ++----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl index cea54a28242ae..bd7bb4ac0fa44 100644 --- a/l10n/en-US/viewer.ftl +++ b/l10n/en-US/viewer.ftl @@ -283,9 +283,8 @@ pdfjs-rendering-error = An error occurred while rendering the page. ## Annotations # Variables: -# $date (Date) - the modification date of the annotation -# $time (Time) - the modification time of the annotation -pdfjs-annotation-date-string = { $date }, { $time } +# $dateObj (Date) - the modification date and time of the annotation +pdfjs-annotation-date-time-string = { DATETIME($dateObj, dateStyle: "short", timeStyle: "medium") } # .alt: This is used as a tooltip. # Variables: diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index dff737b6ca6d7..9d8ad8dceeef2 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -2242,14 +2242,11 @@ class PopupElement { modificationDate.classList.add("popupDate"); modificationDate.setAttribute( "data-l10n-id", - "pdfjs-annotation-date-string" + "pdfjs-annotation-date-time-string" ); modificationDate.setAttribute( "data-l10n-args", - JSON.stringify({ - date: this.#dateObj.toLocaleDateString(), - time: this.#dateObj.toLocaleTimeString(), - }) + JSON.stringify({ dateObj: this.#dateObj.valueOf() }) ); header.append(modificationDate); }