1553472 - Ensure that all DevTools tooltips conform with the Proton theme

Status: RESOLVED FIXED

(DevTools :: Inspector, task, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Our tooltips are currently inconsistent.

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

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

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.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Before.png

Before changes

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: After changes

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

@victoria Are you happy with these changes?

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1553472 - Ensure that all DevTools tooltips should conform with the Proton theme

Comment 6

[Patrick Brosset <:pbro>]

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.

Comment 7

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(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

Comment 8

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: After.png

After

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 10

[Victoria Wang [:victoria]]

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!

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/96ea626be10a
Ensure that all DevTools tooltips should conform with the Proton theme r=pbro

Comment 12

[Daniel Varga [:dvarga]]

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]

Comment 13

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b6d075df6a34af2e5ee33fffc247bb38360307ab

Comment 14

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=d6203c4d50d13c7bb88a3698c1ecb3a7d62bef8f

Comment 15

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=f7ba0519df11fd54c2da63214c9648fd7f878469

Comment 16

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

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

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6a7b8a2a7f84
Ensure that all DevTools tooltips should conform with the Proton theme r=pbro

Comment 18

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/6a7b8a2a7f84

Comment 19

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/6a7b8a2a7f84

Comment 20

[Victoria Wang [:victoria]]

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.