Organize modules using subdirectories
Background / User story
We introduced modules for both our CSS and our JavaScript code but so far we added all those modules in the same directory which makes it more and more difficult to navigate around the repository and find what you're looking for. As a workaround for that, we've been using file names such as popup.notifications.js that imply this hierarchy.
However, we can instead use subdirectories to make this hierarchy clearer and to make it easier to enforce this convention.
What to change
- Design: N/A
- Research: N/A
- Spec: N/A
- Legal: N/A
-
Development:
- Establish the following directory structure in the "css" directory:
- pages/
- desktop-options
- first-run
- issue-reporter
- popup
- light
- web
- pages/
- Establish the following directory structure in the "js" directory:
- pages/
- desktop-options
- first-run
- issue-reporter/
- index
- report
- steps-manager
- popup/
- index
- notifications
- toggle
- utils
- api
- dom
- pages/
- Update references within modules accordingly
- Update references in package.json accordingly (i.e. for bundling, linting, etc.)
- Establish the following directory structure in the "css" directory:
Hints for testers
A bunch of files have been moved around so none of the following pages should be obviously broken and no errors should be shown either:
- Day1 landing page (incl. icon popup dummy that's embedded in there)
- Desktop settings page
- Filter composer
- First-run page
- Icon popup
- Issue reporter
- Problem page (i.e. page shown to users with data corruption)
- Updates page
Specifically, the following parts of the UI should continue to work:
- Adding a filter list by URL in the desktop settings page
- Using the issue reporter
- The following features in the popup:
- Block element button and dialog
- En-/disable toggles
- Share feature
- Showing notifications
Hints for translators
N/A
Integration notes
N/A