Idea: Replace all script fields with Monaco editor

[jacebenson]

I like the background editor so much, I would like you to consider setting up the monaco editor for all script fields, (and even some others that arent, like, ui action condition field).

If this sounds like something you'd be interestedin let me know.

[arnoudkooi]

I'm ok with a PR if it's not too intrusive. We can check in on Slack to chat about it

[tezdog]

If implemented, please make this optional. Not everyone likes the background editor :) Thanks

[arnoudkooi]

What is the issue your experiencing with it?

[tezdog]

I don't mind it, but my colleague has problems viewing the light text on black background vs the dark text on light background. I'm not sure if they had other concerns with it, I can ask when they return in 2 weeks.

[arnoudkooi]

Ok, the theme follows the setting of the popup theme, so changing that to light would fix this.

[arnoudkooi]

Replacing is challenging, what do you think of this implementation @jacebenson ?

[jacebenson]

It's neat, I'm not sure though. I say push it out and lets see what folks think. :D thanks @arnoudkooi

[VanWeapon]

Love the idea, but I also agree it should be an option to toggle The main use case that comes to mind: When demoing my screen to people, i like to turn most of the obvious SN utils stuff off, like technical names, as it just makes people ask why their SN looks different to mine, and it derails the meeting.

[VanWeapon]

The other reason is that if #134 is still not fixed, then this will remove the small amount of autocomplete capability that there is in the native code editor for FF users

[designedbydave]

I really dig this new feature and including a text editor within the browser! However, I noticed that the theme field in Service Portal themes record does not display the VScode Sync icon no more. This issue is happening in v5.6.0.0. In FF running v5.5.1.4 the issue isn't there.

I've attached two screenshots showing the issue. It was working prior to V5.6.0.0 in Chrome.

[arnoudkooi]

@designedbydave, this should be fixed in the next relaese; 5.6.1.x @VanWeapon You can disable this via settings; please try if autocomplete now works in FF @jacebenson Have you tried? this is the best feasible I would say...

[jacebenson]

I'm trying it out now.

[jacebenson]

I really like it.

[designedbydave]

@arnoudkooi -- I forked the repo, modified the HTML markup slightly to remove the overflow scrolling issue. I also touched up the header a bit.

Edit: I'll keep at it, and make a pull request if you're okay with it.

[designedbydave]

@arnoudkooi - Opened a pull request #190 to fix the overflow issue and adjusted the layout slightly. I also added a class giving the option to pin the header to the footer instead if folks prefer that option. Just don't know how to build it out as a option yet...

[VanWeapon]

In background scripts in FF autocomplete works again, however some issues i noticed with this feature:

I'm on FF dev edition and get a blank white page with some console errors when trying to open the monaco editor

Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.js”. [codeeditor.html:1:1](moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/codeeditor.html)
Loading "vs/editor/editor.main" failed [loader.js:6:4413](moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js)
Error: [object Event]
    E moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:6
    _createLoadError moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:8
    _onLoadError moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:8
    c moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:8
    c moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:8
    triggerErrorback moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:6
    load moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:6
    c moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js:6
[loader.js:6:4462](moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js)
Here are the modules that depend on it: [loader.js:6:4479](moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js)
Array [ "===anonymous1===" ]
[loader.js:6:4536](moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js)
Content Security Policy: The page’s settings blocked the loading of a resource at https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.js (“default-src”). moz-extension:6:11994
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://0b4173dd-a655-4324-ae39-5ff36c7ce735/js/monaco/vs/loader.js
Source Map URL: ../../min-maps/vs/loader.js.map

When on Chrome it works, but i noticed that Client scripts are using Server Side autocomplete rules, and the favicon doesnt load

[arnoudkooi]

@designedbydave Thanks, looks good! @VanWeapon I reverted it for the code-editor, need to look for a different workaround. Maybe we should track the autocomplete for server scripts only in a different issue. When Introducing this for background script, it would only need serverside autocomplete.

[designedbydave]

@arnoudkooi Decided to update the editor a bit, use some of the viewport real estate. Haven't figured why the favicon is broken.

Edit: Once I finesse some of the css, I can make a pull request.

[designedbydave]

Fixed broken favicon, console was through some xss policies. So I added a function in the codeeditor.js to grab the favicon and convert it to a blob.

[arnoudkooi]

Thanks, looks good. Im travelling today but will accept tomorrow (traveling today). Did you check with the light theme as well? Are you on FF, with the favicon issue? I copied the updateRecord function, going forward I would like to use the fetch API rather then XMLHttpRequest

[designedbydave]

I’ll have a look tonight. I’ll make some adjustments before you accept the merge.

[designedbydave]

Made some changes:

• Added an additional property to allow auto resizing of the code editor / browser window
• Updates the CSS to accommodate resize
• Switch favicon function to a fetch, and convert the response to a blob ( I had issues in Chrome loading the Favicon).
• Adds autofocus on the editor when the window loads.

I checked the light theme, it looks good. I wasn't able to test this in FF, I wasn't able to load the unpacked extension for some reason.

Pull Request #193

[arnoudkooi]

Thanks Dave and Jace, Will close this one now