Como os números do Mole passaram a caber na barra de menus

O Mole pode mostrar dois números ao lado da toupeirinha na barra de menus, CPU e memória por padrão. Há muito tempo as pessoas me dizem que ele nunca ficava bem ao lado dos ícones em volta, embora ninguém soubesse dizer exatamente por quê. Desta vez tirei uma captura da minha própria barra de menus e fui item por item. O problema não era nenhum número isolado. Tamanho do tipo, peso e espaçamento pareciam aceitáveis cada um por si, e juntos faziam o Mole se destacar de todo o resto da barra.

Começar pelos vizinhos

Na minha captura, o item à esquerda do Mole era o Stats, um monitor de barra de menus de código aberto. Li o código que ele usa para desenhar a barra: as células pequenas põem um rótulo light de 7 pt sobre um valor regular de 12 pt, a velocidade de rede em duas linhas é 9 pt, e não há negrito em lugar nenhum da barra. O Mole usava duas linhas de texto semibold de 8 pt. Medido na mesma captura, o texto do Mole tinha 12 pixels de altura enquanto o do Stats tinha 13 a 16, então o Mole era um tamanho menor que os vizinhos e o único texto em negrito da barra, o que o transformava numa mancha cinza pequena.

Eu tinha ajustado isso várias vezes antes, indo de 10 pt para 9 pt e para 8 pt, e toda vez olhava a toupeira sozinha, não ao lado de outros itens de status. Então o texto continuava ficando menor enquanto o peso nunca mudava. A barra de menus é espaço compartilhado, e ninguém lê o item de um app isolado, então desta vez segui o estilo que as pessoas já leem todo dia: rótulos light de 7 pt, valores regulares de 12 pt, medium de 9 pt para o layout de duas linhas e a velocidade de rede, nada em negrito, e a hierarquia carregada só pelo tamanho.

Medir a tinta, não a caixa

Com o tipo resolvido, os problemas de espaçamento apareceram. O vão entre a toupeira e o primeiro número, o vão entre duas métricas e o vão entre um rótulo e o valor eram cada um calculados do seu jeito, então o item nunca se lia como um todo. O código antigo media distâncias a partir das bordas da imagem ou das caixas de layout do texto, mas o olho vê tinta, e o espaço em branco entre uma caixa e a tinta dela difere de glifo para glifo. Dois vãos ambos em 3 pt podiam parecer duas vezes mais diferentes.

A toupeira mostrava isso com mais clareza. A folha de sprites de cada personagem carrega a própria margem transparente, então uma distância fixa a partir da borda da imagem deixava só 6,5 pt ao lado da toupeira e mais ao lado de outro personagem. Agora o Mole acha o pixel opaco mais à direita em todos os quadros da animação e mede a partir dali, então, qualquer personagem que você escolha, a distância até os números fica em cerca de 12 pt.

O vão entre duas métricas tinha uma armadilha parecida. Cada célula reserva espaço para a leitura mais larga, 100% para porcentagens, para a barra de menus não se deslocar quando uma leitura vai de 9% a 44%, e com valores de dois dígitos isso deixa cerca de 13 pt entre as células. Quando as duas células chegam a 100%, porém, a folga reservada some. Uma versão durante este trabalho deixava só 3 pt entre as células, e em carga total o layout de duas linhas imprimia 100%999 KB/s como uma sequência só. As células agora mantêm pelo menos 6 pt de distância, então continuam separadas mesmo em carga total. Rótulos e valores ficam 3,5 pt afastados na vertical, o mesmo que o Stats.

Linhas alinhadas à esquerda ainda podem parecer desalinhadas

Nas células antigas o rótulo ficava centralizado sobre o número, e lia como uma legenda flutuando em cima. Desta vez o rótulo e o valor são alinhados à esquerda e desenhados a partir da mesma coordenada x, então deveriam se alinhar. Ampliado, o rótulo sempre ficava um pouco à esquerda do número. A causa está na fonte: todo glifo carrega uma margem pequena embutida no lado esquerdo. Os dígitos tabulares de 12 pt têm 0,7 a 1,0 pt disso, o dígito 1 tem 1,7 pt, e as maiúsculas de um rótulo de 7 pt têm só 0,3 a 0,6 pt. Eles começam no mesmo ponto, mas os traços visíveis acabam de 1 a 3 pixels afastados, mais visível quando uma leitura começa com 1.

A correção move o rótulo para o primeiro traço do valor e deixa o valor quieto. A leitura muda a cada segundo, e se ela se deslocasse sempre que o primeiro dígito mudasse, o número que você está olhando balançaria de um lado para o outro. Mover o rótulo pequeno acima evita isso; ele só se move, em menos de 1 pt, quando a leitura cruza para outra dezena.

Mesmo com os traços exatamente alinhados, o valor ainda parecia um pouco à direita. É uma ilusão comum quando uma figura grande fica sob um texto pequeno: um dígito redondo de 12 pt é bem maior que uma legenda light de 7 pt, e o olho lê a borda do glifo maior como mais para dentro. Comparei 0, 0,5 e 1 pt. Em 1 pt o número já parecia estar empurrando para fora, então o valor agora pende 0,3 pt para a esquerda, um pouco mais de meio pixel, o bastante para as duas linhas parecerem apoiadas na mesma borda.

Reservar a largura de todo número

Quando qualquer coisa na barra de menus muda de largura, todo ícone à direita se move junto, então cada tipo de leitura precisa de espaço reservado para a forma mais larga. Dois vãos apareceram. A velocidade da ventoinha é escrita 850 abaixo de 1000 rpm e 2.1k acima, e as duas formas reservavam larguras diferentes, então a barra de menus inteira pulava quando a ventoinha cruzava 1000 rpm. O swap usava direto o formato de bytes do sistema, que produzia 10.52 GB, ou 1,2 Go num sistema em francês: longo demais para uma célula de 12 pt, e a largura mudava com a leitura. As duas formas da ventoinha agora compartilham uma largura, e o swap na barra de menus é sempre uma forma curta de no máximo três dígitos, como 512 MB, 1.2 GB ou 12 GB. O valor completo fica no popover.

A velocidade de rede ganhou uma correção no caminho. Abaixo de 10 KB/s ela mostrava uma casa decimal, então um 0.0 KB/s ocioso ficava acima de 86 KB/s com ponto decimal numa linha e não na outra, e o par alinhado à direita nunca parecia parelho. Um décimo de kilobyte por segundo diz muito pouco, então KB/s agora é sempre um número inteiro. MB/s mantém uma casa decimal abaixo de 10, onde a diferença entre 1.5 MB/s e 1 MB/s de fato importa.

Como configurar

Nos Ajustes do Mole, abra a aba Barra de menus. Conteúdo da barra de menus tem três opções: Ícone mostra só a toupeira, Dados em tempo real mostra só os números, e Ícone e dados mostra a toupeira com números ao lado, então escolha Dados em tempo real ou Ícone e dados para ver os números deste texto. Em Disposição dos dados, Colunas dá as células de rótulo sobre valor e Empilhado dá as duas linhas de texto pequeno. Primeiro dado de status e Segundo dado de status escolhem as duas métricas, CPU e memória por padrão, e você pode trocar qualquer uma para GPU, temperatura, energia, ventoinha, swap ou a bateria de um aparelho Bluetooth. Ligar Mostrar velocidade da rede acrescenta envio e recebimento à direita. A própria toupeira pode ser trocada em Personagem da barra de menus, e Inverter direção vira o personagem.

Às vezes perguntam por que a toupeira corre tão rápido. O ritmo é a leitura da CPU: quanto mais ocupado o Mac, mais rápido ela corre. A velocidade reflete o uso geral da CPU e a média de carga de um minuto ajustada pelo número de núcleos. Totalmente ociosa, ela dá um passo mais ou menos a cada 1,3 segundo, e a partir de 70% para de acelerar em cerca de quatro passos por segundo. A curva sobe mais rápido em carga baixa para que 10% e 30% pareçam claramente diferentes, o que significa que, com um navegador aberto e alguma escrita acontecendo, ela já corre cerca de duas vezes mais rápido do que com o Mac ocioso, e compilar código ou exportar vídeo faz ela correr de verdade. O ritmo é um sinal deliberado, e por isso não há um ajuste separado de velocidade. Outros personagens se movem no próprio ritmo, porque cada um tem um número diferente de quadros de animação. Quando só a toupeira é mostrada, passar o ponteiro sobre ela mostra a mesma dica: "Corre mais rápido quando a CPU está mais ocupada".

O que eu tentei e deixei como estava

Em certo ponto a célula de temperatura me parecia grande demais. Fiz uma versão com a unidade em 9 pt e outra em 10 pt, e nas duas o ° menor caía em direção à linha de base, então 58°C lia como o erro de digitação 58°c, e o sinal de porcentagem ficava nitidamente menor que o que o Stats mostra logo ao lado. Medir de novo mostrou que o número tinha exatamente o mesmo tamanho da célula de CPU; só parecia maior porque 58°C tem uma letra maiúscula a mais que 44%. Então o tamanho ficou como estava.

Havia também uma regra antiga de que só o layout de duas linhas podia aparecer ao lado do personagem, nunca estas células de rótulo sobre valor. A versão contra a qual essa regra foi escrita usava semibold de 12 pt. Sem o negrito, o motivo não se aplica mais, então os dois layouts agora podem aparecer ao lado do personagem, e as células são o padrão.

Olhando para trás, nenhuma dessas mudanças é grande. São meio pixels, uma casa decimal e alguns pontos de espaçamento, e juntos decidem se um ícone se mistura à barra de menus ou salta para fora dela. Se você faz um app de barra de menus, ponha o seu item e alguns vizinhos populares numa captura só e compare, meça a tinta em vez da caixa, e reserve a largura máxima de cada leitura. Depois desses três, provavelmente não vai parecer fora de lugar.

Todos esses valores agora estão cobertos por testes, um para peso, um para largura e um para alinhamento do rótulo, para uma mudança posterior ter menos chance de desfazê-los. É a mesma ideia de Desenhar o Mole para ficar fora do caminho: o que vive na barra de menus fica melhor quando você olha todo dia e nunca percebe.