Flexbox - The highlighter color is not persistent when closing and reopening the inspector

VERIFIED FIXED in Firefox 65

Status

defect
P3
normal
VERIFIED FIXED
5 months ago
3 months ago

People

(Reporter: paul.boiciuc, Assigned: gl)

Tracking

65 Branch
Firefox 65
Unspecified
All

Firefox Tracking Flags

(firefox65 verified)

Details

Attachments

(2 attachments)

(Reporter)

Description

5 months ago
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0
Build ID: 20181126100057

STR:

1. Launch Firefox and navigate to a random page (e.g. nytimes.com).
2. Enable the element inspector.
3. Choose a Flex element and enable the highlighter.
4. Navigate to the Flexbox Inspector section and select the color picker.
5. Change the highlighter color using the eye-dropper.
6. Close the Inspector and reopen it.
7. Select a flex element again and enable the highlighter.

Actual result:

The color of the highlighter has reset to the default color, while the color of the color picker icon reflects the color selected while using the dropper.

This might not have 100% repro rate, but it can be triggered fairly easy.
I have attached a short video for better understanding.

Expected result:

The color of the highlighter is persistent when it is changed using the dropper, as the case is when using the color pallet.
(Reporter)

Comment 1

5 months ago
Upon further testing it would seem like the issue is not dependent on the dropper, but rather on an Inspector reset. The same issue can be observed regardless of the color change method. I have edited the title in order to better reflect this comment.
Summary: Flexbox - The highlighter color is not persistent when using the dropper → Flexbox - The highlighter color is not persistent when closing and reopening the inspector
I'm having trouble reproducing this problem. I've tried a number of times, on different sites, but it worked correctly every time so far.
Blocks: 1478396
Priority: -- → P3
I believe this problem is a dupliacte and has been fixed in bug 1497312
See Also: → 1497312
(Reporter)

Comment 4

5 months ago
For some reason that I can't figure out, the only web page that I can reproduce this is the one mentioned in step 1. 
I'll investigate this further on other pages, and if I have further findings, I'll add them here.
(Reporter)

Comment 5

5 months ago
I've managed to reproduce this on 3 different websites - Facebook.com / FT.com / W3school.com. I can attach screenshots or new video if needed.
(Assignee)

Comment 6

5 months ago
From the video, we can see that the flex badge is clicked on when the flexbox panel is empty, which is why we are getting the default purple color. In reality, we depend on the flexbox highlighter color that is in the Redux store. We should move away from this for the highlighter since the highlighter can be toggled from the rules and markup in 2 pane mode without the flexbox panel being loaded.
Assignee: nobody → gl
Status: NEW → ASSIGNED
(Assignee)

Comment 7

5 months ago
Attachment #9028069 - Flags: review?(mtigley)
Attachment #9028069 - Flags: review?(mtigley) → review+

Comment 8

5 months ago
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/26baf1ec73c6
Fetch the flexbox highlighter color from the async storage instead of the Redux store. r=mtigley
Backed out for browser_flexbox_highlighter_color_picker_on_RETURN.js failures

backout: https://hg.mozilla.org/integration/mozilla-inbound/rev/c65733e28a7460151569a933ac8323ad067e5cee

push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=26baf1ec73c631623eddf90e7b75cb4e2d3ac2de&selectedJob=214433954

18:28:32     INFO - Waiting for event: 'TabClose' on [object XULElement].
18:28:32     INFO - Got event: 'TabClose' on [object XULElement].
18:28:32     INFO - Tab removed and finished closing
18:28:32     INFO - Buffered messages finished
18:28:32     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js | A promise chain failed to handle a rejection: Connection closed, pending request to server1.conn8.child1/customhighlighter56, type show failed
18:28:32     INFO - 
18:28:32     INFO - Request stack:
18:28:32     INFO - request@resource://devtools/shared/protocol.js:1384:14
18:28:32     INFO - generateRequestMethods/</frontProto[name]@resource://devtools/shared/protocol.js:1538:14
18:28:32     INFO - CustomHighlighterFront<.show<@resource://devtools/shared/fronts/highlighters.js:77:12
18:28:32     INFO - showFlexboxHighlighter@resource://devtools/client/inspector/shared/highlighters-overlay.js:299:27
18:28:32     INFO - Async*onSetFlexboxOverlayColor@resource://devtools/client/inspector/flexbox/flexbox.js:361:7
18:28:32     INFO - Async*setFlexboxColor@resource://devtools/client/inspector/flexbox/components/FlexContainer.js:68:5
18:28:32     INFO - preview@resource://devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js:211:7
18:28:32     INFO - _selectColor@resource://devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js:145:7
18:28:32     INFO - _onSpectrumColorChange@resource://devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js:135:5
18:28:32     INFO - emit@resource://devtools/shared/event-emitter.js:178:15
18:28:32     INFO - emit@resource://devtools/shared/event-emitter.js:255:5
18:28:32     INFO - onChange@resource://devtools/client/shared/widgets/Spectrum.js:268:5
18:28:32     INFO - simulateColorPickerChange@chrome://mochitests/content/browser/devtools/client/inspector/test/head.js:930:3
18:28:32     INFO - async*@chrome://mochitests/content/browser/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js:44:9
18:28:32     INFO - Async*Tester_execTest/<@chrome://mochikit/content/browser-test.js:1093:34
18:28:32     INFO - async*Tester_execTest@chrome://mochikit/content/browser-test.js:1084:16
18:28:32     INFO - nextTest/<@chrome://mochikit/content/browser-test.js:982:9
18:28:32     INFO - SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:803:59
18:28:32     INFO -  - stack: destroy@resource://devtools/shared/protocol.js:1317:23
18:28:32     INFO - destroy@resource://devtools/shared/protocol.js:947:9
18:28:32     INFO - destroy@resource://devtools/shared/protocol.js:1319:5
18:28:32     INFO - destroy@resource://devtools/shared/fronts/inspector.js:508:5
18:28:32     INFO - destroyInspector/this._destroyingInspector<@resource://devtools/client/framework/toolbox.js:2785:13
18:28:32     INFO - Async*destroyInspector@resource://devtools/client/framework/toolbox.js:2774:40
18:28:32     INFO - _destroyToolbox@resource://devtools/client/framework/toolbox.js:2884:22
18:28:32     INFO - async*destroy@resource://devtools/client/framework/toolbox.js:2814:23
18:28:32     INFO - closeToolbox@resource://devtools/client/framework/devtools.js:594:11
18:28:32     INFO - async*closeTabAndToolbox@chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js:453:11
18:28:32     INFO - async*cleanup@chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js:137:11
18:28:32     INFO - async*nextTest@chrome://mochikit/content/browser-test.js:696:30
18:28:32     INFO - async*testScope/test_finish/<@chrome://mochikit/content/browser-test.js:1395:11
18:28:32     INFO - run@chrome://mochikit/content/browser-test.js:1332:9
18:28:32     INFO - Rejection date: Wed Nov 28 2018 18:28:10 GMT+0000 (GMT) - false == true - JS frame :: resource://testing-common/PromiseTestUtils.jsm :: assertNoUncaughtRejections :: line 257
18:28:32     INFO - Stack trace:
18:28:32     INFO - resource://testing-common/PromiseTestUtils.jsm:assertNoUncaughtRejections:257
18:28:32     INFO - chrome://mochikit/content/browser-test.js:nextTest:736
18:28:32     INFO - chrome://mochikit/content/browser-test.js:testScope/test_finish/<:1395
18:28:32     INFO - chrome://mochikit/content/browser-test.js:run:1332
18:28:32     INFO - Not taking screenshot here: see the one that was previously logged
Flags: needinfo?(gl)
(Assignee)

Updated

5 months ago
Flags: needinfo?(gl)

Comment 10

5 months ago
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/1d2ceb4fa579
Fetch the flexbox highlighter color from the async storage instead of the Redux store. r=mtigley

Comment 11

5 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/1d2ceb4fa579
Status: ASSIGNED → RESOLVED
Last Resolved: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+
(Reporter)

Comment 12

4 months ago
Verified as fixed using the latest nightly build(20181231091417). The issue is no longer present.
Status: RESOLVED → VERIFIED
Flags: qe-verify+

I reproduced this issue using Fx 65.0a1 (build ID: 20181126100057, on Windows 10 x64.
I can confirm this issue is also fixed on Fx 65.0b11. I verified using Windows 10 x64, macOS 10.13.6 and Ubuntu 16.04 LTS.
Cheers!

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