Giter Site home page Giter Site logo

mosaic's Introduction

Mosaic

Web browser that can display multiple web pages at the same time in one shared window. A tiling web browser.

Latest release: 0.0.3
Download · Changelog


Value proposition

The main value of using Mosaic over Chrome with builtin macOS tiling can be seen on this non-exhaustive list of tasks that often pop up when you want to use web in a tiling fashion:

  1. Task 1 – create a 1:2 splitscreen from a single fullscreen window containing two tabs
    • Chrome on macOS – video, 12 seconds
      1. turn-off fullscreen
      2. tear off one tab into a window
      3. hold cursor over green (maximise) window button
      4. select "Tile window to the left side"
      5. choose the second Chrome window to fill the rest of the screen (right side)
      6. resize via the splitter between the tiles
    • Mosaic on macOS – video, 6 seconds
      1. drag out a tab to the wanted place
        • 🤬 the animation is extremely choppy
      2. resize via the splitter between the tiles
  2. Task 2 – interact with unfocused tile and repeat
    • Chrome on macOS – video, 5 seconds
      1. move cursor over unfocused tile
      2. click on the unfocused tile to focus it
      3. click on the interactive element
      4. [repeat]
    • Mosaic on macOS – video, 2 seconds
      1. move cursor over unfocused tile
        • 🤬 tile did not change the appearance to communicate focus
      2. click on the interactive element
      3. [repeat]

Features

  • Documented Design Decisions
  • Blink rendering engine
  • Written in Typescript using React
  • Intuitive drag&drop tile managment
  • Built-in DuckDuckGo search engine
    • auto suggest while typing
    • use !bang for advanced searches
      • e.g. "!g hello" to google for "hello"
  • Minimalistic dark look
  • Dock
    • drag out icon from dock to make a new tab
  • Automatic zoom-to-fit of webpage
  • Familiar shortcuts for tab managment (⌘T, ⌘W)
  • Built-in privacy
    • Adblock (uBlock Origin)
    • Blocking cookie consent non-sense
    • No history
    • HTTPS everywhere
  • System keychain integration

Development

Requirements: Git, NodeJS, Yarn

Clone repository and install project dependencies:

$ git clone https://github.com/mlajtos/mosaic.git
$ cd mosaic
$ yarn

Live development

$ yarn dev

mosaic's People

Contributors

dependabot[bot] avatar marc2332 avatar mlajtos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

mosaic's Issues

Enable horizontal scrolling

Stack app has a very useful functionality - horizontal scrolling of opened web apps (see the scrollbar at the bottom):

Stack

However, it is closed source. Can Mosaic have a similar feature?

Mosaic's CI

I was looking at the logs when the CI was failing (https://github.com/mlajtos/mosaic/runs/1015926152?check_suite_focus=true):

imagen

And saw the issue appeared when it was building for pacman, so I tried removing pacman as target, and it worked: https://github.com/marc2332/mosaic/runs/1023121099?check_suite_focus=true

On a "normal" ubuntu, it would need external dependencies to build for RPM and Pacman, but for some reason Github already provides these, at least to build for RPM, I am not sure if for Pacman too

Zoom-to-fit behaviour

There is an automatic zoom-to-fit behavoiur, but works only on page load. It should also react to resizing. And in case, add button to trigger it manualy.

Interested in contributing

Hello!

I just found mosaic... and I am pretty amazed by the idea!

Is there any Discord server for it?

I would like to contribute, I have experience with Electron and a bit with React 😄 👍🏻

The gif of 10 MB cause a crash in the browser

I have a 960 MB RAM capability on my computer, and the GIF of approximately 10 MB, consumes 400 MB or more in the browser, this is like 50%.

I'm using Basilisk ... The temporary solution was blocking it with uBlock.

When reporting the problem the browser they tell me that it is a bad idea to have a GIF over 1 MB.

https://forum.palemoon.org/viewtopic.php?p=221715

In Viewnior it works correctly. Anyway, if I deactivate uBlock, the problem is again.

Maybe it's better other format, such as webp/webm or mp4 on a link.

New name for the project (please suggest)

A lot of people voiced the issue of Mosaic name being taken by the famous NCSA Mosaic browser that defined an era of web browsing. This name collision was intentional, as stated in the Design Decisions doc, and was meant to pay tribute to the mentioned NCSA Mosaic browser.

@niutech voiced a good points in #24 that made me think about this issue and decided to start a conversation about name suggestions.

Frameless window on Windows and Linux

Windows and Linux does not have embedded window controls as macOS have, so it looks broken. Frameless window should be used only on macOS.

Screenshot:
90051642-482a4d80-dcd8-11ea-8328-91d89eaf6af4

Linux support

[ ] setup Github Action for Linux packages (DEB, RPM)
[ ] get package to AUR (somehow)

Add Contribution document

Rules:

  • PRs should contain isolated functionality
  • code was auto-formated using Prettier (there is no config for it)
  • PR must be linked to an issue
  • PR must contain ´CHANGELOG´ message if it affects the user

How do I toggle the sidebar?

How do I toggle the sidebar?
If this isnt already possible would you consider adding a keyboard shortcut for this (perhaps ctrl+b)

Back/Forward shortcut

It is very tiresome and slow clicking the back/forward button.

Back: CtrlOrCmd+LeftArrow, 2-finger left-to-right swipe on the touchpad
Forward: CtrlOrCmd+RightArrow, 2-finger right-to-left swipe on the touchpad

Keyboard Tile Controls

Currently, atleast as far as I can tell there are no methods of changing focused tile, or resizing with just keyboard alone. Something akin to tiling window managers.

alt + r or ctrl + r could put you into resize mode then you could use arrows to expand in a given direction by fixed unit count.
alt + arrows could move tile focus around.
alt + shift + arrows could swap tiles with the tile in the given direction.

Display thumbnail on tab drag and tab hover

Right now, while dragging tab, there is a transparent frame that should contain webview preview.

The same preview should be visible when hovering cursor over a tab. (Alternative: temporary activation of associated tile)

Either way, ´PageState´ should contain result of webcontents.capture() and display it in ´Tab´ (through portal).

Stack app features

Stack is an interesting new web browser, which allows you to browse web apps/pages in workspaces and columns. However, it is closed source and freemium. It would be great to have an open source alternative to it and your project is a good starting point. Would you mind adding some useful features from Stack, such as:

  • stacks (switchable on the left sidebar)
  • workspaces (switchable at the top left corner)
  • multiple accounts
  • horizontal scrolling (issue #28)
  • suspending inactive tabs
  • temporary ghost pages
  • desktop notifications
  • fullscreen support
  • auto refresh

Thanks!

Finding a text in the page

Motivation

Finding specific text in the page is a must-have feature. Without it, one can't use Mosaic on a daily basis, hence can't take advantage of the tiling in every situation.

Design

Proposal A

Search bar for a specific text in a page can be integrated into the omnibar. !bangs are an extremely good abstraction for the search queries, and searching text in a page fits this category. Having a !page or !inpage pseudo bang would trigger a special mode for omnibar (or toolbar) that would add necessary buttons (previous match, next match).

Proposal B

Copy and refine existing design from prior art.

Prior art

Firefox

Searchbar takes full width of the view below the website.

disabling-Firefox-find-bar-page-dimming-and-highlight-all-features
(source: https://techdows.com/2016/09/disable-firefox-find-bar-page-dimming-highlight-all-features.html)

Safari

Search bar takes full width of the view and pushes the website down.

Find_on_page_bar_and_matches_on_safari_browser_mac_computer
(source: https://browserhow.com/how-to-search-text-and-find-on-page-in-safari-mac/)

Chrome

Search bar is compact and floating above the page.

browser-will-find-this-word-on-page
(source: https://rocketfiles.com/articles/how-to-search-for-a-word-on-a-web-page-chrome)

Vivaldi

Search bar takes whole width of the view and is aligned to the center.

Find-in-Page-example

(source: https://rocketfiles.com/articles/how-to-search-for-a-word-on-a-web-page-chrome)

Relevant documentation

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.