Ok perfect. So what I do in these situations where I don’t know where to find a certain part of the frontend application is that I open up my browser console and select the most unique element in the component. From there I search for the most unique HTML or CSS class. For example in the sidebar I’d pick the class sidebar-content
. If possible I’d pick a class having a js-
prefix which indicates an element with JS enriched functionality. After I picked a reference string I search the codebase for it. Usually I limit the search to the matching filename extension:
*.eco
when searching for HTML strings
*.coffee
when searching for JS related code
*.rb
when searching for ruby/backend functionality
My search leads me to the file app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
. This is the actual HTML template I was looking for. Now I want to know where this templated is filled with the data. For this I need to take the part after app/assets/javascripts/app/views/
without the .jst.eco
file extension. Now searching for generic/sidebar_tabs
with the limitation to JS files (*.coffee
) I find that the template is used in the file app/assets/javascripts/app/controllers/_application_controller_generic.coffee
on line 737
(current state of develop / f50c079df955118c643c17257a54b063eb32b894
). Looking around I see an array of itemsLocal
getting passed into the template rendering logic as argument items
. This array is filled some lines above with calls to a sidebarItem()
. Searching for sidebarItem
with file extension filter *.coffee
leads me to a list of search results. Reading the names of the found files indicates that app/assets/javascripts/app/controllers/ticket_zoom/sidebar_customer.coffee
is the file that I was looking for. It is responsible for rendering the customer sidebar element in the ticket zoom.
This search goes on and on until I hit the spot I was looking for. Sometimes I need to add some console.log
or debugger
statements to find my way.
One note: I strongly advise you to have a dedicated test system (in developer mode) to have the easiest developer experience and not risking your production environment.
I hope this helps in any way.
Bests,
Thorsten