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

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Paul_B]

Attachment: color change persistency on dropper color change.mp4

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.

Comment 1

[Paul_B]

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.

Comment 2

[Patrick Brosset <:pbro>]

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.

Comment 3

[Martin Balfanz [:mbalfanz]]

I believe this problem is a dupliacte and has been fixed in bug 1497312

Comment 4

[Paul_B]

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.

Comment 5

[Paul_B]

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.

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

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.

Comment 7

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 1510023.patch [1.0]

Comment 8

[Pulsebot]

Pushed by [e-mail]:
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

Comment 9

[Natalia Csoregi [:nataliaCs]]

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

Comment 10

[Pulsebot]

Pushed by [e-mail]:
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

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/1d2ceb4fa579

Comment 12

[Paul_B]

Verified as fixed using the latest nightly build(20181231091417). The issue is no longer present.

Comment 13

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

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!