WebUI Tab Strip: Add placeholder title when a tab does not have one

To mimic the native tab strip, the title of the tab will now either
have a placeholder title indicating the tab is still loading or one
indicating that the tab is untitled.

Bug: 989131
Change-Id: I30acc3b973c573fd8b6721093c52fa31efc49c3a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1907565
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714605}

chrome/browser/resources/tab_strip/tab.js

@@ -121,8 +121,15 @@ export class TabElement extends CustomElement {
     this.setAttribute('draggable', true);
     this.toggleAttribute('crashed_', tab.crashed);
 
-    if (!this.tab_ || this.tab_.title !== tab.title) {
+    if (tab.title) {
       this.titleTextEl_.textContent = tab.title;
+    } else if (
+        !tab.shouldHideThrobber &&
+        (tab.networkState === TabNetworkState.WAITING ||
+         tab.networkState === TabNetworkState.LOADING)) {
+      this.titleTextEl_.textContent = loadTimeData.getString('loadingTab');
+    } else {
+      this.titleTextEl_.textContent = loadTimeData.getString('defaultTabTitle');
     }
     this.titleTextEl_.setAttribute('aria-label', getAccessibleTitle(tab));
 

chrome/browser/ui/webui/tab_strip/tab_strip_ui.cc

@@ -472,6 +472,8 @@ TabStripUI::TabStripUI(content::WebUI* web_ui)
   static constexpr LocalizedString kStrings[] = {
       {"tabListTitle", IDS_ACCNAME_TAB_LIST},
       {"closeTab", IDS_ACCNAME_CLOSE},
+      {"defaultTabTitle", IDS_DEFAULT_TAB_TITLE},
+      {"loadingTab", IDS_TAB_LOADING_TITLE},
       {"tabCrashed", IDS_TAB_AX_LABEL_CRASHED_FORMAT},
       {"tabNetworkError", IDS_TAB_AX_LABEL_NETWORK_ERROR_FORMAT},
       {"audioPlaying", IDS_TAB_AX_LABEL_AUDIO_PLAYING_FORMAT},

chrome/test/data/webui/tab_strip/tab_test.js

@@ -27,6 +27,7 @@ suite('Tab', function() {
 
   const strings = {
     closeTab: 'Close tab',
+    loadingTab: 'Loading...',
     tabCrashed: '$1 has crashed',
     tabNetworkError: '$1 has a network error',
   };
@@ -195,6 +196,18 @@ suite('Tab', function() {
         tab.title, tabElement.shadowRoot.querySelector('#titleText').innerText);
   });
 
+  test('sets the loading title while loading', () => {
+    const loadingTabWithoutTitle = Object.assign({}, tab, {
+      networkState: TabNetworkState.WAITING,
+      shouldHideThrobber: false,
+    });
+    delete loadingTabWithoutTitle.title;
+    tabElement.tab = loadingTabWithoutTitle;
+    assertEquals(
+        strings['loadingTab'],
+        tabElement.shadowRoot.querySelector('#titleText').innerText);
+  });
+
   test('exposes the tab ID to an attribute', () => {
     tabElement.tab = Object.assign({}, tab, {id: 1001});
     assertEquals('1001', tabElement.getAttribute('data-tab-id'));