Показывать по ховеру название зоны

[whymolchanov]

No description provided.

[whymolchanov]

Завел заглушку для бота, которая пишет в консоль MouseEvent при наведении на элементы.

[whymolchanov]

Нашел вот такой репозиторий https://github.com/facebook/react-devtools/tree/v3
Это место где раньше хранилось react-devtools (до того как его перенесли в react)
У него есть debug режим. Это позволит посмотреть каким образом (через какое API итд) он получает данные о VirtualDOM.

[whymolchanov]

Элементы VirtualDOM называются fibers.
В react-dev-tools есть множество методов как получить элемент зная fiberId, как найти fiberId элемента.
Однако все они требуют доступа до агента (который является частью react-dev-tools, который не хотелось бы тянуть как зависимость) или renderer-а.

Чтобы нам хотелось получить - доступ до ReactElement-а, на который указывает указатель мыши.

Как самый простой вариант, мы бы могли пробрасывать название зоны в обертку VisibilitySensor-а и доставать ее оттуда. Это решение реально, однако не будем же мы пробрасывать в обертку VisibilitySensor какие-то дополнительные данные о зоне (а они со временем появятся).

@tashbenbetov правильно я понял что data-tid атрибуты в DOM - это как раз и есть fiberId?

[whymolchanov]

Хотя, возможно, история с добавлением названия зоны в VisibilitySensor - это не самое глупое промежуточное решение.
Так мы сможем быстро уже отдать инструмент, который будет показывать хотя бы названия зон.

Думаю что первый шаг должен быть таким.
@tashbenbetov что думаешь об этом?

[tashbenbetov]

@YMolchanov, Юра, думаю идея - отличная. Нам надо сейчас запуститься и иметь внешний интерфейс для всех заинтересованных. Остальное потом можем и переиграть без особых проблем.

[whymolchanov]

Я добавил в VisibilitySensor.options новое поле - zoneName.
zoneName прикрепляется к DOM посредством data-zone-name (дата атрибута).

Сейчас использование zoneName в VisiblitySensor выглядит так:

Нужно подумать вот о чем:

• есть ли способ добавить data-zone-name к Zone, чтобы именно зона имела это значение, а не VisibilitiySensor
• есть ли способ как-то иначе пробросить zoneName в VisibiltySensor (неявно, чтобы не заставлять разработчика постоянно делать это руками)
• если это невозможно, то для новых analytics.ts можно завести plop, который будет пробрасывать zoneName в VisibilitySensor (нормально ли это решение будет распространяться с библиотекой, все-таки plop будет новой зависимостью?)
• нужно будет обновить кодовую базу (во все VisibilitySensors нужно будет пробросить zoneName) - для этого можно написать консольную тулзу, которая будет ходить по файлам и править их

В extension добавил обход ветка дерева до корня с аккумуляцией всех зон по пути. Сейчас вывожу в консоль и выглядит это как-то так:

[whymolchanov]

Кажется, нашел способ:
VisibilitySensor так и так у нас имеет представление в DOM-дереве, почему бы нам не сделать так чтобы он сообщал о зонах с которыми он работает.
Но пробрасывать в него данные руками - это моветон.
Поэтом я задумался: "А может VisibilitySensor сам узнать названия зон?", оказалось еще как может.

Это будет выглядеть как-то так:

А вот как я это сделал: https://bb.yandex-team.ru/projects/OTT/repos/frontend/commits/cc31a000f5fcfe44ae89e582b782b52b2e221890

@tashbenbetov как и всегда, мне очень важно твое мнение. Если получится найти минутку и высказаться - буду очень рад. :)

[tashbenbetov]

Последнее понравилось!

[whymolchanov]

Решил сделать по другому: в <div> VisibilitySensor будет попадать только последняя зона, а не склеенное через _ множество зон.
Мотивация: позже мы добавим в эти <div> еще и данные зоны (они есть в контексте), поэтому:

• лучше реализовать склейку зон на уровне расширения.
• это более гибкое решение и оно потенциально закроет больше кейсов