Closed Bug 1510023 Opened 2 years ago Closed 2 years ago

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


(DevTools :: Inspector, defect, P3)

65 Branch


(firefox65 verified)

Firefox 65
Tracking Status
firefox65 --- verified


(Reporter: paul.boiciuc, Assigned: gl)




(2 files)

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


1. Launch Firefox and navigate to a random page (e.g.
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.
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
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.
I've managed to reproduce this on 3 different websites - / / I can attach screenshots or new video if needed.
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
Attachment #9028069 - Flags: review?(mtigley)
Attachment #9028069 - Flags: review?(mtigley) → review+
Pushed by
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


push with failures:

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)
Flags: needinfo?(gl)
Pushed by
Fetch the flexbox highlighter color from the async storage instead of the Redux store. r=mtigley
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+
Verified as fixed using the latest nightly build(20181231091417). The issue is no longer present.
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.

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