Jak przywrócić klasyczny widok w Obrazach Google

24 lipca trafiłem na post na Reddicie. Ktoś szukał rozszerzenia, które cofnie ostatnią zmianę wyglądu Google Images.

Google zastąpiło uporządkowane, poziome rzędy zdjęć układem masonry. Obrazy dostały różne wysokości, pionowe miniatury zaczęły zajmować sporą część ekranu, a całość stała się trudniejsza do szybkiego przeglądania. Autor posta nie próbował ubierać tego w język projektanta UX. Napisał po prostu, że nowego widoku nie lubi, nie zamierza się do niego przyzwyczajać i przestał przez niego korzystać z Google Images.

Na końcu zostawił właściwie gotowy brief: przywrócić poziomy układ i nie zepsuć przy okazji rozszerzenia uBlacklist.

Pomyślałem: dobra, to przecież będzie kilka reguł CSS.

Nie było.

Pierwsza wersja wyglądała dobrze przez kilkanaście sekund

Samo ustawienie miniaturek w poziomych rzędach rzeczywiście nie było szczególnie trudne. Problem zaczynał się chwilę później.

Google Images nie działa jak zwykła, statyczna strona. Kolejne wyniki pojawiają się podczas przewijania, fragmenty interfejsu są podmieniane bez pełnego przeładowania, a struktura dokumentu potrafi się zmienić zależnie od zapytania i testów prowadzonych przez Google.

Pierwsza wersja rozszerzenia układała poprawnie zdjęcia widoczne po otwarciu strony. Potem wystarczyło przewinąć niżej i porządek znowu zamieniał się w przypadkową ścianę miniaturek.

Potrzebny był obserwator zmian w DOM, który wykrywa nowe wyniki i poprawia ich układ na bieżąco. Bez przeładowywania strony i bez zauważalnego migania interfejsu.

Od początku zależało mi też na tym, żeby rozszerzenie nie próbowało budować własnej kopii Google Images. Nie usuwa więc wyników, nie przenosi ich do osobnego kontenera i nie podmienia całej strony. Rozpoznaje istniejącą strukturę i zmienia sposób jej wyświetlania. Dzięki temu natywne funkcje Google nadal działają, a dodatki takie jak uBlacklist mogą robić swoje.

Skoro już przywracać stary widok, to razem z użytecznymi drobiazgami

Po uruchomieniu poziomych rzędów zacząłem dodawać rzeczy, których sam brak odczuwałem.

Podgląd obrazu po najechaniu kursorem pozwala szybko sprawdzić zdjęcie bez otwierania kolejnej strony. Przycisk View Image prowadzi bezpośrednio do pełnego pliku. Dodałem też szybki filtr rozmiaru oraz opcję ukrycia bloków podobnych wyszukiwań, które potrafią zajmować sporą część ekranu.

Wysokość rzędów i odstępy można zmienić w małym panelu rozszerzenia. Każdą dodatkową funkcję da się osobno wyłączyć. Ustawienia zapisują się przez mechanizm synchronizacji Chrome, ale samo rozszerzenie nie wysyła zapytań, historii przeglądania ani innych danych na zewnętrzny serwer. Takiego serwera zresztą nie ma.

Najwięcej zabawy sprawił przycisk prowadzący do oryginalnego obrazu. Google nie zawsze zostawia jego adres w wygodnym, gotowym linku. Czasem trzeba go odzyskać z danych osadzonych przy wyniku, a potem upewnić się, że kliknięcie prowadzi do zdjęcia, a nie do strony z kolejną warstwą interfejsu.

To był ten moment, w którym „kilka reguł CSS” oficjalnie przestało być kilkoma regułami CSS.

Od posta na Reddicie do Chrome Web Store

Tak powstało Classic View for Google Images. Rozszerzenie przywraca poziome, wyrównane rzędy, zachowując naturalne proporcje obrazów. Działa podczas przewijania i nie wymaga odświeżania strony po zmianie ustawień.

Po testach i przygotowaniu polityki prywatności wysłałem je do Chrome Web Store. Jest już dostępne do instalacji:

Pobierz Classic View for Google Images z Chrome Web Store

Nagrałem też krótki film pokazujący konfigurację i działanie rozszerzenia. W tym przypadku różnicę znacznie łatwiej zobaczyć niż opisać.

Projekt nie zaczął się od analizy rynku ani listy funkcji zapisanej w Notion. Zaczął się od jednej osoby, która napisała: nie chcę się do tego przyzwyczajać.

To wystarczyło.