Titolo errato nel popup della cronologia (firefox)

Ciao,
in Firefox, il titolo della pagina precedente che appare con un clic destro sulla freccia “pagina precedente” viene sovrascritto dal titolo della pagina corrente.

Ad esempio, se la prima pagina visualizzata è:
https://meta.discourse.org/
osserva come appare il clic destro sulla freccia (è corretto):

Poi, navigando su qualsiasi argomento, ad esempio:

il titolo della pagina precedente viene sovrascritto dal titolo della pagina corrente:

Tuttavia, il link rimane comunque valido.

Hai un’idea su questo bug?

Sembra davvero un bug, forse legato al modo o all’ordine in cui sostituiamo la cronologia, oppure a un comportamento peculiare di Firefox.

Riesco a riprodurlo.

Dato che si tratta di un problema piuttosto lieve, aggiungerò il tag pr-welcome nel caso la comunità volesse dare una mano e proporre una soluzione.

perfetto, grazie per la risposta

Ho scoperto che questo bug si manifesta anche come voci nella cronologia di navigazione leggermente corrotte, il che considero un problema più grave. Più specificamente, viene assegnato un nuovo titolo a un vecchio URL quando la navigazione è gestita da JS. Questo accade quasi sempre in Firefox, ma è piuttosto raro in Chrome (ho trovato un’istanza finora: passando da /top a un argomento).

@sam ha ragione sul fatto che è causato dall’ordine delle operazioni in cui l’URL e il titolo vengono modificati. Vorrei che ci fosse una sorta di guida alle best practice pubblicata da qualche parte che dica qual è l’ordine corretto: aggiorna sempre il titolo dopo aver utilizzato l’API history.

Ho provato a fare un po’ di debug (e voglio dire in anticipo che sono piuttosto restio a costruire qualsiasi progetto moderatamente grande adiacente a npm). Inizialmente ho usato questo codice per fare una piccola ricognizione:

Object.defineProperty(document, "title", {
  get() {
    return document.head.querySelector('title').innerText;
  },
  set(t) {
    console.debug('title', t, new Error("title!").stack)
    debugger;
    document.head.querySelector('title').innerText = t;
  },
  enumerable: true,
  configurable: true,
});
let ___push___ = window.history.pushState;
window.history.pushState = function(...args) {
  console.debug('push', args[0], new Error().stack);
  debugger;
  ___push___.apply(this, args);
};

let ___replace___ = window.history.replaceState;
window.history.replaceState = function(...args) {
  console.debug('replace', args[0], new Error().stack);
  debugger;
  ___replace___.apply(this, args);
};

Ha effettivamente dimostrato che c’è quasi sempre una modifica del titolo subito prima dell’operazione dell’API history. Sfortunatamente non è stato più utile di così: mettere in relazione ciò che accade in fase di esecuzione con il codice sorgente è stato piuttosto difficile – le operazioni di interesse sono piuttosto sparse, lo stack di chiamate era fuorviante perché l’esecuzione aveva già ceduto al loop degli eventi di Ember, e in generale l’esperienza di debug in Firefox è stata piuttosto infernale. Passando a Chrome, ho avuto un po’ più di successo. In breve, per quanto ne so, Ember decide da solo quando aggiornare l’URL. D’altra parte, la modifica del titolo può essere avviata da due punti: [1] e [2]

Solo quest’ultimo viene mai eseguito prima della chiamata all’API history. L’“antenato comune del codice” di questi si trova qui:

// Esegui tutti gli hook necessari di enter/setup/exit
this.setupContexts(newState, transition); // <- modifica del titolo avviata qui, attivando l'evento `model.title:change`

// Controlla se è avvenuto un reindirizzamento in enter/setup
if (transition.isAborted) {
  // TODO: modo più pulito? distinguere tra targetRouteInfos?
  this.state!.routeInfos = this.currentRouteInfos!;
  return Promise.reject(logAbort(transition));
}

this._updateURL(transition, newState); // <- modifica dell'URL avviata qui

Interessante, “router.js è la libreria di routing microlib utilizzata da Ember.js.”

Ora vorrei passare la gestione del problema a qualcuno che, contrariamente a me, abbia una minima familiarità con il codebase di discourse.

Modifica: ho dimenticato di menzionare: document.title viene modificato da [1] una o più volte dopo (entrambe) le modifiche [2] e la modifica dell’URL tramite l’API history.

1 Mi Piace

(come nuovo utente non posso inserire più di 2 link per post :frowning: )

[1] (discourse/app/assets/javascripts/discourse/app/lib/page-tracker.js at 245e9f30a4825beb86fcbfcf718208752748e5b4 · discourse/discourse · GitHub)

[2] (discourse/app/assets/javascripts/discourse/app/controllers/topic.js at 542f77181a47df8aa0f909f69814406491d08c5e · discourse/discourse · GitHub)

1 Mi Piace