1477586 - devtools-tab-line animation not working in Inspector, Netmonitor

Status: RESOLVED FIXED

(DevTools :: General, defect, P2)

Description

[Florens Verschelde :fvsch]

The top-level devtools tabs ("Inspector/Console/…") have an animated effect on hover, where the top border grows from the center.

This effect does not work in the Inspector iframe ("Rules/Computed/Layout/…" tabs) or in the Network monitor iframe ("Headers/Cookies/Params/…" tabs), because of an unset CSS variable.

/* devtools/client/themes/common.css#773 */
.devtools-tab-line {
  ...
  transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
  ...
}

The issue here is that the variable --animation-easing-function is set in
`toolkit/content/xul.css`, which is not loaded for devtools iframes.

Copying the variable definition into `devtools/client/themes/common.css` fixes the problem:

:root {
  font: message-box;
  --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
  --tab-line-selected-color: var(--blue-50);
}

But I’m not sure that's the best place where to put it.

Comment 1

[Florens Verschelde :fvsch]

Attachment: bug-1477586-devtools-tab-line-animation.patch

One-liner fix.

Turns out `devtools/client/themes/variables.css` already had this easing function under a different name, `--animation-curve`. It’s used in the style editor. Using it works in about:devtools-toolbox and in child iframes.

(For the record, the same value is hard-coded in a couple other places.)

Comment 2

[Julian Descottes [:jdescottes]]

We need to add the reviewer's name in the commit summary, so here it should be 

  Bug 1477586 - Fix devtools-tab-line animation in iframes;r=gl

Can you upload a new version with this change?

Comment 3

[Florens Verschelde :fvsch]

Attachment: bug-1477586-devtools-tab-line-animation.patch

Updated patch with r=gl in commit message

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8479b1703fd6
Fix devtools-tab-line animation in iframes; r=gl

Comment 5

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/8479b1703fd6