If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Inspector info tooltip cause vertical scroll

RESOLVED FIXED in Firefox 57



Developer Tools: Inspector
3 months ago
11 hours ago


(Reporter: Mehdi, Assigned: Abhinav Koppula, Mentored)



Firefox 57

Firefox Tracking Flags

(firefox57 fixed)


MozReview Requests


Submitter Diff Changes Open Issues Last Updated
Error loading review requests:


(2 attachments)



3 months ago
Created attachment 8884613 [details]
ff bug.png


First of all I didn't face this issue before v54.

Sometimes (~10% of times that I'm working with Inspector) when I select a node, the tooltip (size info of selected/focused node) doesn't show on the center of the element, instead show on left corner and cause the vertical scroll. (see attached screenshot for more info).

p.s: the white area is the content of site and not important. I hover over on the black area (next to the home icon). also I didn't change anything via console. I'm using v54.0.1, I didn't add any dev tools related add-on.


Comment 1

3 months ago
Also the selected node doesn't matter, it happens for any node, the tooltip always appear there, the scroll maybe be bigger. btw to fix the issue I have to reload the page (and based on my test always after first reload everything works fine).

Comment 2

3 months ago
I'm sorry but seems like the amount of dev tools bugs is growing up and its too bad for developers like me. and I believe the inspector is one of the most bugy area. based on my other submitted bugs.

Please fix dev tools bug as soon as possible, because maybe users could ignore performance issues when browsing the web but issue that affect the job (developing I mean) is critical and ignore them is hard.
Sorry about the delay triaging this bug.
From the screenshot, I think this happens on a RTL site, so I tested on a RTL site: https://www.elal.com/he/Israel/Pages/default.aspx
I could not reproduce exactly the same issue, but I did have a problem: the nodeinfobar was completely invisible in my case.
If I remove the direction:rtl on this page, then it works fine.

So it looks like the nodeinfobar is impacted by the writing-mode/direction of the current page. We should fix this.

I think we should fix it in \devtools\server\actors\highlighters.css
We have a rule for the container of the highighter in this file (at the top), which we use to reset anything the page could be setting that would impact the highlighter's content itself:

:-moz-native-anonymous .highlighter-container {
  Content CSS applying to the html element impact the highlighters.
  To avoid that, possible cases have been set to initial.
  text-transform: initial;
  text-indent: initial;
  letter-spacing: initial;
  word-spacing: initial;
  color: initial;

I think we should add the following 2 declarations to it:

  direction: initial;
  writing-mode: initial;
Blocks: 1264624
Mentor: pbrosset@mozilla.com
status-firefox57: --- → fix-optional
Keywords: good-first-bug
Priority: -- → P2
Comment hidden (mozreview-request)

Comment 5

3 days ago
Hi Patrick,
I have created a mozreview-request for this.
Please let me know if I should add a test for this. I wasn't sure if tests need to be added for css changes as well since css might keep changing over time.

Comment 6

2 days ago
Comment on attachment 8910103 [details]
Bug 1379442 - Fix styling of nodeinfobar on RTL sites by setting writing-mode/direction to 'initial'.


Thank you for the quick fix!
Attachment #8910103 - Flags: review?(pbrosset) → review+

Comment 7

2 days ago
Pushed by pbrosset@mozilla.com:
Fix styling of nodeinfobar on RTL sites by setting writing-mode/direction to 'initial'. r=pbro
Assignee: nobody → abhinav.koppula

Comment 8

2 days ago
Last Resolved: 2 days ago
status-firefox57: fix-optional → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57


11 hours ago
No longer blocks: 1264624
You need to log in before you can comment on or make changes to this bug.