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 do desenvolvimento do selo de rolagem.
O que é um elemento rolável?
Se você puder rolar o conteúdo dentro de um elemento, ele será 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 sem barras de rolagem.
Encontrar manualmente o elemento que está rolando pode ser um processo tedioso de tentativa e erro:
- Você escolhe um elemento e modifica os estilos dele.
- A barra de rolagem desapareceu? Caso contrário, 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 rolados devido a uma mudança na página. - Mostrar o 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ó pode ser rolado 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 for rolável 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 de corpo roláveis, principalmente 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, na sigla em inglês)
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.
Esse nó atualizou o estado de rolagem?
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ê tem curiosidade sobre como o Chrome se comunica com o DevTools, há uma maneira simples de descobrir.
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, quando você modifica o estilo de um elemento que afeta a rolagem, é possível conferir imediatamente os eventos do CDP relacionados à medida que eles acontecem.
Para um guia mais detalhado, consulte Protocol monitor: View and send CDP requests.
Além da rolagem: apresentamos o selo de overflow
Além disso, estamos trabalhando em um novo selo de overflow para identificar a causa da rolagem. Esse selo vai aparecer ao lado de 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 do DevTools que identifica elementos filhos com overflow.
- Como visualizar o overflow. Vamos mapear os limites do elemento dentro do contêiner rolável para detectar qualquer overflow.
- Destacar o culpado. O selo de overflow vai sinalizar esses elementos e, ao clicar nele, eles serão destacados 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 vai simplificar significativamente seu fluxo de trabalho de depuração.