Button view - HackMD

# Button view Today, we check the type of [views::Button](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=38;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) class. ## Button [views::Button](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=38;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) represents a button which is a focusable item. More specific button classes are derived from this class. [ButtonState](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=41;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) represents a state of button. NORMAL is a state where the user is not interacting with the button. We also have HOVERED, PRESSED, DISABLED and COUNT. This state is held inside the button class as [`state_`](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=338;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771). [KeyClickAction](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=51;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) is a enum describing the key event dispatched to the button. There is OnKeyPress, OnKeyRelease and kNone. Button class holds - `tooltip_text_`: the text shown when the button is hovered - `callback_`: notified when cliekced - `hover_animation_`: [ThrobAnimation](https://source.chromium.org/chromium/chromium/src/+/main:ui/gfx/animation/throb_animation.h;l=19;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) class representing slide animation shown on hovering - `focus_painter`: [Painter](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/painter.h;l=38;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) class for button who is responsible for painting border, background and other region of view. - `button_controller_`: [ButtonController](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button_controller.h;l=18;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) who handles the logic on event, not the visual one. ### ButtonControllerDelegate [ButtonControlerDelegate](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button_controller_delegate.h;l=16;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) is a virtual class describing methods to capture the button. - RequestFocusFromEvent - NotifyClick - OnClickCnceld - IsTriggerableEvent - ShouldEnterPushedStte - ShouldEnterHoveredState - GetInkDrop - GetDragOperations - InDrag - button These methods must be implemented for all button classes so that the user can share the logic between any button types. [views::Button](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=38;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) has a [DefaultButtonControllerDelegate](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/button.h;l=58;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) implementation. If there is no specific delegate overriding this, all button types use this implementation. ## Other types of button ### ImageButton [ImageButton](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/image_button.h;l=20;drc=9b7c86ec068b130bca8a6ceb324980ba8059be7b) contains a image in the button. [ImageModel](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/image_button.h;l=101;drc=9b7c86ec068b130bca8a6ceb324980ba8059be7b) is set for each state described in ButtonState, and the image will transition accordingly toe the set state. It also has `background_image_` as ImageSkia. ### LabelButton [LabelButton](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/label_button.h;l=34;drc=c769e2dfc2a4c3a05d52ff6734c648735644013e) has a text and an icon tied with the button. It holds [`image_`](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/label_button.h;l=236;drc=c769e2dfc2a4c3a05d52ff6734c648735644013e) as ImageView for icon and [`label_`](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/label_button.h;l=237;drc=c769e2dfc2a4c3a05d52ff6734c648735644013e) as LabelButtonLabel for the text. There are also size and color properties. There is [LabelButtonBorder](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/label_button_border.h;l=18;drc=3e1a26c44c024d97dc9a4c09bbc6a2365398ca2c) class derived from views::Border and [LabelButtonLabel](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/label_button_label.h;drc=69ee26f2a72c051564f8bfe22ddec1eb2a36bc87) derived from views::Label corresponding to LabelButton. ### ToggleButton [ToggleButton](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/toggle_button.h;l=25;drc=4d0b61323f722c2993341fdeede469717cff75eb) is a button with on/off state. The state usually changes by clicking the toggle button. It contains a [`slide_animation_`](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/toggle_button.h;l=111;drc=4d0b61323f722c2993341fdeede469717cff75eb) which is triggered when the toggle button is updated so that the button slides. The color may changes depending on the state as well. It is tracked by [`track_on_color_`](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/toggle_button.h;l=114;drc=4d0b61323f722c2993341fdeede469717cff75eb) and `track_off_color_`. This uses [ColorId ](https://source.chromium.org/chromium/chromium/src/+/main:ui/color/color_id.h;l=665;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) enum. ### CheckBox [CheckBox](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/checkbox.h;l=25;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) is a button with the check box. This is a child of LabelButton. In this button, there is a state whether it is checked or not. This is held as boolean by [`checked_`](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/checkbox.h;l=87;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771). Also, the checkbox icon has a different view depending on checked state and enabled/disabled state. This is controlled using [IconState](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/checkbox.h;l=57;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) enum. ### RadioButton [RadioButton](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/radio_button.h;l=18;drc=63c7967417c6ebe6afc325ebf05653f377a7cece) is for a radio button, a design with several items and select one of them ([example](https://m2.material.io/components/radio-buttons)). This is a child of CheckBox. ### MdTextButton [MdTextButton](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/md_text_button.h;drc=365aa38415f18a5b2a13132512d4fc66391cc0d6) is a material design text button. This is a child of LabelButton MD text seems to be a simple design and required to retain the button layout even when MD is set by default (e.g. bookmarks bar) ### MenuButton [MenuButton](https://source.chromium.org/chromium/chromium/src/+/main:ui/views/controls/button/menu_button.h;l=26;drc=f5bdc89c7395ed24f1b8d196a3bdd6232d5bf771) shows a menu when the left click is dispatched. This is a child of LabelButton. This button is very simple, it just nofies the click event to MenuController and activate the menu. Menu is implemented as a different view (popup window, context menu), so this handling logic is not inside Button class. ## Note There are many other buttons implemented for each features. There are lot espacially in ash codes since chrome implements its own chromeos UI. The button descibed above are the general button implementation we provide.