search

pulse-browser / browser

Pulse Browser: An experimental firefox fork
https://pulsebrowser.app/
Mozilla Public License 2.0
762 stars 44 forks source link

[enhancement] Setting to add bezels to "Responsive Design Mode" #263

Open zzAIMoo opened 1 year ago

zzAIMoo commented 1 year ago

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 1 year ago

Some pointers:

  1. 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.
  2. Responsive design has an initialization and destruction section.
  3. 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.
  4. 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
  5. You probably want to look into styling .responsive-mode and its children.
  6. 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 :)