[Editor] Add the telemetry for the new alt text (bug 1912500)

This commit is contained in:
Calixte Denizet 2024-08-09 19:16:07 +02:00
parent 4367fc1bc0
commit 00305184b5
5 changed files with 144 additions and 27 deletions

View file

@ -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`)

View file

@ -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")) {

View file

@ -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 () {

View file

@ -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 }) {

View file

@ -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.