1560566 - Merge doorhanger and arrow HTML tooltip styles

Status: NEW

(DevTools :: General, task, P3)

Description

[Julian Descottes [:jdescottes]]

Bug 1553472 changed the default HTML Tooltip arrow style to drop the rounded corner, borders, opacity... It now looks very similar to the doorhanger style so I don't know if there is a strong incentive to maintain both tooltip types.

To simplify maintenance, we could remove the doorhanger style and only use arrow.

Comment 1

[Florens Verschelde :fvsch]

We have a bunch of somewhat duplicated theme variables:

devtools/client/themes/variables.css:

  /* Common popup styles(used by HTMLTooltip and autocomplete) */
  --theme-popup-background: var(--grey-60);
  --theme-popup-color: rgb(249,249,250);
  --theme-popup-border-color: #27272b;
  --theme-popup-dimmed: rgba(249,249,250,.1);

devtools/client/themes/tooltips.css:

  /* Tooltips */
  --theme-tooltip-color: var(--theme-body-color);
  --theme-tooltip-background: rgb(255, 255, 255);
  --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);

  /* Doorhangers */
  /* These colors are based on the colors used for doorhangers elsewhere in
   * Firefox. */
  --theme-arrowpanel-background: var(--theme-popup-background);
  --theme-arrowpanel-color: var(--theme-popup-color);
  --theme-arrowpanel-border-color: var(--theme-popup-border-color);
  --theme-arrowpanel-separator: ThreeDShadow;
  --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
  --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
  --theme-arrowpanel-disabled-color: GrayText;

Comment 2

[Florens Verschelde :fvsch]

By the way, for text colors and icon colors we could just use the more generic ones:

  /* Icon colors */
  --theme-icon-color: rgba(249, 249, 250, 0.7);
  --theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
  --theme-icon-checked-color: var(--blue-30);

  /* Text color */
  --theme-comment: var(--grey-45);
  --theme-body-color: var(--grey-40);
  --theme-text-color-alt: var(--grey-45);
  --theme-text-color-inactive: var(--grey-50);
  --theme-text-color-strong: var(--grey-30);

Comment 3

[Julian Descottes [:jdescottes]]

On top of styling differences I noticed a few behavior differences:
1/ doorhanger tooltips choose the position of the arrow based on the position of the anchor, arrow tooltips choose the position of the arrow based on the rtl/ltr direction. It might be fine to use the doorhanger approach everywhere here?
2/ doorhanger tooltips try harder to make the arrow point to the anchor, even if the anchor is almost offscreen. Here again, I think we could use the doorhanger implementation also for arrow tooltips.

Comment 4

[Florens Verschelde :fvsch]

Arrow size; I'm measuring ~8px tall for the three-dots menu, and ~13px tall (almost double) for the Events tooltip. The smaller size looks more consistent with what we use in Firefox overall.

Also we have some Mac-specific light theme colors, but they're proving a bit hard to maintain I think. Could we perhaps unify the light theme tooltip colors for Window, Mac and Linux?