gim.org.pl is down || odświeżony jogger (v.0.4) GiMa

Dwie rzeczy drażniły mnie od dłuższego czasu w gmailu, mianowicie brak czcionki o stałej szerokości przy czytaniu i pisaniu wiadomości. Jakiś czas temu postatnowiłem to zmienić, a teraz podzielę się z wami JTZ w Operze.

Opis będzie w miarę dokładny, żeby każdy mógł prześledzić, jak zastosować tą metodę gdzie indziej. Dla ułatwienia (dla leni, którym się nie chce czytać ;)) ważniejsze fragmenty będą wyróżnione.

• 
  Rysunek 1
  
  Rysunek 2
  Jeżeli nie mamy pod ręką watku w GMailu (ja na przykład subskrybuję grupy, więc większość, to maili pojedyńcze wiadomości), to przygotowujemy sobie dyskusję (rys. 1).
• Ponieważ strona gmaila jest w dużej mierze generowana, użyjemy DOM Viewera do analizowania źródła.
  Ja mam owego bookmarkleta jak i różne inne w toolbarze. Kiedy strona załaduje się, klikamy expand tree i show text elements (rys. 2).
• 
  Rysunek 3
  
  Rysunek 4 a
  Następnie szukamy ciągu który występał którejś z wiadomości danym wątku. Jeżeli ciąg jest unikatowy, pierwsze wyszukiwanie znajdzie kawałek skryptu, kolejne, odpowiedni fragment dyskusji (rys. 3).
• Następnie trzeba pooglądać sobie strukturę :) i pozwijać niektóre elementy (przy okazji zauważyłem pewien błąd w dom viewerze, który poprawiłem). (rys. 4a i 4b)
• Widać, że mamy kolejno: warstwę div z id msgs, w której znajdują się warstwy z kolejnymi id: msg_xxx (gdzie xxx to numer wiadomosci) w której następnie są warstwa z klasą mhc, jakaś tabelka, w której jest warstwa z klasą mb (message body, dobrze, że w tej zagmatwanej strukturze, chociaż nazwy są ciut sugestywne), a w niej warstwa z id mb_xxx.
• 
  Rysunek 4 b
  
  Rysunek 5
  Początkowo myślałem o następującej regule:
  • div.mb div div { font: 10pt "Consolas"; }
  jednak, zauważyłem, że podpis generowany przez GPG nie trafia do warstwy, tak więc poprawny css, będzie wyglądał tak:
  • div.mb div { font: 10pt "Consolas"; }
  Ja wrzuciłem go do pliku .opera/gmail.css, następnie prawym w gmailu, Edit Site Preferences, Display, wybieramy zapisany stylesheet. Działa. Pierwszy cel osiągnięty (rys. 5)
• Oglądając jeszcze to co jest pod spodem znajdziemy pole textarea z klasą tb Pierwszym moim strzałem było dodanie do gmail.css czegoś takiego:
  • textarea.tb { font: 10pt "Consolas"; width: 400pt; height: 380pt; }
  Jednak jest to złe rozwiązanie po pierwsze, font wcale nie uległ zmianie, po drugie nawet bez kliknięcia w owo textarea, okienko jest duże, co brzydko wygląda. Tak się dzieje, ponieważ owo pole textowe jest ostylowane (można to zobaczyć pokazując styleboxa (u góry), a następnie klikając style), zapewne dziedziczy ono font, po jakimś innym elemencie, a stylowanie autora strony ma pierwszeństwo nad stylami użytkownika. Na pomoc jednak przychodzi nam !important. Tak więc reguła będzie wyglądać tak:
  • textarea.tb { font: 10pt "Consolas" !important; width: 400pt !important; }
  Super! kolejny efekt osiągnięty ;) Przy okazji warto zauważyć, że ta sama klasa musi być używana przy komponowaniu wiadomości, gdyż ta zmiana, wpłynęła również, na edycję nowych wiadomosci, czyli dwie pieczenie na jednym ogniu ;)
• Z kolejnym celem, miałem większy problem, gdyż, nie mogłem dojść z jakiej przyczyny moje skrypty się nie wykonują. Wszystko z powodu, iż korzystam z GMaila po httpsie, otóż odpowiedź znalazłem tutaj. Okazuje się, że w opera:config należy włączyć 'User JavaScript on HTTPS', przy czym powoduje to pokazywanie się dość upierdliwego okienka (jednak rozumiem developerów Opery i wydaje mi się to słuszne).
• Kolejnym krokiem było zauważenie, że pole tekstowe, które służy do tworzenia nowych wiadomości posiada jako id ta_compose więc, dla niego ustawimy styl:
  • textarea#ta_compose { font: 10pt "Consolas" !important; width: 400pt !important; height: 380pt !important; }
• Zauważyłem, że pole tekstowe do odpowiadania ma jako metodę zdarzenie onclick top.js._CM_ExpandTextbox oraz, że _CM_ExpandTextbox jest ustawiane na pewną funkcję (którego nazwa nie ma znaczenia, gdyż pewnie kod jest w jakimś stopniu generowany przez obfuscator), próbowałem więc podmienić ją na inną, gdyby nie to, że zauważyłem…
• …że pole tekstowe do odpowiadania i forwardowania, jest tworzone przez pewną funkcję, napisałem więc następujący userjs:
  • if(window.location.hostname.indexOf('mail.google.') > -1) {
  •     window.opera.addEventListener(
  •         'BeforeScript',
  •         function (e) {
  •             var p = e.element.text.search(/function[^{]*{var b=a\.mode==1\?2:15;/);
  •             if (p != -1)
  •                 e.element.text = e.element.text.replace(/var b=a\.mode==1\?2:15;/,'var b=a.mode==1?2:30;');
  •         },
  •         false
  •     );
  • }
  
  Rysunek 6
  Ja trzymam go w .opera/gmail.js, oczywiście należy w Edit Site Preferences, Scripting, wskazać właściwy katalog z plikami .js.
  Nie jest to może najlepsze rozwiązanie, bo zakładam że ciąg var b=a.mode==1?2:15; jest unikatowy, jednak o ile sprawdziłem, to tak jest. Efekt końcowy widać na rysunku 6.

• STUFF! :)
• gmail.js
• gmail.css
• LINKZ!!~!~!!cos(0)
• Document Object Model Core
• Document Object Model HTML
• Take Control with User JavaScript

superb. to teraz jeszcze bookmarklet do OpenPGP zostaje... i jakis styl, zeby katalog Spam nie byl pogrubiany

OpenPGP pomyśli się ;) a co do spamu to proste, wystarczy, że do gmail.css dodasz sobie:
div.nl span#ds_spam b { font-weight: normal; }

[a potem jeżeli nie chcesz restartować przeglądarki, prawym na stronie gmaila, edit site preferences, display i wybierz ponownie ten sam plik ze stylami
to przez to, że opera zdaje się nie obserwuje zmian w tych plikach]

Uhm, gdzieś mi umknął ten wpis i teraz sobie przypomniałem. Bardzo fajna sprawa - od razu lepiej używa się (i tak dobrego) GMaila. Thx

a jak pozbyc sie linkó sponsorowanych po prawej stronie wiadomosci ?