mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-07 17:05:38 +02:00
[Editor] Add the telemetry for the new alt text (bug 1912500)
This commit is contained in:
parent
4367fc1bc0
commit
00305184b5
5 changed files with 144 additions and 27 deletions
|
@ -75,6 +75,12 @@ class AltText {
|
||||||
const onClick = event => {
|
const onClick = event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.#editor._uiManager.editAltText(this.#editor);
|
this.#editor._uiManager.editAltText(this.#editor);
|
||||||
|
if (this.#useNewAltTextFlow) {
|
||||||
|
this.#editor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.alt_text.image_status_label_clicked",
|
||||||
|
label: this.#label,
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
altText.addEventListener("click", onClick, { capture: true, signal });
|
altText.addEventListener("click", onClick, { capture: true, signal });
|
||||||
altText.addEventListener(
|
altText.addEventListener(
|
||||||
|
@ -92,6 +98,14 @@ class AltText {
|
||||||
return altText;
|
return altText;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get #label() {
|
||||||
|
return (
|
||||||
|
(this.#altText && "added") ||
|
||||||
|
(this.#altText === null && this.guessedText && "review") ||
|
||||||
|
"missing"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
finish() {
|
finish() {
|
||||||
if (!this.#altTextButton) {
|
if (!this.#altTextButton) {
|
||||||
return;
|
return;
|
||||||
|
@ -218,10 +232,13 @@ class AltText {
|
||||||
// If we've a guessed text and the alt text has never been set, we get a
|
// If we've a guessed text and the alt text has never been set, we get a
|
||||||
// "to-review" been set.
|
// "to-review" been set.
|
||||||
// Otherwise, we get a "missing".
|
// Otherwise, we get a "missing".
|
||||||
const type =
|
const label = this.#label;
|
||||||
(this.#altText && "added") ||
|
// TODO: Update the l10n keys to avoid this.
|
||||||
(this.#altText === null && this.guessedText && "to-review") ||
|
const type = label === "review" ? "to-review" : label;
|
||||||
"missing";
|
this.#editor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.alt_text.image_status_label_displayed",
|
||||||
|
label,
|
||||||
|
});
|
||||||
button.classList.toggle("done", !!this.#altText);
|
button.classList.toggle("done", !!this.#altText);
|
||||||
AltText._l10nPromise
|
AltText._l10nPromise
|
||||||
.get(`pdfjs-editor-new-alt-text-${type}-button-label`)
|
.get(`pdfjs-editor-new-alt-text-${type}-button-label`)
|
||||||
|
|
|
@ -104,6 +104,22 @@ class StampEditor extends AnnotationEditor {
|
||||||
super.altTextFinish();
|
super.altTextFinish();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @inheritdoc */
|
||||||
|
get telemetryFinalData() {
|
||||||
|
return {
|
||||||
|
type: "stamp",
|
||||||
|
hasAltText: this.hasAltTextData(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static computeTelemetryFinalData(data) {
|
||||||
|
const hasAltTextStats = data.get("hasAltText");
|
||||||
|
return {
|
||||||
|
hasAltText: hasAltTextStats.get(true) ?? 0,
|
||||||
|
hasNoAltText: hasAltTextStats.get(false) ?? 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
#getBitmapFetched(data, fromId = false) {
|
#getBitmapFetched(data, fromId = false) {
|
||||||
if (!data) {
|
if (!data) {
|
||||||
this.remove();
|
this.remove();
|
||||||
|
@ -141,6 +157,10 @@ class StampEditor extends AnnotationEditor {
|
||||||
this._uiManager.useNewAltTextFlow &&
|
this._uiManager.useNewAltTextFlow &&
|
||||||
this.#bitmap
|
this.#bitmap
|
||||||
) {
|
) {
|
||||||
|
this._reportTelemetry({
|
||||||
|
action: "pdfjs.image.image_added",
|
||||||
|
data: { alt_text_modal: false },
|
||||||
|
});
|
||||||
try {
|
try {
|
||||||
// The alt-text dialog isn't opened but we still want to guess the alt
|
// The alt-text dialog isn't opened but we still want to guess the alt
|
||||||
// text.
|
// text.
|
||||||
|
@ -247,6 +267,10 @@ class StampEditor extends AnnotationEditor {
|
||||||
const data = await this._uiManager.imageManager.getFromFile(
|
const data = await this._uiManager.imageManager.getFromFile(
|
||||||
input.files[0]
|
input.files[0]
|
||||||
);
|
);
|
||||||
|
this._reportTelemetry({
|
||||||
|
action: "pdfjs.image.image_selected",
|
||||||
|
data: { alt_text_modal: this._uiManager.useNewAltTextFlow },
|
||||||
|
});
|
||||||
this.#getBitmapFetched(data);
|
this.#getBitmapFetched(data);
|
||||||
}
|
}
|
||||||
if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("TESTING")) {
|
if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("TESTING")) {
|
||||||
|
|
|
@ -75,6 +75,13 @@ class AnnotationEditorParams {
|
||||||
dispatchEvent("INK_OPACITY", this.valueAsNumber);
|
dispatchEvent("INK_OPACITY", this.valueAsNumber);
|
||||||
});
|
});
|
||||||
editorStampAddImage.addEventListener("click", () => {
|
editorStampAddImage.addEventListener("click", () => {
|
||||||
|
this.eventBus.dispatch("reporttelemetry", {
|
||||||
|
source: this,
|
||||||
|
details: {
|
||||||
|
type: "editing",
|
||||||
|
data: { action: "pdfjs.image.add_image_click" },
|
||||||
|
},
|
||||||
|
});
|
||||||
dispatchEvent("CREATE");
|
dispatchEvent("CREATE");
|
||||||
});
|
});
|
||||||
editorFreeHighlightThickness.addEventListener("input", function () {
|
editorFreeHighlightThickness.addEventListener("input", function () {
|
||||||
|
|
|
@ -64,8 +64,6 @@ class NewAltTextManager {
|
||||||
|
|
||||||
#previousAltText = null;
|
#previousAltText = null;
|
||||||
|
|
||||||
#telemetryData = null;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
{
|
{
|
||||||
descriptionContainer,
|
descriptionContainer,
|
||||||
|
@ -142,6 +140,13 @@ class NewAltTextManager {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.#overlayManager.register(dialog);
|
this.#overlayManager.register(dialog);
|
||||||
|
|
||||||
|
this.#learnMore.addEventListener("click", () => {
|
||||||
|
this.#currentEditor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.alt_text.info",
|
||||||
|
data: { topic: "alt_text" },
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
#toggleLoading(value) {
|
#toggleLoading(value) {
|
||||||
|
@ -401,6 +406,18 @@ class NewAltTextManager {
|
||||||
this.#currentEditor.altTextData = {
|
this.#currentEditor.altTextData = {
|
||||||
cancel: true,
|
cancel: true,
|
||||||
};
|
};
|
||||||
|
const altText = this.#textarea.value.trim();
|
||||||
|
this.#currentEditor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.alt_text.dismiss",
|
||||||
|
data: {
|
||||||
|
alt_text_type: altText ? "present" : "empty",
|
||||||
|
flow: this.#firstTime ? "image_add" : "alt_text_edit",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.#currentEditor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.image_added",
|
||||||
|
data: { alt_text_modal: false },
|
||||||
|
});
|
||||||
this.#finish();
|
this.#finish();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -416,13 +433,6 @@ class NewAltTextManager {
|
||||||
canvas.width = canvas.height = 0;
|
canvas.width = canvas.height = 0;
|
||||||
this.#imageData = null;
|
this.#imageData = null;
|
||||||
|
|
||||||
this.#currentEditor._reportTelemetry(
|
|
||||||
this.#telemetryData || {
|
|
||||||
action: "alt_text_cancel",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
this.#telemetryData = null;
|
|
||||||
this.#toggleLoading(false);
|
this.#toggleLoading(false);
|
||||||
|
|
||||||
this.#uiManager?.addEditListeners();
|
this.#uiManager?.addEditListeners();
|
||||||
|
@ -438,15 +448,33 @@ class NewAltTextManager {
|
||||||
altText,
|
altText,
|
||||||
decorative: false,
|
decorative: false,
|
||||||
};
|
};
|
||||||
this.#telemetryData = {
|
this.#currentEditor.altTextData.guessedAltText = this.#guessedAltText;
|
||||||
action: "alt_text_save",
|
|
||||||
alt_text_description: !!altText,
|
if (this.#guessedAltText && this.#guessedAltText !== altText) {
|
||||||
alt_text_edit:
|
const guessedWords = new Set(this.#guessedAltText.split(/\s+/));
|
||||||
!!this.#previousAltText && this.#previousAltText !== altText,
|
const words = new Set(altText.split(/\s+/));
|
||||||
alt_text_decorative: false,
|
this.#currentEditor._reportTelemetry({
|
||||||
alt_text_altered:
|
action: "pdfjs.image.alt_text.user_edit",
|
||||||
this.#guessedAltText && this.#guessedAltText !== altText,
|
data: {
|
||||||
};
|
total_words: guessedWords.size,
|
||||||
|
words_removed: guessedWords.difference(words).size,
|
||||||
|
words_added: words.difference(guessedWords).size,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.#currentEditor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.image_added",
|
||||||
|
data: { alt_text_modal: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#currentEditor._reportTelemetry({
|
||||||
|
action: "pdfjs.image.alt_text.save",
|
||||||
|
data: {
|
||||||
|
alt_text_type: altText ? "present" : "empty",
|
||||||
|
flow: this.#firstTime ? "image_add" : "alt_text_edit",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
this.#finish();
|
this.#finish();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -507,12 +535,21 @@ class ImageAltTextSettings {
|
||||||
createModelButton.addEventListener("click", async e => {
|
createModelButton.addEventListener("click", async e => {
|
||||||
const checked = this.#togglePref("enableGuessAltText", e);
|
const checked = this.#togglePref("enableGuessAltText", e);
|
||||||
await mlManager.toggleService("altText", checked);
|
await mlManager.toggleService("altText", checked);
|
||||||
|
this.#reportTelemetry({
|
||||||
|
type: "stamp",
|
||||||
|
action: "pdfjs.image.alt_text.settings_ai_generation_check",
|
||||||
|
data: { status: checked },
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
showAltTextDialogButton.addEventListener(
|
showAltTextDialogButton.addEventListener("click", e => {
|
||||||
"click",
|
const checked = this.#togglePref("enableNewAltTextWhenAddingImage", e);
|
||||||
this.#togglePref.bind(this, "enableNewAltTextWhenAddingImage")
|
this.#reportTelemetry({
|
||||||
);
|
type: "stamp",
|
||||||
|
action: "pdfjs.image.alt_text.settings_edit_alt_text_check",
|
||||||
|
data: { status: checked },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
deleteModelButton.addEventListener("click", this.#delete.bind(this, true));
|
deleteModelButton.addEventListener("click", this.#delete.bind(this, true));
|
||||||
downloadModelButton.addEventListener(
|
downloadModelButton.addEventListener(
|
||||||
|
@ -522,6 +559,14 @@ class ImageAltTextSettings {
|
||||||
|
|
||||||
closeButton.addEventListener("click", this.#finish.bind(this));
|
closeButton.addEventListener("click", this.#finish.bind(this));
|
||||||
|
|
||||||
|
learnMore.addEventListener("click", () => {
|
||||||
|
this.#reportTelemetry({
|
||||||
|
type: "stamp",
|
||||||
|
action: "pdfjs.image.alt_text.info",
|
||||||
|
data: { topic: "ai_generation" },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
eventBus._on("enablealttextmodeldownload", ({ value }) => {
|
eventBus._on("enablealttextmodeldownload", ({ value }) => {
|
||||||
if (value) {
|
if (value) {
|
||||||
this.#download(false);
|
this.#download(false);
|
||||||
|
@ -533,6 +578,16 @@ class ImageAltTextSettings {
|
||||||
this.#overlayManager.register(dialog);
|
this.#overlayManager.register(dialog);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#reportTelemetry(data) {
|
||||||
|
this.#eventBus.dispatch("reporttelemetry", {
|
||||||
|
source: this,
|
||||||
|
details: {
|
||||||
|
type: "editing",
|
||||||
|
data,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async #download(isFromUI = false) {
|
async #download(isFromUI = false) {
|
||||||
if (isFromUI) {
|
if (isFromUI) {
|
||||||
this.#downloadModelButton.disabled = true;
|
this.#downloadModelButton.disabled = true;
|
||||||
|
@ -589,6 +644,10 @@ class ImageAltTextSettings {
|
||||||
);
|
);
|
||||||
|
|
||||||
await this.#overlayManager.open(this.#dialog);
|
await this.#overlayManager.open(this.#dialog);
|
||||||
|
this.#reportTelemetry({
|
||||||
|
type: "stamp",
|
||||||
|
action: "pdfjs.image.alt_text.settings_displayed",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
#togglePref(name, { target }) {
|
#togglePref(name, { target }) {
|
||||||
|
|
|
@ -112,6 +112,10 @@ class Toolbar {
|
||||||
: AnnotationEditorType.STAMP;
|
: AnnotationEditorType.STAMP;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
telemetry: {
|
||||||
|
type: "editing",
|
||||||
|
data: { action: "pdfjs.image.icon_click" },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -173,7 +177,7 @@ class Toolbar {
|
||||||
const self = this;
|
const self = this;
|
||||||
|
|
||||||
// The buttons within the toolbar.
|
// The buttons within the toolbar.
|
||||||
for (const { element, eventName, eventDetails } of buttons) {
|
for (const { element, eventName, eventDetails, telemetry } of buttons) {
|
||||||
element.addEventListener("click", evt => {
|
element.addEventListener("click", evt => {
|
||||||
if (eventName !== null) {
|
if (eventName !== null) {
|
||||||
eventBus.dispatch(eventName, {
|
eventBus.dispatch(eventName, {
|
||||||
|
@ -183,6 +187,12 @@ class Toolbar {
|
||||||
isFromKeyboard: evt.detail === 0,
|
isFromKeyboard: evt.detail === 0,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (telemetry) {
|
||||||
|
eventBus.dispatch("reporttelemetry", {
|
||||||
|
source: this,
|
||||||
|
details: telemetry,
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// The non-button elements within the toolbar.
|
// The non-button elements within the toolbar.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue