Edit Js and Html Files Through Browser - Client Side

I am trying to understand which files everybody can edit through the browser to understand what the risks of running some code in the client-side.
For example I saw in one site(In Chrome):

The gray file is read only file and the yellow one can be edited.
My questions are:

1.What's the difference between the yellow and the gray? why the gray is read only?
2. Is it still possible to edit the yellow one in other ways? Maybe not through the browser? Whats the options to edit files in the client side?
3.Which files can be edited and which not?(js,css,html,aspx... What's all the options)
4.Is there a way to know if someone change the html or js files and look at the changes he did? save logs of the changes or something like that?