Mozilla показала возможность трехмерного анализа веб-страниц

Разработчики из Mozilla Foundation опубликовали экспериментальное дополнение для браузера Mozilla Firefox, которое позволяет по-новому визуализировать веб-страницы. Дополнение, получившее название говорящее название Tilt, разделяет узлы представления DOM на отдельные слови и формирует трехмерное изображение веб-страницы. Полученное изображение можно свободным образом вращать и изменять его размер. Для создания изображения браузер использует технологию WebGL и шейдеры GLSL.

Результат, получаемый с помощью дополнения Tilt, на первый взгляд, выглядит как детская игрушка. Но вместе с тем, это инструмент для наглядного представления связей разных частей веб-страницы.

В частности, дополнение Tilt позволяет сразу определить скрытые области веб-страницы и те элементы, которые выходят за ее пределы. Кроме того, как и другие средства анализа страниц сайтов, Tilt дает возможность отредактировать любой параметр DOM-дерева, в том числе и такие параметры узлов как идентификатор, набор стилей, класс и прочее. Трехмерное изображение веб-страницы создается очень легко: древовидная структура DOM преобразуется набор слоев, каждый из которых расположен точно на том же уровне, что и узел DOM.

Разработчики планируют в будущем внедрить новый функционал в дополнение. В частности, в планах внедрение:

• поддержки изменения состояния трехмерного изображения веб-страницы на лету после изменения самой страницы или модификации CSS. Это позволит организовать взаимодействия дополнения Tilt с уже используемыми отладчиками веб-страниц;
• более удобных инструментов для веб-разработчиков;
• разного типа рендеринга для элементов с относительной и абсолютной позицией;
• экспорт результатов трехмерной визуализации в формат, способный восприниматься другими браузерами и программами;
• интеграции с инструментами из Firefox Developer Tools и редактора веб-страниц Ace;
• возможности трехмерной навигации сразу по нескольким страницам;
• обвязки, позволяющей использовать встроенную веб-камеру устройства для создания более реалистичного изображения;
• новой библиотеку JavaScript, позволяющей использовать трехмерную визуализацию DOM в стандартных веб-страницах.