Feedback, auto indent weirdness, and missing CSS function

[joyously]

I discovered phcode last week and installed Release 4.0 build 4.0.3-20878 on Ubuntu Studio 24.04.
At first, I couldn't select any text, since there were always MDN boxes popping up, in the way. I think I got those turned off by disabling the built-in extension, but it took me awhile to figure that out.

I installed some of the extensions I used to use with Brackets, but when I started to work on a HTML file, the auto indent was all wacky. I disabled most of the extensions I had added, and a few more of the built in ones, but it still puts a random number of tabs at the beginning of a new line. I thought maybe it was related to the type of code, and it seems to be, but still not making sense. With the settings at Tab size 2 and Auto, I tried it in HTML, a script inside the HTML file, and a CSS file.
In HTML context, a newline usually produces 5 or 6 tabs instead of matching the line before it. In JS lines in HTML file, it gives 5 or fills the new line with tabs. In CSS, I get no tabs, even on lines that are already indented (although those might be spaces; I can't find the way to make spaces visible).

The preview is not rendering all of my radial gradients, which use custom properties (CSS variables). It does some though. Annoyingly, the default is one file visible, so I have opened the HTML file and see that there are issues. But switching to the CSS file to see what is different about the ones not showing, of course the preview goes away. I tried the Horizontal Split and followed the prompt about opening a file when that was in focus, but it would only open it in the top pane. I'm not sure how I got it to work (I think I chose File - Open on a file that wasn't already in the top).
The conical gradients aren't showing either. All of them work in Firefox and Brave.
I opened the CSS file from the external file manager, but it came up in phcode. I read another discussion here complaining that the editor had changed the file associations. But I've seen that on my system for a long while. I think it's the OS, not the application.

I had looked into the console for errors, trying to find why the gradients weren't there. I saw a bunch of errors about not being able to load some sort of json file (I think these are old extensions), and some "couldn't find the dom for tauri/my file", and "Error thrown in tern worker: undefined is not an object" on a JS file that isn't open. It's annoying that the X to close the console is on the left (not following system) when the split window X and the search X matched the system ones.

This screenshot is phcode preview on the left and Firefox on the right.
Looking at it, I realized it might be because I used a fairly new color function on the ones that aren't working. And when I switched to the CSS file to see which one, the editor has frozen. I tried closing the preview (no luck), switching back to the HTML file (no luck), moving the window (it redrew it, all white, still stuck), clicking the X(no response). I had to kill it from Task Manager. When I restarted phcode, it was in the default project, not my project.

I see that the color function I used is lch(). When I assigned normal colors instead, I see the phcode preview is working.
I also see that hovering on any radial gradient line in the CSS file pops up a gray square, which is not helpful.

[abose]

Thanks for the detailed notes, @joyously! Let me clarify a few things to help troubleshoot:

1. MDN popups
   Phoenix Code doesn’t show MDN docs on hover by default. Could you confirm if what you saw were MDN popups, image previews, or something else appearing on hover? That’ll help us narrow down the issue.

2. Tab/Space detection
   We have automatic tab/space detection that estimates the correct indentation style when a file is opened. By default, it starts with 4 spaces, but adjusts based on the file’s content. You can customize this behavior here: https://docs.phcode.dev/docs/editing-text#auto-space-detection.
   If the detection isn’t behaving as expected, could you attach a sample file where it happens? That will helps debug.

3. Gradient preview issue
   On Linux, Phoenix uses Safari/WebKit as the preview engine. So the preview you’re seeing is exactly how Safari would render your code — and since Safari doesn’t yet support some newer CSS features (like lch() and certain gradient types), those won’t display. Firefox/Brave have broader support, which is why they render correctly there.
   You can also detach Live Preview to run in any browser if you want: https://docs.phcode.dev/docs/Features/Live%20Preview/live-preview#selecting-a-browser-for-live-preview.
   (On Windows, Phoenix uses Chromium/Edge for Live Preview, so the behavior differs there.)

4. On the crash/freeze
   When Phoenix closes due to a crash or hang, it intentionally switches back to the default project on restart. This is to prevent a loop where a specific project causes the crash, and then Phoenix keeps crashing on startup because it auto-reopens that same project. We added this behavior after some users reported being locked out of Phoenix entirely when a large project triggered a crash(very rare, but possible). Opening the default project ensures you can always get back in, and then reopen your project manually once things are stable.

Hope this helps clear things up! Let us know if these notes address your concerns, or share an example file so we can dig in further.

[joyously]

1. Could you confirm if what you saw were MDN popups, image previews, or something else appearing on hover?

No, it's been more than a week, so I don't remember the actual sequence of events. I do know there were some MDN popups which kept obscuring my HTML (which has no images), and that I went on a search through the preferences for anything to affect it, finally finding that there was an extension. When I look now, I see that the MDNDocs extension is listed under Defaults, and mine shows as Enabled, so either there is some other popup box stuff or I found some setting to turn it off.

2. If the detection isn’t behaving as expected, could you attach a sample file where it happens?

That link didn't help. I toggled to Fixed and back to Auto, but it still puts random numbers of tabs on a new line. I don't want to give you my file, but it is plain HTML at the top with some JS in a script tag near the end. I don't want the formatting of Beautify either. The CSS file is just CSS, and it wasn't indenting at all.
I see you didn't mention how to show visible spaces.

3. On Linux, Phoenix uses Safari/WebKit as the preview engine.

No wonder the installation package was so large. Thanks for letting me know I have a way to test for Safari now... but even if I select Firefox to use, I can't look at the CSS file and see the preview.
Does your choice of preview engine dictate the console close X following the system or not? How about the hover preview of the gradients that don't use lch()?

4. When Phoenix closes due to a crash or hang

But why did it crash? An unknown CSS function shouldn't affect it. And it is working today on that same file (and before I wrote it up). "couldn't find the dom" seems severe, but there were a lot of those in a row. And why is there a worker looking at a file that I didn't open?

[joyously]

I just wanted to say that I booted into my older distro, and ran Brackets. I did have it set to preview in Firefox, and when I viewed another HTML file, the preview switches to it, but viewing a CSS file does not affect the preview.
Since I was looking at all the menus to see the differences, I saw that I could open another window, like my browser, so that to me is better than splitting the window in half.
But, once I came back to phcode, I had trouble with the Replace.
I was trying to rename some CSS classes. I used Ctrl-h, and it wouldn't find anything if I included a space. That seems pretty useless. If I select the text and the space, and then hit Ctrl-h, it highlights the matches, but the text in the Find box does not have a space, so it wouldn't replace it correctly. Oh, I take that back, it replaces the space, but selecting it is the only way to get it in there.

[joyously]

I'm pleased to report that the web engine supports lch() after all. What it doesn't do, however, is accept a calc() for more than one of the variables. I was changing lightness and hue. When it's just lightness computed, it works fine.

[abose]

Thanks for the clarifications, @joyously. A few notes:

1. Popups on hover
   The built-in MDNDocs extension doesn’t actually show popups; it only adds a Docs panel when used. So what you saw was likely from another installed extension. If it shows up again, checking which extensions are enabled will help narrow it down.

2. Visible spaces / indentation
   Phoenix doesn’t yet have built-in whitespace rendering, but you can install the Show Whitespace extension from the registry to see tabs/spaces.
   On the inconsistent indentation: auto-detect isn’t always perfect in mixed HTML+JS. It mostly works, but in edge cases it may guess wrong. The default assumption is 4 spaces, so if you prefer 2, it’s better to switch to Fixed mode and set tab size = 2 and switch back to auto mode. That way, when auto-detect can’t figure it out, you’ll still get consistent 2/other space results.

3. Live Preview behavior
   On Linux, split view always uses WebKit (Safari equivalent). On Windows, it’s Chromium/Edge. If you want Firefox instead, just pop-out Live Preview. hover over the panel, click the pop-out icon, and it’ll open in your chosen browser. You can also select a browser directly from the toolbar icons.

4. Crash / console errors
   We don’t yet know why it froze. just using lch() or calc() shouldn’t hang the editor. Without the console logs it’s tricky to debug, and I understand it’s hard to capture them if the app crashes. Since crashes are rare and extremely project specific- we observed in the past, its very hard to dedug these, but will try to repro these issues.

5. Find/Replace
   Replace does support spaces. One possibility is that regex search mode (.* button in the toolbar) was toggled on. In regex mode, spaces behave differently, which could explain the mismatch.

[joyously]

Thanks for the followup.
1 tangential.
2 I'm surprised I need an extension for visible whitespace. Auto indent is not working for me, so I have turned it off. I was fighting with it in a CSS file. I added a new line, it didn't indent at all. I tabbed once to match the previous line and typed the selector. When I type the brace, it is matched (not sure if that's an extension), and the indent is removed. I don't remember the whole sequence but it was a hassle to get it how I wanted, so I could paste something in the braces.
3 This is not what I am talking about. In Brackets, I can see the HTML preview, switch the editor to look at my CSS file and the HTML preview is still there. Not so in phcode. I have to use another window or another editor to see the CSS while the HTML preview is up.
4 For the crash, I stumbled across the fact that it was the calc on the hue that was a problem. I later found on caniuse that Safari had a bug on that, but that is an older version, so I'm confused why the editor preview has a problem. Regardless, the same document worked before and after the crash, switching to and from the CSS, so I don't know what was different except I don't usually have the dev tools open in the editor.

5 For Replace, I tried both regex and not, case sensitive and not. It just didn't find anything when I typed a space after the word. I'm pretty good with regex, so I hope I can still use spaces if I need to...