1538167 - Remove the sidebar-context XUL menupopup from the StyleEditor and use the JS Menu API instead

Status: NEW

(DevTools :: Style Editor, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

We aim to get rid of XUL eventually, which includes removing <menupopup> where we can as well as localization via DTD files.
We can do both of these things in 1 particular part of the StyleEditor quite easily: the sidebar-context menu.

The markup is here: https://searchfox.org/mozilla-central/rev/486b64e4bff86b7988af8c8b80845404ad197533/devtools/client/styleeditor/index.xul#68-73
The goal is to remove this entirely.

Instead, create the menu dynamically from JS whenever needed.
The API we can user here is Menu and MenuItem, in these files:
/devtools/client/framework/menu.js
/devtools/client/framework/menu-item.js

There's an example usage here: https://searchfox.org/mozilla-central/source/devtools/client/inspector/markup/markup-context-menu.js#369

We should do something very similar here for the StyleEditor, and hook up a listener like element.addEventListener("contextmenu", this._onContextMenu); where element would be the sidebar panel, and where _onContextMenu would build the menu content using the API mentioned.

Right now, because the menu is build in XUL, the labels are localized with keys from a DTD file. By doing this, we would have to move the corresponding properties to this file instead.

Comment 1

[piyush.27ranjan]

Hi! I would love to work on this issue. I don't have much experience with XUL but I will learn it if its needed. Can you please assign me to this bug.