Título incorrecto en la ventana emergente de historial (firefox)

Hola,
en Firefox, el título de la página anterior que aparece al hacer clic derecho en la flecha «Página anterior» se sobrescribe con el título de la página actual.

Por ejemplo, si la primera página mostrada es:
https://meta.discourse.org/
observa cómo se ve el clic derecho en la flecha (es correcto):

Luego, al ir a cualquier tema, como:

el título de la página anterior se ha sobrescrito con el título de la página actual:

No obstante, el enlace sigue siendo válido.

¿Alguna idea sobre este error?

En efecto, parece ser un error, posiblemente en la forma o secuencia en que reemplazamos el historial, o una peculiaridad de Firefox.

Puedo reproducirlo.

Dado que es bastante menor, voy a añadir una etiqueta pr-welcome por si la comunidad desea participar y proponer una solución.

de acuerdo, gracias por tu respuesta

He descubierto que este error también se manifiesta como entradas en el historial de navegación que están algo corruptas, lo cual considero un problema más grave. Más específicamente, se asigna un nuevo título a una URL antigua cuando la navegación es manejada por JS. Esto ocurre casi siempre en Firefox, pero es bastante raro en Chrome (he encontrado una instancia hasta ahora: al pasar de /top a un tema).

@sam tiene razón en que se debe al orden de las operaciones en las que se modifican la URL y el título. Ojalá hubiera alguna guía de mejores prácticas publicada en algún lugar que dijera cuál es el orden correcto: siempre actualizar el título después de usar la API history.

He intentado depurar un poco (y quiero decir de antemano que soy bastante reacio a construir cualquier proyecto medianamente grande adyacente a npm). Inicialmente usé este código para hacer un pequeño reconocimiento:

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);
};

Efectivamente, demostró que casi siempre hay una modificación del título justo antes de la operación de la API history. Desafortunadamente, no fue más útil que eso: relacionar lo que sucede en tiempo de ejecución con el código fuente fue bastante difícil – las operaciones de interés están bastante dispersas, la pila de llamadas era engañosa porque la ejecución ya había cedido al bucle de eventos de Ember, y en general la experiencia de depuración en Firefox fue bastante infernal. Al cambiar a Chrome, tuve un poco más de éxito. En resumen, hasta donde sé, Ember decide por sí mismo cuándo actualizar la URL. Por otro lado, la modificación del título puede iniciarse desde dos lugares: [1] y [2]

Solo el último se ejecuta antes de la llamada a la API history. El ‘ancestro de código común’ de ellos se encuentra aquí:

// Ejecutar todos los hooks necesarios de entrada/configuración/salida
this.setupContexts(newState, transition); // <- cambio de título iniciado aquí, al activar el evento `model.title:change`

// Comprobar si se produjo una redirección en la entrada/configuración
if (transition.isAborted) {
  // TODO: ¿forma más limpia? ¿distinguir entre routeInfos de destino?
  this.state!.routeInfos = this.currentRouteInfos!;
  return Promise.reject(logAbort(transition));
}

this._updateURL(transition, newState); // <- cambio de URL iniciado aquí

Curiosamente, “router.js es la microbiblioteca de enrutamiento utilizada por Ember.js”.

Ahora me gustaría ceder el manejo del problema a alguien que, a diferencia de mí, esté remotamente familiarizado con la base de código de discourse.

Editar: olvidé mencionar: document.title es modificado por [1] una o más veces después de (ambos) ser modificado [2] y la URL ser modificada por la API history.

1 me gusta

(Como usuario nuevo, no puedo poner más de 2 enlaces por publicación :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 me gusta