Open CSS File


To complete the launch of the project as an open source, we have left to include some more documentation (Contributing guidelines and Code of conduct).
We have decided to leave this at the moment and come back to it later (this is about documentation so the writing can be split between the two of us) So, we preferred to continue developing the next feature.

As we mentioned, we want to support preview display of CSS file by opening it in a new tab (when clicking on "open new tab" button).
We saw that CSS file can be referenced with a full (web page) URL or with a path relative to the current web page (learned this from HERE).

Examples:
  •  A full URL link: <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
  • A CSS file located in the HTML folder on the current web site:  <link rel="stylesheet" href="/html/styles.css">
  • A CSS file located in the same folder as the current page:  <link rel="stylesheet" href="styles.css">
**NOTE: This is the way to link a remote CSS file from an HTML file. For now, we support only CSS files that are inside of a " or ' , like those examples.

So, for start, we created a function for extracting the selected path. We start with searching for a “.css” extension closest to the current position (once again, only if we yet to find the correct URL).  

Than we made sure there were no white spaces in the extracted path. If there are any white spaces, then the cursor is not standing on a css path (explained that issue before).
**NOTE TO SELF: For now, we asume that there a not white spaces in the folders/files name in the path. We will need to address that in the future.

Once the path we extracted is valid, we use the split function to separate the path (by " or ' characters) into an array so we can easly extract the path.
We go over each element in the array to extract the CSS file path (by searching for the cell with the ‘css’ extension) and update the value of foundUrl.url to that value.


Also, we added a function for creating a proper markdown string that allow the option for open in a new tab. We also update the value of previewObject.makeMarkdownString to that function (so this feature will also imlement the interface). 

  
In addition, we started working on the function of opening the CSS file for display.
Problems: we don’t know where the file is located relative to the current folder location. It is located in the current folder the user is working on? Is in the folder one level above/under?

Also, we realized we don’t need the "newTabCommand" in that case (we just need to open the CSS file and not a webview panel), so we knew we will need to deal with that later, and probably register a new command.

Therefore, in order to handle locating the CSS file relative to the current folder location, we used the split function again to split both paths (one for the current working path and the another for the extracted URL path).
We saw that there are 4 ways of writing the path location (took from here)


We started dealing with the case that the CSS file is in the same path of the current working folder (the first one in the image above). 
We had the current working file path and the CSS url file path after split each to an array.
Also we know that in that case the length of the CSS url file path array is one (just the name of the file).

The current path includes the current file (so it will be place in the last cell in the split array), so all we needed is to override that cell (from the current working file path) with the CSS file name.
(the current working path has the full path, so instead open current file we create new path ending with the CSS file name).
After we updated the array, we used the "join" function to create a new updated path string.
Than, we needed to open that file. To do so, we converted the extracted file path string to vscode.uri (learned from this stackoverflow question).
After that, we opened the file in a new tab (learned from this this stackoverflow question) as so:



* We defined that the file we open in a new tab beside the current file (like the webview does).To do so, we sent vscode.ViewColumn.Beside as a parameter to the "showTextDocument".

So what we did so far was:
1. extract the url of the CSS file ("extractCssUrl" function)
2. make a markdown function that implement the interface we created previously
3. if a CSS url is found, place that function as the current "getMarkdownString" function (interface function). You can see that placement in the first image, one line after the red box.
4. imlement a function that opens the CSS file. For now we only implemented the first relative path example.

The next thing was to try and debug what we wrote. To do that, we defined that the webview command will be called (from the markdown function).
As we explained before, the webview command invokes the interface "getHtmlContent" function.

So, like (3), we placed our "openCssFile" as the "getHtmlContent" (both functions placement is happening in "extractCssUrl").
When debuging this, the CSS file did open, but also an empty webview has opened.
This has happened because of the webview command definition:




You can see that we create a new webview panel every time we invoke that command.
We don't need that, so we decided to create and register a new command.
This command will call the "openCssFile" we made.



Now, we can associate that command with our markdown function like so:



Then, we continued to implement the "image/image.png" and "../image.png" examples:




EXPLANATION:
In those two examples, the split will creat a 2 cells array: ["image","image.png"] or ["..","image.png"].

  • If it's the first option (the "else" in the green box): we need to override the last cell of the current path (which holds the current file's name) with the folder's name (in the examle: "image" folder), and add another cell with the CSS file name (in the examle: "image.png" file).
  • If it's the second option (the blue box): we need to override the  second to last cell of the current path (which holds the current file's mose internal folder) with the CSS file name (in the examle: "image.png"). We dont need the las cell so we overrode it with an empty string.


WHAT IS LEFT TO DO IN THIS FEATURE?

  1. Support a white space in the folders and files name.
  2. Support more difficalt path versions than those examples. (optional)
  3. Support the "/html/styles.css" format.
  4. Support the "https://www.w3schools.com/html/styles.css" format. (optional)




Comments

Post a Comment

Popular posts from this blog

Turorial- How to add a new feature

Image
In this Post we will explain how to make and integrate a new feature to our extension. ** ALL VARIABLES EXPLANATIONS ARE AT THE BOTTOM Let's say we want to support text files. The first thing we will need to do is to create a new file- we name it "TextObject". We then import the "utils" and "IPreviewObject" files. We create a new (export deafult) class caled "TextObject" which implements IPreviewObject. Now, we need to implement the interface's 3 functions: 1. validatePotentialUrl- we check if the current potential URL has a ".txt" extension. if so- we update the current URL to the potential URL, and the currentPreviewObject to a textObject. 2. GetHtmlContent- returns an empty string because we dont need a webview panel for this feature. 3. makeMrkdownString- this function will need to create a string that will allow to open a text file in a new tab when clicking on a certain button. To do so, w...
Read more

Little Bug Fix

Image
After the big refactoring and redesigning we made, there are a few more things we have left to do: 1. Currently, once the cursor is on a certain URL, the hover panel will change accordingly. So, if we hover over URLs that the cursor is not on them we will still be presented with the last hover panel that was created. That is a bug and we need to fix it. 2. We need to make a unit testing (we dont know how to do that, so we need to learn a bit more) 3. Try and use other VSCODE extensions to support previewing PDFs and HTML (the web page, not the HTML file). To fix (1) we added a new condition to the "push" call (in the activate finction, in extension.ts). We check if the line the cursor is on is the same as the line we hover over. If so, call the "updateHoverPanel" function (which makes a markdown string for the hover panel according to the current URL format). If not, update the hover panel content (the markdown string) to an empty string. W...
Read more

Publishing First Beta & Refactoring The Code

Image
We figured it was time to publish a first beta of our extension to VSCODE marketplace. We made some little adjustments like renaming some variables, for more readable code, and fixed a few major bugs, and then we published it using this tutorial .  You can find our extension on this link . *A big bug we had was that the last hover panel continude to show when hovering on defferent lines that are not a URL. Our problem was fixed by updating the current URL variable to UNDEFINED and the markdown string to an empty string, like so: Now that we published our first working extension, we wanted to focus more on the code and the design. Firstly, we decided it would be smarter to extract the relevant line and check what is it's format rather then what we made so far- which is to send the whole document to each extraction function. We created a new function called "extractCurrentLine" which does the following: 1. The function receives the document text ...
Read more