Ensure that all DevTools tooltips conform with the Proton theme

RESOLVED FIXED in Firefox 69

Status

task
P2
normal
RESOLVED FIXED
3 months ago
2 months ago

People

(Reporter: miker, Assigned: miker)

Tracking

(Blocks 1 bug, Regressed 1 bug)

unspecified
Firefox 69
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox69 fixed)

Details

Attachments

(3 attachments, 1 obsolete attachment)

Our tooltips are currently inconsistent.

At the very least we need to ensure that all DevTools tooltips have a solid white background.

The tooltips are:

  • Color
  • Cubic Bezier
  • Filter
  • Event
  • Inactive CSS
  • Image Preview
  • Font Preview
  • Variable Preview

To fit the Proton theme our tooltips and doorhangers should have the following background colors:

  • Light theme background color should be hsla(0,0%,99%,.975) on OSX or -moz-field everywhere else.
  • Dark theme background color should be --grey-60.
Posted image Before.png

Before changes

Summary: Ensure that all DevTools tooltips have a solid white background → Ensure that all DevTools tooltips should conform with the Proton theme

@victoria Are you happy with these changes?

Flags: needinfo?(victoria)

The after looks great, but could we also get rid of the border? The InactiveCSS tooltips don't have a border, and that looks great.

Summary: Ensure that all DevTools tooltips should conform with the Proton theme → Ensure that all DevTools tooltips conform with the Proton theme

(In reply to Patrick Brosset <:pbro> from comment #6)

The after looks great, but could we also get rid of the border? The InactiveCSS tooltips don't have a border, and that looks great.

Agreed

Attachment #9067019 - Attachment is obsolete: true
Priority: -- → P2

Bugbug thinks this bug is a task, but please change it back in case of error.

Type: defect → task

This is awesome!

The InactiveCSS screenshot here looks like an older version before the changes in #1551174 - I'm assuming it's just an older screenshot from before that change was merged in? Other than that, these all look great!

Flags: needinfo?(victoria)
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/96ea626be10a
Ensure that all DevTools tooltips should conform with the Proton theme r=pbro

Backed out changeset 96ea626be10a (Bug 1553472) fot devtools failure at devtools/client/framework/test/browser_toolbox_zoom_popup.js.

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&selectedJob=249567074&revision=96ea626be10a554da81d4938ecc01b9180e7fe7f

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=249968751&repo=autoland&lineNumber=8868

Backout link: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&selectedJob=249567074&revision=ebe7fdd19be5dbca6817987e2d80bbe46b357ad7

16:59:19     INFO - TEST-INFO | screencapture: exit 0
16:59:19     INFO - Buffered messages logged at 16:59:16
16:59:19     INFO - Entering test bound 
16:59:19     INFO - Load iframe page for checking the frame menu with x1.4 zoom.
16:59:19     INFO - Adding a new tab with URL: data:text/html;charset=utf-8,<iframe/>
16:59:19     INFO - Tab added and finished loading
16:59:19     INFO - Console message: OpenGL compositor Initialized Succesfully.
16:59:19     INFO - Version: 2.1 INTEL-10.6.33
16:59:19     INFO - Vendor: Intel Inc.
16:59:19     INFO - Renderer: Intel Iris OpenGL Engine
16:59:19     INFO - FBO Texture Target: TEXTURE_2D
16:59:19     INFO - Buffered messages logged at 16:59:18
16:59:19     INFO - Waiting for the toolbox window will to be rendered with zoom x1.4
16:59:19     INFO - Resizing and moving the toolbox window in order to display the chevron menu.
16:59:19     INFO - Show popup menu with click event.
16:59:19     INFO - Buffered messages logged at 16:59:19
16:59:19     INFO - TEST-PASS | devtools/client/framework/test/browser_toolbox_zoom_popup.js | Menu popup is displayed. - 
16:59:19     INFO - Hide popup menu.
16:59:19     INFO - Buffered messages finished
16:59:19     INFO - TEST-UNEXPECTED-FAIL | devtools/client/framework/test/browser_toolbox_zoom_popup.js | Center of arrow is within 1px of button center (delta: 1.3499908447265625) - 
16:59:19     INFO - Stack trace:
16:59:19     INFO - chrome://mochikit/content/browser-test.js:test_ok:1313
16:59:19     INFO - chrome://mochitests/content/browser/devtools/client/framework/test/browser_toolbox_zoom_popup.js:null:87
16:59:19     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1115
16:59:19     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1143
16:59:19     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1004
16:59:19     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:803
16:59:19     INFO - Show popup menu with click event.
16:59:19     INFO - GECKO(2034) | --DOCSHELL 0x1364c5000 == 12 [pid = 2034] [id = {5f5b6cec-40e9-d94c-9985-bdf928b7c703}] [url = about:blank]
16:59:19     INFO - GECKO(2034) | [Parent 2034, Main Thread] ###!!! ASSERTION: Unexpected UpdateTransformLayer hint: '!(aChange & nsChangeHint_UpdateTransformLayer) || nsLayoutUtils::GetPrimaryFrameFromStyleFrame(aFrame) ->IsTransformed() || aFrame->StyleDisplay()->HasTransformStyle()', file /builds/worker/workspace/build/src/layout/base/RestyleManager.cpp, line 1200
16:59:19     INFO - GECKO(2034) | #01: mozilla::RestyleManager::DoProcessPendingRestyles(mozilla::ServoTraversalFlags) [xpcom/ds/nsTArray.h:347]
16:59:19     INFO - 
16:59:19     INFO - GECKO(2034) | #02: mozilla::PresShell::DoFlushPendingNotifications(mozilla::ChangesToFlush) [layout/base/RestyleManager.cpp:3180]
16:59:19     INFO - 
16:59:19     INFO - GECKO(2034) | #03: mozilla::dom::Document::FlushPendingNotifications(mozilla::ChangesToFlush) [dom/base/Document.cpp:9355]
16:59:19     INFO - 
16:59:19     INFO - GECKO(2034) | #04: mozilla::dom::Element::GetBoundingClientRect() [dom/base/Element.cpp:1027]
Flags: needinfo?(mratcliffe)
Flags: needinfo?(mratcliffe)

There are some bc test failures on try but none that could be related to this patch.

Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6a7b8a2a7f84
Ensure that all DevTools tooltips should conform with the Proton theme r=pbro
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69

Btw, I noticed that even the currently photon-style tooltips in DevTools, like the meatball menu, seem to be a tiny bit—like 5%?—transparent, for some reason :D. It would be great to change it 100% opacity if you didn't already as part of this bug.

Regressions: 1558747
You need to log in before you can comment on or make changes to this bug.