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

RESOLVED FIXED in Firefox 63

Status

P2
normal
RESOLVED FIXED
6 months ago
6 months ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

unspecified
Firefox 63

Firefox Tracking Flags

(firefox63 fixed)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Assignee)

Description

6 months ago
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.

Updated

6 months ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2
(Assignee)

Comment 1

6 months ago
Created attachment 8994694 [details] [diff] [review]
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.)
Attachment #8994694 - Flags: review?(jryans)
Attachment #8994694 - Flags: review?(jryans) → review?(gl)
Attachment #8994694 - Flags: review?(gl) → review+
Assignee: nobody → florens
Status: NEW → ASSIGNED
(Assignee)

Updated

6 months ago
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)
Keywords: checkin-needed
(Assignee)

Comment 3

6 months ago
Created attachment 8994882 [details] [diff] [review]
bug-1477586-devtools-tab-line-animation.patch

Updated patch with r=gl in commit message
Attachment #8994694 - Attachment is obsolete: true
Flags: needinfo?(florens)
Keywords: checkin-needed

Comment 4

6 months ago
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

Comment 5

6 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/8479b1703fd6
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.