[Console Insights] Improve feedback button UX

- Show which button was clicked
- Make it obvious once button has been clicked, that buttons can't be
  clicked anymore.

Screencast: https://i.imgur.com/Jt31ljt.mp4

Fixed: 384874056
Change-Id: I9248702151e16bf2e25c9ef0fd86b8f294e395ad
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6097818
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Wolfgang Beyer <[email protected]>

Author: wolfib

front_end/panels/explain/components/ConsoleInsight.ts

@@ -788,10 +788,14 @@ export class ConsoleInsight extends HTMLElement {
               data-rating=${'true'}
               .data=${
                 {
-                  variant: Buttons.Button.Variant.ICON,
+                  variant: Buttons.Button.Variant.ICON_TOGGLE,
                   size: Buttons.Button.Size.SMALL,
                   iconName: 'thumb-up',
-                  active: this.#selectedRating !== undefined && this.#selectedRating,
+                  toggledIconName: 'thumb-up',
+                  toggleOnClick: false,
+                  toggleType: Buttons.Button.ToggleType.PRIMARY,
+                  disabled: this.#selectedRating !== undefined,
+                  toggled: this.#selectedRating === true,
                   title: i18nString(UIStrings.goodResponse),
                   jslogContext: 'thumbs-up',
                 } as Buttons.Button.ButtonData
@@ -802,10 +806,14 @@ export class ConsoleInsight extends HTMLElement {
               data-rating=${'false'}
               .data=${
                 {
-                  variant: Buttons.Button.Variant.ICON,
+                  variant: Buttons.Button.Variant.ICON_TOGGLE,
                   size: Buttons.Button.Size.SMALL,
                   iconName: 'thumb-down',
-                  active: this.#selectedRating !== undefined && !this.#selectedRating,
+                  toggledIconName: 'thumb-down',
+                  toggleOnClick: false,
+                  toggleType: Buttons.Button.ToggleType.PRIMARY,
+                  disabled: this.#selectedRating !== undefined,
+                  toggled: this.#selectedRating === false,
                   title: i18nString(UIStrings.badResponse),
                   jslogContext: 'thumbs-down',
                 } as Buttons.Button.ButtonData