Tab Strip WebUI: Update tabs when blocked state changes

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

chrome/browser/resources/tab_strip/tab.html

@@ -44,7 +44,6 @@
     margin-inline-end: 8px;
     margin-inline-start: 12px;
     max-width: var(--favicon-size);
-    overflow: hidden;
     position: relative;
     /* When transitioning to the default visible state, the margin and max-width
      * transitions should finish first, then the opacity should be set to 1.
@@ -164,6 +163,10 @@
     display: block;
   }
 
+  :host([active][blocked_]) #blocked {
+    display: none;
+  }
+
   #titleText {
     font-size: 100%;
     font-weight: normal;

chrome/browser/resources/tab_strip/tab.js

@@ -73,8 +73,8 @@ export class TabElement extends CustomElement {
         'loading_',
         !tab.shouldHideThrobber &&
             tab.networkState === TabNetworkState.LOADING);
-
     this.toggleAttribute('pinned_', tab.pinned);
+    this.toggleAttribute('blocked_', tab.blocked);
     this.setAttribute('draggable', tab.pinned);
     this.toggleAttribute('crashed', tab.crashed);
 

chrome/browser/resources/tab_strip/tabs_api_proxy.js

@@ -19,6 +19,7 @@ export const TabNetworkState = {
 /**
  * @typedef {{
  *    active: boolean,
+ *    blocked: boolean,
  *    crashed: boolean,
  *    favIconUrl: (string|undefined),
  *    id: number,

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

@@ -184,6 +184,11 @@ class TabStripUIHandler : public content::WebUIMessageHandler,
     FireWebUIListener("tab-updated", GetTabData(contents, index));
   }
 
+  void TabBlockedStateChanged(content::WebContents* contents,
+                              int index) override {
+    FireWebUIListener("tab-updated", GetTabData(contents, index));
+  }
+
  protected:
   // content::WebUIMessageHandler:
   void RegisterMessages() override {
@@ -235,6 +240,7 @@ class TabStripUIHandler : public content::WebUIMessageHandler,
                         static_cast<int>(tab_renderer_data.network_state));
     tab_data.SetBoolean("shouldHideThrobber",
                         tab_renderer_data.should_hide_throbber);
+    tab_data.SetBoolean("blocked", tab_renderer_data.blocked);
     tab_data.SetBoolean("crashed", tab_renderer_data.IsCrashed());
     // TODO(johntlee): Add the rest of TabRendererData
 
@@ -292,6 +298,10 @@ class TabStripUIHandler : public content::WebUIMessageHandler,
     colors.SetString("--tabstrip-indicator-capturing-color",
                      color_utils::SkColorToRgbaString(tp.GetColor(
                          ThemeProperties::COLOR_TAB_ALERT_CAPTURING)));
+    colors.SetString("--tabstrip-tab-blocked-color",
+                     color_utils::SkColorToRgbaString(
+                         ui::NativeTheme::GetInstanceForWeb()->GetSystemColor(
+                             ui::NativeTheme::kColorId_ProminentButtonColor)));
 
     ResolveJavascriptCallback(callback_id, colors);
   }

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

@@ -59,7 +59,8 @@ suite('Tab', function() {
   });
 
   test(
-      'toggles a [hide-icon] attribute when the icon container should be shown',
+      'toggles a [hide-icon_] attribute when the icon container should be ' +
+          'shown',
       () => {
         tabElement.tab = Object.assign({}, tab, {showIcon: true});
         assertFalse(tabElement.hasAttribute('hide-icon_'));
@@ -67,14 +68,14 @@ suite('Tab', function() {
         assertTrue(tabElement.hasAttribute('hide-icon_'));
       });
 
-  test('toggles a [pinned] attribute when pinned', () => {
+  test('toggles a [pinned_] attribute when pinned', () => {
     tabElement.tab = Object.assign({}, tab, {pinned: true});
     assertTrue(tabElement.hasAttribute('pinned_'));
     tabElement.tab = Object.assign({}, tab, {pinned: false});
     assertFalse(tabElement.hasAttribute('pinned_'));
   });
 
-  test('toggles a [loading] attribute when loading', () => {
+  test('toggles a [loading_] attribute when loading', () => {
     tabElement.tab =
         Object.assign({}, tab, {networkState: TabNetworkState.LOADING});
     assertTrue(tabElement.hasAttribute('loading_'));
@@ -83,7 +84,7 @@ suite('Tab', function() {
     assertFalse(tabElement.hasAttribute('loading_'));
   });
 
-  test('toggles a [waiting] attribute when waiting', () => {
+  test('toggles a [waiting_] attribute when waiting', () => {
     tabElement.tab =
         Object.assign({}, tab, {networkState: TabNetworkState.WAITING});
     assertTrue(tabElement.hasAttribute('waiting_'));
@@ -92,6 +93,13 @@ suite('Tab', function() {
     assertFalse(tabElement.hasAttribute('waiting_'));
   });
 
+  test('toggles a [blocked_] attribute when blocked', () => {
+    tabElement.tab = Object.assign({}, tab, {blocked: true});
+    assertTrue(tabElement.hasAttribute('blocked_'));
+    tabElement.tab = Object.assign({}, tab, {blocked: false});
+    assertFalse(tabElement.hasAttribute('blocked_'));
+  });
+
   test('toggles a [crashed] attribute when crashed', () => {
     tabElement.tab = Object.assign({}, tab, {crashed: true});
     assertTrue(tabElement.hasAttribute('crashed'));