Giter Site home page Giter Site logo

alfs-firefox's Introduction

Screenshot FOSSA Status

Always loaded floating sidebar

The idea for this is to have the sidebar always ready to show, without loading its content everytime we hit the button or shortcut, to open it and show us whatever we have there.

It's quite simply, check the video demo here.

Preferences

The sidebar can be the size you want. You can adjust the preferences in the alfs.prefs.uc.js file.
The preferences file isn't mandatory. If there is not such file then it gonna be use defaults adjusts.

Key Default Info
position Right Attaching side Left or Right
width 24em Sidebar width
heigth 60% Sidebar height
shadow_intensity 0.1 Can be negative too, eg: -0.2 - Disable with -1
keybind_ctrl 1 0= disabled, 1= ctrl, 2= alt
keybind_key 88 Code for the x key. Can check the list with the codes here
classic_mode false To enable it use true - Read bottom for more info
debug false Can be enabled with true
  • Shortcut to open and hide: Default values are for using ctrl + x
  • Classic mode: If you enable this option, the sidebar will not float. Will use the default Firefox behavior but its content keep loaded and shortcut working, so it doesn't have to be loaded every time it is open.

It's draggable

You can move it! Just pressing shift key while clicking on the headerbar of the sidebar.
The new position from that action, it's gonna be attached to the sidebar initial position (left or right side of the window), which you can adjust on the preferences file.

Examples

Combine using with...

  • Tree Style Tab - Manage the tabs from the sidebar
  • Side View - Webs in sidebar. Eg: another Wikipedia article, a Youtube video, WhatsApp/Telegram, etc.
  • Minimap Scroller - Show a scrollable minimap of the actual page.

Note that this draggable feature doesn't save its position for the next Firefox session.
Also can be a bit buggy sometimes.

How to get it

  1. Download alfs-userchrome-*.zip
  2. Copy its files to your chrome folder
  3. Reopen Firefox

Note: chrome its a folder that the user can use to customize the Firefox interface. Read more here.
If you don't have it, just create that. It is located inside your profile folder.

In your Firefox address bar type and enter to about:support. There is 'Profile Directory' information, click 'Open Directory'. That's where the chrome folder should be located at.

If you already have an userChrome.css

  • Copy and paste alfs.uc.js and alfs.prefs.uc.js to your 'chrome' folder
  • Open both .css files (yours and the one from alfs)
  • Copy the content of the .css from alfs
  • Paste the copied code to the final of your userChrome.css

Restart Firefox. about:restartrequired

Webextension companion

You can also install the basic extension companion for alfs which add the functionality of a picture in picture mode that does work on YouTube and Vimeo (at the moment).

It adds a button on the urlbar when on supported sites. When it's pressed, the sidebar will load the video. It's a kind of picture in picture solution.

That's mean you can be on Reddit or the Firefox options page itself, and keep watching a video.


It may contain bugs

Please report issues. Here's my list of pending:

  • Shortcut to open it.
  • Preferences to adjust keyboard shortcut.
  • Don't show urls bottom tooltip

License

FOSSA Status

alfs-firefox's People

Contributors

fossabot avatar thepante avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.