A depuração de problemas relacionados à rolagem ficou mais fácil com o novo selo de rolagem do DevTools. Esta postagem explica o que são elementos roláveis, por que eles podem ser difíceis de encontrar e como esse novo recurso ajuda a localizá-los rapidamente. Também vamos mostrar os bastidores para saber como desenvolvemos o selo de rolagem.
O que é um elemento rolável?
Se você consegue rolar o conteúdo dentro de um elemento, trata-se de um elemento rolável (ou contêiner de rolagem). Não importa se ele tem barras de rolagem ou não.
Por que é difícil encontrar o elemento rolável?
É difícil depurar problemas de rolagem. Sem uma ferramenta para mostrar claramente o elemento rolável, é fácil se perder, especialmente em páginas complexas quando não há barras de rolagem.
Encontrar manualmente o elemento que está rolando à tela pode ser um processo tedioso de tentativa e erro:
- Você escolhe um elemento e modifica os estilos dele.
- A barra de rolagem desapareceu? Se não, repita o processo.
Apresentação do selo de rolagem
No Chrome 130, você pode usar o novo selo de rolagem no painel Elementos para localizar os elementos roláveis.
Por exemplo, tente descobrir qual elemento está fazendo com que as barras de rolagem apareçam no exemplo a seguir usando o novo selo de rolagem.
Implementação técnica do novo selo de rolagem
Nos bastidores, a implementação é dividida em duas partes:
- Como identificar elementos roláveis. Use os indicadores
Blink’s(motor de renderização do Chrome) para identificar elementos que podem ser rolados ou que passaram a ser roláveis devido a uma mudança na página. - Exibição do selo de rolagem. Após receber os indicadores, incorporamos um novo selo (semelhante aos selos da grade) ao lado dos elementos roláveis no painel Elementos.
Como identificar elementos roláveis
Para identificar elementos roláveis, usamos o método IsUserScrollable no Blink. Esse método determina se um nó é rolável verificando se ele transborda ao longo do eixo X ou Y, indicando que o conteúdo excede as dimensões do contêiner e pode ser rolado. Chamamos esse método sempre que um novo elemento é carregado no DevTools para identificar contêineres roláveis.
Para atualizar dinamicamente o estado de rolagem de elementos que já foram carregados, tivemos que mergulhar na base de código do mecanismo de renderização do Blink para rastrear onde a área de rolagem de um nó é adicionada ou removida.
O overflow de processamento de lógica principal é gerenciado pelo componente PaintLayerScrollableArea. Especificamente, o método UpdateScrollableAreaSet é responsável por detectar quando o overflow ocorreu ou foi resolvido.
Essas informações são transmitidas para o back-end do DevTools enviando a referência do nó que mudou o ScrollableArea.
O back-end verifica o nó novamente usando o método IsUserScrollable para conferir o novo estado. Depois de verificar a rolagem, um sinal é enviado ao front-end usando o Chrome DevTools Protocol, garantindo que a interface reflita com precisão as mudanças no conteúdo rolável.
Como mostrar o selo de rolagem
Para adicionar o novo ícone no front-end do DevTools, criamos um método de gerenciador no ElementsTreeOutline que recebeu o nodeId do elemento que mudou o estado de rolagem por um evento.
Nesse manipulador, extraímos o objeto ElementsTreeElement usando o nodeId e instruímos a atualizar o selo de rolagem.
Atualizar o selo de rolagem envolve verificar se o elemento pode ser rolado e se ele já tem um selo de rolagem. Com base nessas condições, as seguintes ações são realizadas:
- Se o elemento puder ser rolado e ainda não tiver um selo de rolagem, ele será adicionado.
- Se o elemento não tiver rolagem, mas tiver um selo de rolagem, o selo atual será removido.
A lógica especial para processar documentos de nível superior roláveis
Quando o documento de nível superior pode ser rolado, temos um caso especial, porque não exibimos o elemento #document para o documento principal, apenas para iframes. Por isso, não é possível mostrar o selo diretamente nos elementos #document.
Decidimos mostrar o selo de rolagem no elemento </html>, incluindo aqueles em Quirks mode em que document.scrollingElement() retorna <body> ou null. Essa decisão evita confusão entre documentos roláveis e elementos do corpo roláveis, especialmente em páginas em que o corpo pode ser rolado de forma independente.
Descobrimos que essa é a maneira mais clara de mostrar aos desenvolvedores quais elementos podem ser rolados.
Mudanças no protocolo do Chrome DevTools (CDP)
Para integrar o novo selo de rolagem, foram necessárias mudanças em Chrome DevTools Protocol (CDP). O CDP serve como um protocolo de comunicação entre o DevTools e o Chrome.
Tivemos que mudar o protocolo para abranger os dois casos:
- É possível rolar o nó quando ele é carregado no DevTools?
- Esse nó atualizou o estado de rolagem?
É possível rolar o nó quando ele é carregado no DevTools?
Adicionamos uma nova propriedade chamada isScrollable ao tipo de dados DOM.Node, que é enviado sempre que um novo nó é carregado no front-end do DevTools.
Decidimos preencher essa propriedade apenas quando ela for verdadeira, para evitar o carregamento de dados desnecessários. Portanto, quando a propriedade não é enviada, presumimos que o elemento não pode ser rolado.
O nó rolável atualizou o estado rolável?
Para detectar se um nó atualizou o estado de rolagem, apresentamos um novo evento scrollableFlagUpdated no CDP, que é acionado sempre que um elemento ganha ou perde uma área de rolagem. O evento tem a seguinte estrutura:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
Dica de especialista: examine as novas mudanças do CDP no seu navegador
Se você está curioso para saber como o Chrome se comunica com o DevTools, há uma maneira simples de explorá-lo.
O painel Protocol Monitor permite visualizar eventos trocados em tempo real entre o Chrome e o DevTools, incluindo o evento recém-adicionado para o selo de rolagem. Por exemplo, ao modificar o estilo de um elemento que afeta a rolagem, é possível ver imediatamente os eventos de CDP relacionados conforme eles ocorrem.
Para um guia mais detalhado, consulte Protocol monitor: View and send CDP requests.
Além da rolagem: apresentamos o selo de overflow
Melhor ainda, estamos trabalhando em um novo selo de imagem flutuante para identificar a causa dessa rolagem. Esse selo vai aparecer ao lado dos elementos que transbordam o contêiner, ajudando você a diagnosticar rapidamente os problemas de layout.
Veja como isso vai funcionar:
- Depuração interativa. Clique no selo de rolagem para acionar um comando do protocolo DevTools que identifica elementos filhos excedentes.
- Visualizando o menu flutuante. Vamos mapear os limites do elemento dentro do contêiner rolável para detectar qualquer overflow.
- Destacar o culpado. O selo flutuante sinalizará esses elementos excedentes e um clique neles irá destacá-los diretamente no DOM.
Isso vai dar aos desenvolvedores uma nova ferramenta poderosa para entender e corrigir problemas de layout causados pelo conteúdo que transborda. Acreditamos que esse nível mais profundo de análise simplifica significativamente seu fluxo de trabalho de depuração.