Closed Bug 1477586 Opened 2 years ago Closed 2 years ago

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

Categories

(DevTools :: General, defect, P2)

defect

Tracking

(firefox63 fixed)

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

(Reporter: fvsch, Assigned: fvsch)

Details

Attachments

(1 file, 1 obsolete file)

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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2
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.)
Attachment #8994694 - Flags: review?(jryans)
Attachment #8994694 - Flags: review?(gl) → review+
Assignee: nobody → florens
Status: NEW → ASSIGNED
Keywords: checkin-needed
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?
Flags: needinfo?(florens)
Updated patch with r=gl in commit message
Attachment #8994694 - Attachment is obsolete: true
Flags: needinfo?(florens)
Pushed by cbrindusan@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8479b1703fd6
Fix devtools-tab-line animation in iframes; r=gl
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/8479b1703fd6
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.