Customizing Tree View with Different Colors for Various Servers in ftp-remote


#1

Looking for a little direction for two changes to the atom interface. Both are for the tree view in remote ftp

First, do these changes have to be done specifically for remote ftptree view or can a general package of some kind provide this features ot all tree views?

The change is to use different icons for folders in tree view.


The second change is to have different background coiors for every server in ftp remote file tree view. That would make iut easier to know which files I am looking at. Some times I edit the file by the name I am looking for but on the wrong server. You know, like editing LIVE instead of DEV. I hate that. Colored background for the file displays would e huge.
ges are to make the folder icons look like the ones shown in this picture.


#2

That depends on how the individual views are constructed. If they’re based on the built-in tree-view package, then they likely share enough classes to be tweaked using the same CSS. You’re going to have to take a look at the DOM structure, though.

The change is to use different icons for folders in tree view.

You can see an example of this in the file-icons package.

The second change is to have different background coiors for every server in ftp remote file tree view.

This also requires looking at the DOM structure to know if it’s possible. If not, you can certainly submit a feature request for remote-ftp to add the current server name or address as a class on the file tree.


#3

Thank you for responding, very helpful. Is there a feasible way to produce a new tree view, instead of waiting/hoping for someone else to open the door on their package?

I have the impression that everything in Atom is open source, available for forking. At the same time, I can imagine somethings being impractical to try.


#4

Why would you want to do that before finding out if you can change the existing one? I’ve told you how to start doing this. Have you looked into it?


#5

I absolutely do not want to do that before finding out if the existing one can be changed. I asked because I am interested in understanding how Atom goes together. At the time I posted that question, I had not yet found the repo for tree-view. My question was specific to tree view but it was an example of a broader question I had about the extent to which Atom source is available to the public.

I found the repo for tree view, and searched it for DOM. I got back these two references:

As you might surmize, the level I am at with Atom development makes a tutorial called Building your first Atom plugin a reasonable step for me to take. I can see in that tutorial how DOMs can be viewed through browser development tools, but I need to learn how to connect Atom to a browser. That appears to be covered in the tutorial. So, I think at this point I should be able to get answers to what I want to know.

I hope this resolves your confusion about my intentions and answers your questions, but if there is anything more I can do to be of assistance, please do not hesitate to let me know.


#6

I thought of another way of explaining my very confusing question.

When considering the feasibility of any given task, I go through at least two steps.

  1. Is the objective possible? I don’t usually go past this step until I have an answer.
  2. Is it practical?

When I asked about making a new tree view, my question was in the nature of “is it possible?” I kind of figured it is possible to make a new tree view, but I was wondering if it would be possible to replace the tree view in ftp-remote with a different tree view.

Since posting questions about what is possible, I have learned yes, it would be possible to rebuild ftp-remote with a different tree view.

I am glad to have that information.

When you asked why I would do that, you were considering practicality. Practicality is not relevant to the question of what is possible. I was on a different page than practical.

I imagine you knew it was possible. My question to you is why did you not answer the question I asked? What made you assume I wanted to develop a new tree view when it would entail a lot of necessary work for the same result? It is not like answering the question I asked would have taken a lot of time. You could have said, “yes, it is possible. All the source code for Atom and all its packages is available as open source, you can download it all and build anything you want with it.”

Instead you changed the topic in a manner that came across as if you think I should have the same point of view as you. Is this a habit of yours?


#7

All of it.

I can see in that tutorial how DOMs can be viewed through browser development tools, but I need to learn how to connect Atom to a browser.

You’re missing an important piece of the puzzle: Atom literally is a browser. The most basic components of Atom are Node.js and part of Chromium (this combo was spun off as a separate project called Electron and is now being used by a handful of other programs including League of Legends, Slack, Wordpress Desktop, Discord, and many others). Since every Electron app is built on Chrome, every Electron app includes Chrome’s developer tools. In Atom, you can get to them through View -> Developer -> Toggle dev tools or ctrl-shift-i (except on Mac, I think).

Virtually always, yes, because you have a web app that can access your computer’s shell. Very few things are impossible. The important question is the one about practicality.

Because talking about making an entirely new tree view is barking up the wrong tree (view) when the typical means of implementing icons in HTML/CSS is to have a text-based list item and insert the icon character in the :before pseudoclass. You can see an example of that below. It’s also the entire basis for the file-icons package. Since the content is entirely defined in CSS, you can change it with only CSS.

Instead you changed the topic in a manner that came across as if you think I should have the same point of view as you. Is this a habit of yours?

I’m pushing you to the best path for achieving your goal of changing the colors and icons. You don’t need my help to get lost in Atom’s GitHub (I’ve done that a few times), so when you ask about how to achieve a specific objective, I’m going to try to keep you pointed at that objective.


#8

I had read this when I first started using Atom, but it did not sink in. That you for reinforcing the fact that Atom is a browser built with the same critical components any browser has. I can see this is a big deal on a lot of levels. I wonder if this architecture is showing up on mobile devices. When I have worked with them, they always seem to be in other universes.

That amazing to consider. I can add something to what you are saying. This is not just of intellectual value. Atom is terrific in a lot of respects, especially the most fundamental ones. I have been using it about a week and it kicks the doors off any other IDE I have ever used, because it moves quickly, it is not hauling baggage or starting major infrastructure. Just look how quickly it turns on or restarts. There are signs of the software being new, but I am becoming really interested in this whole architecture and I really appreciate you taking time to orient me. Thank you,

oh my gosh! I followed View->Developer->Toggle Dev Tools, and wham

I have to say that looks pretty much exactly like dev tools in Google Chrome or Opera. Some people have definitely put thought into this.

Thank you for explaining that so well, I noticed icon replacement specifically mentioned in the tree view material I found looking for its DOM. My interest in that was driven by side-by-side eyeballing of Atom vs. another system, one of those HEAVY weight IDES…Even though there is a lot to hate in the heavy weight solutions, the tree view on other system has more finished appearance and it looked like the folder icons were the main reason.

The question about color coding servers is a big deal to me. I have clones of projects of multiple servers. Some of them have big file structures and it is way too easy to start editing a live or backup system thinking I am on my dev box. I really honesty hate that when it happens, and has potential to cause serious damage. I think a color coded background of the servers and actually, the editor windows could be be in on this too The terminal software I run has great support for color schemes and I always know exactly which servers i am an never get mixed up.

Ok, I’ll buy that. That explanation is perfect and your whole note here is fantastic and consistent with what yu have explained. For what it is worth, the reason I got snarky back at you relates to experience I have had within our industry. But you, lately, there have some profound changes happening. I think Atom and it architecture is an example. Another one is Let’s Encrypt. Google is putting on some kind of show I don’t know how to characterize it except to say whatever they are doing, they are doing it fast.

You have provided me extremely valuable education. I will try thanking you by using what you have told me to get those features put together


#9

Cousins of Electron on mobile devices include Ionic and Expo. There are a lot of things that the C family is good for, but especially when designing applications that are already interfacing with web content, it makes a lot of sense to write in web technologies these days. Because of how they’re designed, Electron and Atom have some size issues and potential performance pitfalls, but my standard issue 2017 laptop has such beastly specs and good memory management that I can have five Atom windows and thirty Chrome tabs open and my computer doesn’t even blink. So yeah, it makes a lot of sense from where I sit.

I have to say that looks pretty much exactly like dev tools in Google Chrome or Opera. Some people have definitely put thought into this.

It is exactly the same dev tool suite that exists in Chrome, just slightly behind the current Chrome version (Chrome 56, as of this posting, where 63 is current).

Even though there is a lot to hate in the heavy weight solutions, the tree view on other system has more finished appearance and it looked like the folder icons were the main reason.

The Eclipse file tree, as you’ve shared it, includes full-color (probably BMP) icons that more closely resemble the default folder icons used by desktop operating systems than the flat icon font style of Atom’s default. I can see how that would be attractive to some people, but I find it worse. I feel like the flat icons blend better with the rest of the UI and I like how they have the ability to be colored to convey information. My file tree is rich and colorful, but every color on there is meaningful.

If you want to replace the font icons with pictures, that’s doable. I actually have an old CodePen that does pretty much the same thing, inserting the favicon from a site before the link to that site. If you just want to color the folder icons, that’s also doable.

The question about color coding servers is a big deal to me.

So, I took a look at the DOM for the tree view generated by ftp-remote-edit and this is what we have to work with:

I feel like id is probably unique and unchanging, but I don’t know that for certain. It would also be painful to have that hash anywhere you might actually have to read it. And even if it stays the same, it would probably change if you deleted and re-created the server. So the best option is data-host, provided your different servers aren’t on the same host, or data-name if they are. Using the former, you can change the whole background for that item with the following styles.less addition:

.ftp-remote-edit-view li[data-host="google.com"] {
    background-color: darkblue
}

But you, lately, there have some profound changes happening. I think Atom and it architecture is an example.

I’m not a professional developer, but the recent tidal shifts in development have made very complicated projects much easier for people like me. I’ve used multiple editors, periodically trying out a new IDE for some code project and dropping it because I didn’t code enough for it to be worthwhile to learn a piece of software as big as Eclipse or NetBeans that I only tinkered with. Atom, however, is built in languages I already understand and can be as much or as little of an IDE as I want, which turns out to be perfect. It’s expandable in ways that can benefit my non-code writing as much as my programming, so I can use it for everything, and then when I need to code something, I have everything set up the way I like it.

You have provided me extremely valuable education. I will try thanking you by using what you have told me to get those features put together

No problem. I’m glad that the time that I’ve spent on figuring out how Atom works can be used to make other people’s experiences better. That’s part of why I hang out here, to justify the hours I’ve spent just learning about the program. :wink:


#10

Correction to an earlier post, added NOT. I have a habit of dropping that word.

I have been using Atom about a week and it kicks the doors off any other IDE I have ever used, because it moves quickly, it is NOT hauling baggage or starting major infrastructure. Just look how quickly it turns on or restarts…[[[==_

I want you to know, I am considering what you are tipping me off to as the most important, world-changing innovation in software since the day I first set eyes on a computer with a mouse and gui. Before that, there was only text. It happened to be a Mac but that is the point.

I suppose Google search, not to mention Android, Maps, …are more world changing, but this is the first significant change in programming since I started programming in 1979. The Virtual Private Server and Open Source software are monumental in the in the records books for how they affect programming, but in my eyes, I have never seen software done in what I considered a fundamentally different way until I saw what you have shown me in Atom. The browser is being resurrected from what I feared was a tragic demise in progress. The fact this architecture is http-driven, open source middleware in an a form that soaks up the a latest language innovations from all directions, this is so great. I am so glad I know about this. It is only because of you that I do.

Obviously, it will take a little while getting up to speed, but I definitely am going to do it.

I am going to stop complimenting you so much, only because it would come off as weird if I didn’t, but not before restating how much I appreciate your sophistication, expertise and time.

I am sure you know what it usually is like interacting with people at websites dedicated to technology that is unfamiliar. People there are busy and so they cut corners on communication and end up condescending as if the only ignorance in play is the new person’s. The main thing they always explain is you are stupid and the question you have means you are not qualified to have the answer, while the explanations they provide are incompletef. Perfect example. Grav: They had a slogan that they passed off as documentation for installing. “Simply unzip in your [vague term that meant a directory on your hosting account] and Grav will run.” It was true, provided permissions were set a certain way that was not documented. When that came to light, they informed me the assumed permissions were "best practice,: which was true or false, depending on whether your your server has one or more than one developer account.

Anyway, I guess you are a damned scholar, eh? Where I come from we have a tendency to hold that against people, on the grounds that intellectual sounds like a degree deal, and we are dissidents of college degree schemes. Since I have a college degree, my conflict of interest in this matter is limited. You are as solid and solid gets, regardless of your affiliations or reasons for identifying as a scholar. I am damned glad to meet you and I promise not to indulge in long winded stuff this like on a regular basis and when I do, I take no offense for anything you don’t read. Burden is on the writer to be compelling, succinct, and sensitive to their audience. Audience has no obligations…


#11

Hi Dan,

(smile) …reading your last post I think you may want to delve into what Electron is about.
Perhaps give this a read: https://en.wikipedia.org/wiki/Electron_(software_framework).

Regards.



To everyone who reads this…
A blessed Christmas to you.
May you spend the day in good company.


#12

I don’t know if there’s been a demise of any sort. I haven’t been a fan of most of the shift to the browser, mostly because I like having different windows for different applications, but JavaScript has been getting consistently better (and ES 6 has some new features that makes it much easier for a dabbler like me to write) with ever more robust frameworks for doing literally anything. Atom and Electron have shaken up the web app game, but they’re only possible because of projects like Node.js and many web developers pushing JavaScript’s UI capabilities to the point where new features had to be invented to meet the demands of the industry.

I am going to stop complimenting you so much, only because it would come off as weird if I didn’t, but not before restating how much I appreciate your sophistication, expertise and time.

Thank you.

People there are busy and so they cut corners on communication and end up condescending as if the only ignorance in play is the new person’s.

Some of this is justifiable. I don’t follow up on everything I could potentially solve, because I’ve got my own stuff to do. When someone asks a question that’s missing important information, I try to coach them to give me everything I need. If they aren’t excited about the prospect of helping me understand the problem, I don’t generally go out of my way to spend time trying to solve it. When I don’t have the time to provide a solution, though, I usually have time to draw a map to the solution.

They had a slogan that they passed off as documentation for installing. “Simply unzip in your [vague term that meant a directory on your hosting account] and Grav will run.” It was true, provided permissions were set a certain way that was not documented. When that came to light, they informed me the assumed permissions were "best practice,: which was true or false, depending on whether your your server has one or more than one developer account.

I find that sysadmin people have a lot of assumptions about how things are going to be configured, which probably comes from specializing in an area where most of the ground has already been trod and there are very powerful tools with very precise configurations that you have to be attuned to, or else nothing works. Not to stereotype the Grav people, but that sounds like the sort of tool and thought process that would be adhered to by people who got their start in tech by running servers (one-step manual install process for a CMS, provided permissions are just so).

Anyway, I guess you are a damned scholar, eh? Where I come from we have a tendency to hold that against people, on the grounds that intellectual sounds like a degree deal, and we are dissidents of college degree schemes.

I live in a liberal bubble in middle America and both sides of my family have multiple teachers, a high school principal, and the founder of a local college. My sister’s currently in a PhD program for geography. So my cultural background has always valued scholarly work and intellectual rigor. Wild theoretical tangents with dubious practical return are the water I swim in. :wink:


#13

I am glad to learn there is no demise. I thought a demise possibly was in progress

I have some learning to do.


#14

The time finally has come to get going on the color coding of my tree view. I re-read your notes, focusing on what I included as a quote in this post. Many of my ftp-remote servers are on the same host. In fact, many of my servers are just directories within a server. My tree is setup as mixed bag of servers and shortcuts to directories on a server.

I think I can figure out which part of the DOM to select for color rules. However, I definitely am not understanding “styles-less”.

FOCUSED QUESTION
To learn the basics I am missing, I think it would be a good idea to ignore the particulars of how I am using tree view for shortcuts. If it just so happened that all my servers are on different hosts, as in the example you provided, and if it just so happens that YES, the exact change I need to make is to change the background for one of my servers to dark blue, so the change I need is the following styles.less addition:

 .ftp-remote-edit-view li[data-host="google.com"] {
    background-color: darkblue
}

How would I make that styles-less addition? I have really close to no idea whatsoever how to do that in Atom.

If you offer any tips on this, I would be really grateful and it would help me out a lot.

Best regards,
Dan

p.s. Reading this again, I might be able to find the DOM for the tree view, but I would be poking around not really knowing where to find that DOM for the tree view. Maybe if I find it, i will see how to make the change i am asking about.


#15

I think I am somewhat on the trail to the DOM for the tree view here.

I am not seeing the connections very well, between anything in the Atom workspace and the elements in the developer tools, but I am thinking this is in the same galaxy as I need to be looking in.


#16

If you navigate to File -> Stylesheet, a file will be opened for you. You can then use Less syntax to style every part of Atom.

Look in <atom-panel-container class="left">. Keep going until you mouse over an element and the ftp-remote-edit panel lights up in blue.


#17

This is great. Thank you for being so responsive and relevant. Your tips were perfect.


#18

No problem. With your different directories on the same host, do you see that the data-name fields are different?


#19

I did not use data-name. I used element id. This picture shows an example.


#20

Should I look again at the data-name for working with the styles in Atom, instead of the ids?