Fix a bug where docking the browser won't open the sidebar

In this Sizzy release, our main focus was upgrading Electron to the latest version.  Related to that, this will also update Chromium to version 100. As a result, now Sizzy has a number of “*behind-the-scenes*” improvements which contribute to a better user experience. 

Upgrade Electron to the latest version

Sizzy

Sizzy 61

We worked really hard and we are really proud of Sizzy's fresh, new look! We redesigned the app to make it simpler, more intuitive and easier to use. 

We really hope that you'll find it more approachable and the new design will encourage you to explore and use more of its features.

<Image publicId="Fungarzione/0a7fe142-f5ea-41fd-933c-dc407e731c57" />


A brand new design 🥳

Based on our survey, it was clear that the main problem with Sizzy is that most users use only a handful of the app’s basic features, despite it supporting hundreds of tools that help developers build software faster. 

The way that all of these buttons and tools were organized and connected made it hard to explore all of the functionality at hand, so Sizzy felt a bit intimidating to use.

## The cleanup 🧹 
We have improved the look of the main toolbar by reducing and simplifying the number of icons and plugins that were scattered around randomly. 

✅ In the middle you will find all the controls related to the URL: like the navigation buttons, bookmarks, etc. Also, now you can see the favicon of a page, and when you hover it, you can see the title of the page.

✅ On the left side, we neatly grouped everything related to Projects, for example, the buttons for opening the project in your code editor or in the file explorer.

✅ On the right side, you'll find the plugins, along with the Photo Studio and a few other helpful buttons

A nice little bonus that we added is individual icons for different code editors 🥳 

<Image publicId="Fungarzione/fa2eb7a1-8971-46b7-889e-b5c37bb2acea" />

> If an icon for your editor is missing, let us know and we'll add it in a future release.

Toolbar cleanup

We reviewed the app’s hierarchy to understand how certain tools related to one another and might be grouped together in a more clear way. 

The URL bar was getting too cluttered, so we had to move certain functionalities in a new toolbar, dedicated to actions related to the Sizzy workspace and devices.

<Image publicId="Fungarzione/6bb2e66a-5bff-4dc0-85e4-a6b0229d7a18" />

The buttons grouped on the left side are all related to features that engage the devices' abilities in a different way. 

The buttons grouped on the right side are all about the alignment and layout of the devices.  

The Workspace Toolbar can be toggled with  <Shortcut other="ctrl, shift, x "mac="cmd, shift, x"/>.

If you want an even cleaner workspace, you can always use Zen mode, by pressing <Kbd>Z</Kbd>.


Workspace Toolbar

We have grouped all the reference controls inside an easily reachable sidebar on the left. This way you can keep your Devices, Tasks, Notes and the Browser open, while you’re working on your project. 

The Left Sidebar can be toggled by pressing <Shortcut other="ctrl, shift, ;" mac="cmd, shift, ;"/>.

<Video publicId="Fungarzione/77d4cc4f-e188-4076-a7f9-c6e284ff26d8" />



Left Sidebar

The biggest change here is that you can have a direct access to any tab in the Debugging Panel, without having to expand it first. We added a keyboard shortcut  <Kbd>cmd</Kbd> + <Kbd>shift</Kbd> + <Kbd>D</Kbd> so you can easily toggle it. 

We moved the window controls and settings for the Debugging Panel to the top right.

In the Debugging Panel settings, you have the option to change the look of the tab content according to your preference. 

<Video publicId="Fungarzione/29d958d7-9db7-4881-b4e2-438417f92a13" />

Debugging Panel

To save your time, we have added a search box inside the Devices Drawer so now you can easily find the one that you need.

The Devices Drawer can be opened only in responsive mode, because that is the only mode that allows previewing multiple devices. And to make it easier for you, we simplified the reordering of the devices by using drag and drop.

<Video publicId="Fungarzione/a388908b-873b-453e-8593-16a20268cbf3" />


Devices Search Box

The Studio is redesigned and has notable improvements in the screen recording area.

<Image publicId="Fungarzione/670a5389-65dd-4cad-966f-f3f9369d509b" />

The Photo Studio

Sizzy 60

The responsive toolbar logic doesn't work reliably

The browser UI of a device is not immediately updated according to the new edited dimensions

Fix multiple issues with inspect element

Fix issues with sync scrolling

Social previews sometimes don't fully reload

Websites in the social tab are not displaying properly

Escape or click out to close modals and popups

Close other popups when opening a popup

Screenshot gets stuck

Sizzy 59

We have added a new efficient way to inspect and modify any element's CSS classes and styles without having to leave Sizzy or dig through DevTools.

<Image publicId="Fungarzione/623d0bec-bf08-40f0-824d-351395fb9729" />

This is super handy when working with Tailwind CSS or any similar CSS library. You can toggle, remove, edit and add CSS classes with autocomplete. All changes are live on the page and you can copy the final list of classes when you are done tweaking.

Find the new **Styles** tab in the debugging panel, and learn more about it [here](https://docs.sizzy.co/styles-panel).  

Styles Inspector

Sizzy 58

GitHub auth is broken

Fix: GitHub authentication doesn't work for new users

Sizzy 57.12

We did a major refactor which will help us ship new releases faster in the future. This also comes with minor performance improvements in the load time of the app.

Glink

kitze / Sizzy

Sizzy 61

Highlights

Sizzy 60

Highlights

Sizzy 59

Sizzy 58

Highlights

Sizzy 57.12

Sizzy 57.11

Highlights