Introduce UI for Options drop down menu that is directly available from within the Debugger panel toolbar.

Debugger doesn't have a toolbar, but we want to have it at the similar location as in the Console and Network panel - i.e. next to the "Deactivate breakpoints" icon. But, it should be visible all the time - even the left side bar is closed.

See bug 1459175 (implementation for the Network panel)

The first option in the menu should be: Disable JavaScript

Honza

We could also fix Bug 1590885 - Expose line-wrap as option in the debugger (as a follow up)

Honza

Just for the record, here is a list of further options (we have discussed) that might be introduced in the menu:

• Disable SourceMaps
• edit: Disable Async StackTraces (there is no reason to have this option)
• Disable Inline Previews
• Disable Code Folding (bug 1551418)

It can all be done as follow ups.

Honza

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&searchStr=linux%2C18.04%2Cx64%2Cdebug%2Cmochitests%2Ctest-linux1804-64%2Fdebug-mochitest-devtools-chrome-e10s-12%2Cm%28dt12%29&revision=3fc026e3b0e70ae939db76d08f108d3dc8be6077&selectedJob=298749382

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=298749382&repo=autoland
TV failure: https://treeherder.mozilla.org/logviewer.html#?job_id=298749362&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/401003622904

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=299164940&resultStatus=success%2Ctestfailed%2Cbusted%2Cexception&fromchange=0c52ed0a7e04c86d9270d502d677fca89173510a&tochange=52a584f213d2e217d7e62904abb3abd5ce417ff6&searchStr=linux%2C18.04%2Cx64%2Cdebug%2Cmochitests%2Ctest-linux1804-64%2Fdebug-mochitest-devtools-chrome-e10s-12%2Cm%28dt12%29

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=299164940&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/52a584f213d2e217d7e62904abb3abd5ce417ff6

[task 2020-04-24T03:50:43.663Z] 03:50:43     INFO - TEST-PASS | devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js | Scopes are mapped - 
[task 2020-04-24T03:50:43.663Z] 03:50:43     INFO - 3. Hover on a token with mapScopes disabled
[task 2020-04-24T03:50:43.663Z] 03:50:43     INFO - Buffered messages logged at 03:50:42
[task 2020-04-24T03:50:43.664Z] 03:50:43     INFO - Get token at 21, 15
[task 2020-04-24T03:50:43.664Z] 03:50:43     INFO - Buffered messages logged at 03:50:43
[task 2020-04-24T03:50:43.664Z] 03:50:43     INFO - Hovering on token anAliased
[task 2020-04-24T03:50:43.665Z] 03:50:43     INFO - Buffered messages finished
[task 2020-04-24T03:50:43.665Z] 03:50:43     INFO - TEST-UNEXPECTED-FAIL | devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js | undefined assertion name - Got "an-original", expected undefined
[task 2020-04-24T03:50:43.665Z] 03:50:43     INFO - Stack trace:
[task 2020-04-24T03:50:43.666Z] 03:50:43     INFO - chrome://mochikit/content/browser-test.js:test_is:1297
[task 2020-04-24T03:50:43.666Z] 03:50:43     INFO - chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js:previewToken:16
[task 2020-04-24T03:50:43.667Z] 03:50:43     INFO - chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js:null:40
[task 2020-04-24T03:50:43.667Z] 03:50:43     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1039
[task 2020-04-24T03:50:43.667Z] 03:50:43     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1074
[task 2020-04-24T03:50:43.668Z] 03:50:43     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:904
[task 2020-04-24T03:50:43.668Z] 03:50:43     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:918
[task 2020-04-24T03:50:43.671Z] 03:50:43     INFO - GECKO(1231) | [ACTION] CLEAR_PREVIEW  - {"type":"CLEAR_PREVIEW","cx":{"navigateCounter":0}}
[task 2020-04-24T03:50:43.671Z] 03:50:43     INFO - 4. StepOver with mapScopes disabled
[task 2020-04-24T03:50:43.673Z] 03:50:43     INFO - Stepping over from 20
[task 2020-04-24T03:50:43.673Z] 03:50:43     INFO - GECKO(1231) | [ACTION] COMMAND [start] - {"type":"COMMAND","command":"stepOver","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":1},"thread":"server0.conn114.child2/thread21","seqId":"8","status":"start"}
[task 2020-04-24T03:50:43.673Z] 03:50:43     INFO - GECKO(1231) | [ACTION] ADD_SOURCES  - {"type":"ADD_SOURCES","cx":{"navigateCounter":0},"sources":[{"id":"source-server0.conn114.child2/source331","url":"","relativeUrl":null,"isPrettyPrinted":false,"extensionName":null,"introductionUrl":null,"introductionType":"debugger eval","isBlackBoxed":false,"isWasm":false,"isExtension":false,"isOriginal":false}]}
[task 2020-04-24T03:50:43.674Z] 03:50:43     INFO - GECKO(1231) | [ACTION] INSERT_SOURCE_ACTORS  - {"type":"INSERT_SOURCE_ACTORS","items":[{"id":"server0.conn114.child2/source331","actor":"server0.conn114.child2/source331","thread":"server0.conn114.child2/thread21","source":"source-server0.conn114.child2/source331","isBlackBoxed":false,"sourceMapURL":null,"url":null,"introductionUrl":null,"introductionType":"debugger eval"}]}
[task 2020-04-24T03:50:43.795Z] 03:50:43     INFO - GECKO(1231) | [ACTION] RESUME  - {"type":"RESUME","thread":"server0.conn114.child2/thread21","wasStepping":true}
[task 2020-04-24T03:50:43.925Z] 03:50:43     INFO - GECKO(1231) | [ACTION] PAUSED  - {"type":"PAUSED","thread":"server0.conn114.child2/thread21","why":{"type":"resumeLimit"},"frame":{"id":"server0.conn114.child2/frame299","thread":"server0.conn114.child2/thread21","displayName":"root","location":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js","line":122,"column":2},"generatedLocation":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js","line":122,"column":2},"this":{"type":"object","actor":"server0.conn114.child2/obj333","class":"Window","ownPropertyLength":1091,"extensible":true,"frozen":false,"sealed":false,"preview":{"kind":"ObjectWithURL","url":"http://example.com/browser/devtools/client/debugger/test/mochitest/examples/doc-sourcemapped.html"}},"source":null,"index":0,"asyncCause":null,"state":"on-stack"},"pauseInfo":{"why":{"type":"resumeLimit"}},"scopes":[],"loadedObjects":[]}
[task 2020-04-24T03:50:44.063Z] 03:50:44     INFO - GECKO(1231) | [ACTION] COMMAND [done] - {"type":"COMMAND","command":"stepOver","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":1},"thread":"server0.conn114.child2/thread21","seqId":"8","status":"done"}
[task 2020-04-24T03:50:44.084Z] 03:50:44     INFO - Waiting for state change: paused
[task 2020-04-24T03:50:44.100Z] 03:50:44     INFO - GECKO(1231) | [ACTION] FETCHED_FRAMES  - {"type":"FETCHED_FRAMES","thread":"server0.conn114.child2/thread21","frames":[{"id":"server0.conn114.child2/frame299","thread":"server0.conn114.child2/thread21","displayName":"root","location":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js","line":122,"column":2},"generatedLocation":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js","line":122,"column":2},"this":{"type":"object","actor":"server0.conn114.child2/obj333","class":"Window","ownPropertyLength":1091,"extensible":true,"frozen":false,"sealed":false,"preview":{"kind":"ObjectWithURL","url":"http://example.com/browser/devtools/client/debugger/test/mochitest/examples/doc-sourcemapped.html"}},"source":null,"index":0,"asyncCause":null,"state":"on-stack"}],"cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":3}}
[task 2020-04-24T03:50:44.157Z] 03:50:44     INFO - GECKO(1231) | [ACTION] MAP_FRAMES  - {}
[task 2020-04-24T03:50:44.213Z] 03:50:44     INFO - GECKO(1231) | [ACTION] SET_SELECTED_LOCATION  - {"type":"SET_SELECTED_LOCATION","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":3},"source":{"id":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js/originalSource-67ec23fc9d71c175afc23e9b4c10ce61","url":"webpack3-babel6://./esmodules-cjs/input.js","relativeUrl":"/esmodules-cjs/input.js","isPrettyPrinted":false,"isWasm":false,"isBlackBoxed":false,"introductionUrl":null,"isExtension":false,"extensionName":null,"isOriginal":true},"location":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js/originalSource-67ec23fc9d71c175afc23e9b4c10ce61","sourceUrl":"webpack3-babel6://./esmodules-cjs/input.js","line":21,"column":2}}
[task 2020-04-24T03:50:44.269Z] 03:50:44     INFO - GECKO(1231) | [ACTION] SET_ORIGINAL_BREAKABLE_LINES  - {"type":"SET_ORIGINAL_BREAKABLE_LINES","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":3},"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js/originalSource-67ec23fc9d71c175afc23e9b4c10ce61","breakableLines":[1,2,3,4,6,7,8,10,11,12,14,15,18,20,21,22,23,24,29,30,31,32,34,35,36,37,39]}
[task 2020-04-24T03:50:44.288Z] 03:50:44     INFO - GECKO(1231) | [ACTION] MAP_FRAME_DISPLAY_NAMES  - {"type":"MAP_FRAME_DISPLAY_NAMES","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":3},"thread":"server0.conn114.child2/thread21","frames":[{"id":"server0.conn114.child2/frame299","thread":"server0.conn114.child2/thread21","displayName":"root","location":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js/originalSource-67ec23fc9d71c175afc23e9b4c10ce61","sourceUrl":"webpack3-babel6://./esmodules-cjs/input.js","line":21,"column":2},"generatedLocation":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js","line":122,"column":2},"this":{"type":"object","actor":"server0.conn114.child2/obj333","class":"Window","ownPropertyLength":1091,"extensible":true,"frozen":false,"sealed":false,"preview":{"kind":"ObjectWithURL","url":"http://example.com/browser/devtools/client/debugger/test/mochitest/examples/doc-sourcemapped.html"}},"source":null,"index":0,"asyncCause":null,"state":"on-stack","originalDisplayName":"root"}]}
[task 2020-04-24T03:50:44.332Z] 03:50:44     INFO - GECKO(1231) | [ACTION] ADD_SCOPES [start] - {}
[task 2020-04-24T03:50:44.368Z] 03:50:44     INFO - GECKO(1231) | [ACTION] MAP_SCOPES [start] - {}
[task 2020-04-24T03:50:44.437Z] 03:50:44     INFO - GECKO(1231) | [ACTION] IN_SCOPE_LINES  - {}
[task 2020-04-24T03:50:45.486Z] 03:50:45     INFO - GECKO(1231) | [ACTION] ADD_SCOPES [done] - {}
[task 2020-04-24T03:50:45.591Z] 03:50:45     INFO - GECKO(1231) | [ACTION] ADD_INLINE_PREVIEW  - {"type":"ADD_INLINE_PREVIEW","thread":"server0.conn114.child2/thread21","frame":{"id":"server0.conn114.child2/frame299","thread":"server0.conn114.child2/thread21","displayName":"root","location":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js/originalSource-67ec23fc9d71c175afc23e9b4c10ce61","sourceUrl":"webpack3-babel6://./esmodules-cjs/input.js","line":21,"column":2},"generatedLocation":{"sourceId":"sourceURL-http://example.com/browser/devtools/client/debugger/test/mochitest/examples/sourcemapped/output/webpack3-babel6/esmodules-cjs.js","line":122,"column":2},"this":{"type":"object","actor":"server0.conn114.child2/obj333","class":"Window","ownPropertyLength":1091,"extensible":true,"frozen":false,"sealed":false,"preview":{"kind":"ObjectWithURL","url":"http://example.com/browser/devtools/client/debugger/test/mochitest/examples/doc-sourcemapped.html"}},"source":null,"index":0,"asyncCause":null,"state":"on-stack","originalDisplayName":"root"},"previews":{}}
[task 2020-04-24T03:50:45.800Z] 03:50:45     INFO - GECKO(1231) | [ACTION] MAP_SCOPES [done] - {}
[task 2020-04-24T03:50:45.848Z] 03:50:45     INFO - GECKO(1231) | [ACTION] NODE_EXPAND  - {}
[task 2020-04-24T03:50:45.864Z] 03:50:45     INFO - Finished waiting for state change: paused
[task 2020-04-24T03:50:45.865Z] 03:50:45     INFO - GECKO(1231) | [ACTION] SET_EXPANDED_SCOPE  - {"type":"SET_EXPANDED_SCOPE","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":3},"thread":"server0.conn114.child2/thread21","path":"originalActor0-2","expanded":true}
[task 2020-04-24T03:50:45.907Z] 03:50:45     INFO - Finished waiting for state change: paused
[task 2020-04-24T03:50:45.908Z] 03:50:45     INFO - Waiting for state change: fetched frames
[task 2020-04-24T03:50:45.908Z] 03:50:45     INFO - Finished waiting for state change: fetched frames
[task 2020-04-24T03:50:45.908Z] 03:50:45     INFO - GECKO(1231) | [ACTION] NODE_PROPERTIES_LOADED  - {}
[task 2020-04-24T03:50:45.963Z] 03:50:45     INFO - Waiting for state change: selected source
[task 2020-04-24T03:50:45.964Z] 03:50:45     INFO - Finished waiting for state change: selected source
[task 2020-04-24T03:50:45.965Z] 03:50:45     INFO - GECKO(1231) | [ACTION] EVALUATE_EXPRESSIONS  - {"type":"EVALUATE_EXPRESSIONS","cx":{"navigateCounter":0,"thread":"server0.conn114.child2/thread21","isPaused":true,"pauseCounter":3},"inputs":[],"results":[]}
[task 2020-04-24T03:50:46.966Z] 03:50:46     INFO - Get token at 20, 15
[task 2020-04-24T03:50:47.463Z] 03:50:47     INFO - Hovering on token aDefault
[task 2020-04-24T03:50:47.465Z] 03:50:47     INFO - GECKO(1231) | [Parent 1231, Main Thread] WARNING: Please do not use mouseenter/leave events in chrome. They are slower than mouseover/out!: '!nsContentUtils::IsChromeDoc(d)', file /builds/worker/checkouts/gecko/dom/events/EventListenerManager.cpp, line 340
[task 2020-04-24T03:50:47.465Z] 03:50:47     INFO - GECKO(1231) | [ACTION] START_PREVIEW  - {"type":"START_PREVIEW"}
[task 2020-04-24T03:50:47.535Z] 03:50:47     INFO - GECKO(1231) | [ACTION] SET_PREVIEW  - {}
[task 2020-04-24T03:50:47.597Z] 03:50:47     INFO - Not taking screenshot here: see the one that was previously logged
[task 2020-04-24T03:50:47.598Z] 03:50:47     INFO - TEST-UNEXPECTED-FAIL | devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-toggle.js | undefined assertion name - Got "a-default", expected undefined

https://hg.mozilla.org/mozilla-central/rev/940c615059f4

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #0)

But, it should be visible all the time - even the left side bar is closed.

I'm not seeing this behavior (assuming you meant "right" side bar). When I collapse the Breakpoints pane, the gear icon disappears along with the breakpoints toolbar icons. Should I file a new bug?

When I collapse the Breakpoints pane, the gear icon disappears along with the breakpoints toolbar icons. Should I file a new bug?

That's a trade-off we made to simplify the UX as we don't have a full-width toolbar. We assume most Debugger users don't have the breakpoints panel collapsed.

Updated the Toolbar screenshot and description in the debugger UI tour article.