[enhancement] Setting to add bezels to "Responsive Design Mode"
zzAIMoo opened this issue · 1 comments
zzAIMoo commented
I'm not sure it's possible since i've never looked at the source code of neither firefox or pulse, but i was thinking of adding a button in the Responsive Design Mode (Mobile View accessible from the devtools) that would add bezels just like those present in the physical counterpart of the simulators. If anyone can give me some directions on where i could find the files that manage the Responsive Design Mode i would be more than happy to try implement this feature
trickypr commented
Some pointers:
- In Pulse (and, with some settings changes, in Firefox), you can open browser-wide devtools (known as the browser toolbox) by pressing
Ctrl
+Alt
+Shift
+I
. This might be helpful for debugging stuff. - Responsive design has an initialization and destruction section.
- I would recommend against touching the JS code if you can avoid it. Instead try writing a userchrome file. These are custom css files that apply to the browser UI. They are slightly more maintainable than JS changes.
- If you don't want to worry about compiling Pulse, add your userchrome file to this folder, open a PR and ping me. I will hook it up and test it
- You probably want to look into styling
.responsive-mode
and its children. - There isn't any attributes that represent the device type. I can add them if you want, ping me in discord if so
If you want to talk to me, come join the Discord server and say hi. Good luck :)