В Firefox 12 может появится инструмент для трехмерного анализа веб-страниц

27 Декабрь 2011

В «ночных сборках» браузера Mozilla Firefox, которые станут основной для двенадцатого релиза браузера, возможно, появится инструмент для трехмерного анализа веб-страниц. Инструмент построен на наработках проекта Tilt, который уже сейчас доступен в качестве специального дополнения.

Разработчики сообщили, что в «ночных сборках» браузера Mozilla Firefox, на основе которого будет создан финальный релиз Firefox 12, появилась поддержка инструмента для трехмерного анализа веб-страниц. Инструмент основан на наработках проекта Tilt, которые уже доступны в стабильных релизах браузера с помощью установки специального дополнения. Трехмерный анализ основан на визуализации, при которой узлы DOM-представления (Document Оbject Model) разделяются на наглядные слои. Перевод в трехмерный режим визуализации производится с помощью нажатия на кнопку «3D» в требуемой области в окне анализа кода. Кнопка находится в меню WebDeveloper, подпункте Insert. Полученное в результате визуализации трехмерное изображение можно вращать свободным образом и также свободно масштабировать.

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

Как поясняется их описания проекта Tilt, механизм формирования трехмерного изображения веб-страницы сводится к превращению DOM-структуры в набор слоев. Каждый из слоев располагается на том уровне, на котором элемент находится в дереве DOM. В качестве основы трехмерной конструкции берется содержимое веб-страницы, ограниченное тэгом «body». Как только визуализатор обнаруживает новый блочный элемент, например, DIV, UL и TABLE, он создает новый выпуклый слой, относительно которого и отображаются вложенные элементы. На каждый из созданных слоев накладывается заранее определенная текстура, которая создается на базе разобранных результатов привычной, плоской отрисовки веб-страницы.