Projeto Ladybird Browser
O que é o Ladybird?
Um motor de navegador web independente, construído de raiz — e a razão pela qual escolhemos este projeto.
Não é um fork de Blink, WebKit ou Gecko. É uma alternativa verdadeiramente livre, guiada pelos standards da web e focada no utilizador.
Sem acordos com motores de busca, anúncios ou recolha de dados. Mantido por uma organização 501(c)(3), livre de qualquer agenda comercial.
Todo o motor de renderização, desde o parsing de HTML e CSS até ao interpretador de JavaScript, está a ser desenvolvido de raiz.
Porquê o Ladybird?
Tecnicamente desafiante
Utilizado em larga escala
Primeiras Contribuições
A primeira fase envolveu a resolução individual de pequenos bugs.
À primeira vista, simples de resolver: Botões coloridos do HTML não eram preenchidos. Aṕos a review de um maintainer principal, ficou claro que o problema era bastante mais complexo.
Um excelente primeiro bug: o browser fazia crash ao abrir um HTML que continha apenas uma tag <br>. A solução foi adicionar condições de segurança contra o acesso a memória nula.
O que foi Implementado
Implementar a Interação do Utilizador com Imagens com usemap + Cálculo de intersecções geométricas para áreas rect, circle e poly.
<img src="mapa.png" usemap="#areas">
<map name="areas">
<area shape="rect" coords="0,0,82,82">
<area shape="circle" coords="60,60,30">
<area shape="poly" coords="10,8,90,4,…">
</map>
O pipeline nativo em C++
Da árvore DOM ao clique do utilizador, em três etapas.
Durante a construção da árvore DOM, o motor analisa e guarda as strings das coordenadas fornecidas pelo HTML.
Posição do Cursor é calculada constantemente para determinar colisões com áreas.
Onde as funções de interação são chamadas após um trigger.
Como funciona o hit-testing
Três formas, três algoritmos de colisão — calculados em C++.
Validação simples de limites — min / max bounds.
Distância Euclidiana do centro vs. raio (d ≤ r).
Algoritmo de Ray-Casting (regra even-odd).
Estimativas vs. Realidade
Reutilizámos o motor de navegação já existente do Ladybird — o design final ficou muito conciso.
O esforço (horas) foi gasto sobretudo a explorar e ler o código
O maior desafio
Mais de 1 milhão de linhas e nenhuma experiência prévia com a arquitetura interna de um browser. Descobrir onde implementar a funcionalidade consumiu grande parte do tempo — passámos muito mais tempo a ler, rastrear nodes e fazer debug do que a escrever C++.
Conhecimento prático de como os browsers funcionam: o ciclo de vida do carregamento de uma página — o parsing do HTML em DOM Trees, a geração recursiva da Paint Tree, e a infraestrutura gigante por trás de um simples clique ou movimento do rato.
A experiência com o projeto
Fomos tratados com respeito e profissionalismo. As revisões de código foram construtivas — não há rigorosamente nada de negativo a apontar no tratamento que recebemos.
Muito boa. O guião para novos contribuidores está extremamente bem delineado. Sem problemas com o build (Ninja/CMake), os testes (TestWeb) ou a formulação dos Pull Requests.
Declarações Oficiais
Recentemente, os mantainers do browser decidiram fechar permanentemente o acesso a contribuições públicas e a possibilidade de abrir PR's 💀
Esta decisão não foi bem recebida pela comunidade, porque centenas de voluntários frequentes ficaram impedidos de contribuir.
Até ao momento estávamos a gostar bastante do projeto, e tencionávamos continuar a contribuir. No entanto nestas circunstancias, resta-nos esperar pela versão alpha para testar
A funcionalidade no Ladybird
Implementação nativa: clica no canto superior esquerdo da imagem.
<map name="demomap">
<!-- Área invisível: topo-esquerdo -->
<area shape="rect"
coords="0,0,200,200"
href="obrigado.html">
</map>
