Título incorreto no popup de histórico (firefox)

Olá,
No Firefox, o título da página anterior que aparece ao clicar com o botão direito na seta “página anterior” é substituído pelo título da página atual.

Por exemplo, se a primeira página exibida for:
https://meta.discourse.org/
veja como o clique com o botão direito na seta se apresenta (está correto):

Depois, ao acessar qualquer tópico, como:

o título da página anterior foi substituído pelo título da página atual:

No entanto, o link ainda é válido.

Alguma ideia sobre esse bug?

Realmente parece ser um bug, possivelmente relacionado à forma ou sequência em que substituímos o histórico, ou a alguma peculiaridade do Firefox.

Consegui reproduzir o problema.

Como é algo relativamente simples, vou adicionar a tag pr-welcome caso a comunidade queira contribuir e propor uma correção.

tudo bem, obrigado pela sua resposta

Descobri que esse bug também se manifesta como entradas corrompidas no histórico de navegação, o que considero um problema mais grave. Mais especificamente, um novo título é atribuído a uma URL antiga quando a navegação é tratada pelo JS. Isso acontece quase sempre no Firefox, mas é bem raro no Chrome (encontrei uma instância até agora: indo de /top para um tópico).

@sam está certo ao dizer que isso é causado pela ordem das operações em que a URL e o título são modificados. Gostaria que houvesse algum tipo de guia de melhores práticas publicado em algum lugar que dissesse qual é a ordem correta: sempre atualize o título depois de usar a API history.

Tentei fazer alguma depuração (e quero dizer desde já que sou bastante avesso a construir qualquer projeto moderadamente grande adjacente ao npm). Inicialmente, usei este código para fazer um pequeno reconhecimento:

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

De fato, mostrou que quase sempre há uma modificação de título logo antes da operação da API history. Infelizmente, não foi mais útil do que isso: relacionar o que acontece em tempo de execução com o código-fonte foi bastante difícil – as operações de interesse estão bastante dispersas, a pilha de chamadas era enganosa porque a execução já cedeu ao loop de eventos do Ember, e, em geral, a experiência de depuração no Firefox foi bastante infernal. Tendo mudado para o Chrome, tive um pouco mais de sucesso. Resumindo, tanto quanto sei, o Ember decide por si mesmo quando atualizar a URL. Por outro lado, a modificação do título pode ser iniciada de dois lugares: [1] e [2]

Apenas o último é executado antes da chamada da API history. O ‘ancestral comum de código’ deles está localizado aqui:

// Executa todos os hooks necessários de entrada/configuração/saída
this.setupContexts(newState, transition); // <- mudança de título iniciada aqui, acionando o evento `model.title:change`

// Verifica se uma redireção ocorreu na entrada/configuração
if (transition.isAborted) {
  // TODO: forma mais limpa? distinguir entre routeInfos de destino?
  this.state!.routeInfos = this.currentRouteInfos!;
  return Promise.reject(logAbort(transition));
}

this._updateURL(transition, newState); // <- mudança de URL iniciada aqui

Interessantemente, “router.js é a microlib de roteamento usada pelo Ember.js.”

Agora, gostaria de passar o tratamento do problema para alguém que, ao contrário de mim, esteja remotamente familiarizado com a base de código do discourse.

Edição: esqueci de mencionar: document.title é modificado por [1] uma ou mais vezes depois de (ambos) ser modificado [2] e a URL ser modificada pela API history.

1 curtida

(como novo usuário não consigo colocar mais de 2 links por postagem :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 curtida