Tab title often isn't updated until the cursor is moved over it or tab focus is changed

[srirambv]

Test plan

1. Launch Brave and use the keyboard to open preferences (cmd + , on macOS)
2. Notice that title is set properly
3. Press key combo again to open a new preferences tab
4. Notice that title is also correct
   (thanks @bbondy for the much easier repro steps! 😄 )

Also see: #10691 (comment)

---

Original issue description

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  Contribution Statement opened in a new tab doesn't show the tab title until the cursor is moved over it or tab focus is changed

• Platform (Win7, 8, 10? macOS? Linux distro?):
  Windows 10 x64

• Brave Version (revision SHA):
  Brave 0.14.0
  rev 903cfea

• Steps to reproduce:

  1. Run simulated Brave payments to generate reports
  2. Click on the payment report to open it in a new tab
  3. Save the file/Close the save file prompt
  4. Tab title still retains about:contribution# until the mouse cursor is hovered over the tab or the tab focus is changed

• Actual result:
  Tab title is changed only after tab focus is lost or mouse over tab

• Expected result:
  Should show Contribution Statement when the statement file is opened

• Will the steps above reproduce in a fresh profile? If not what other info can be added?
  Yes

• Is this an issue in the currently released version?
  N/A

• Can this issue be consistently reproduced?
  Yes

• Extra QA steps:
  1.
  2.
  3.

• Screenshot if needed:

• Any related issues:
  Fixed display of text for new tabs #7724
  cc: @cezaraugusto

[srirambv]

This is actually the same for any about page(preference, bookmarks, history) opened with keyboard shortcuts

[srirambv]

Similar issue on opening a magnet link. On tab focus change or mouse over/away from tab shows the torrent title.

[NejcZdovc]

Also something familiar is happening when you are chatting on Facebook

[bsclifton]

The value is definitely being set... strange enough, it even shows properly in the DOM. However, it isn't triggering a re-render on the component itself ☹️

[luixxiul]

The issue is still happening on other languages than English.

STR:

1. Change language setting (eg to German)
2. Restart the browser
3. Open about:preferences ("Einstellungen") from the kabob menu
4. The tab title is set to "Preferences"
5. Hover on the tab
6. The title is changed to "Einstellungen"

[bsclifton]

Fix done with fa919c0 doesn't offer a very good solution- often tab is empty until it loads. Reopening...

[luixxiul]

Another STR:

1. Open about:about
2. Middle click about:about several times
3. You get about:about and Untitled

The tab which has been opened gets the correct tab title, after each new tab is opened.

Also: if you open an about page from the bookmark toolbar, you get the tab title which starts from chrome-extension.

[JaneSmith]

I believe I'm encountering this issue on version 0.18.14 on Windows 10 x64 when reading threads on https://boards.4chan.org. 4chan threads have an auto-update feature, which loads new messages and displays "(n)" in the page title to indicate the number of unread posts. When you scroll down to the bottom of the page, those posts are marked as read and the page title again changes to remove the "(n)" part.

I've noticed that the Brave window title (the text that replaces the URL bar when hidden) immediately updates when these page titles are changed, but the tab itself does not update until I either mouse-over it or focus a different tab.

It's quite annoying because if I'm on a different tab - it's harder to notice when there are new posts available to read. If I'm on a different tab like a Reddit tab, the window title will show the Reddit tab's title. The only way to see the 4chan tab's title is on the tab itself, which does not update.

[cezaraugusto]

cc @zentagonist I've just set it to 0.20.x and sprint/1 as this will be covered by #10691

[jonathansampson]

This issue, I believe, is caused by the use of transparent text. The engine thinks that because the text is transparent, nothing is rendered in its place, and therefore nothing needs to be updated.

If I'm not mistaken, @cezaraugusto is changing this to use a solid color for the text, and a pseudo-element for the fading. This should resolve this problem moving forward.

[cezaraugusto]

yes that's correct and your take is exactly what is happening. React renders the title but not the browser rendering engine itself, so you end up without updates until you hover the tab, which causes a full reflow. nice catch btw!