[Закрыто] Расширение для сайта

Апдейт

Начну этот пост с макета. Технически, это уже не макет, т.к. за ним стоит реальный javascript-код с ивентами и функциями, так что с этого момента я буду называть его всплывающей панелью (этот термин также употребляется в русскоязычном MDN). Узрите:

Первое, что можно отметить — заголовок превратился из обычного текста в аж две ссылки! Одна на главную страницу сайта, другая — на форум.
Далее, галочка про инфо-плашки была убрана, т.к. Илья утвердил это как баг, и надоедливые плашки (если всё пойдёт по плану) будут пофикшены со стороны сайта, а не расширения.
Состояние галочек по умолчанию было изменено, но временно. На это можете не обращать внимание.
И наконец, были добавлены 2 новые кнопки, отвечающие за 2 функции: сохранение состояния галочек и сброс состояния галочек. На самом деле, вторая кнопка сама по себе ничего не делает, чтобы увидеть сброшенные галочки нужно переоткрыть всплывающую панельку. А ещё, сохранение галочек не работает. Не знаю почему, но вот прям не хочет! Активно бьюсь над этим.
Как только смогу починить сохранение галочек, то переназначу это всё так, чтобы не нужно было тыкать на эту кнопку “Сохранить”, а достаточно было кликнуть на одну из галочек и функция их сохранения сама вызывалась. Намного удобнее, но с кнопками мне просто легче работать на этой стадии.

А можно сделать дерево независимым элементом с собственной прокруткой, чтобы оно не уползало при навигации по основному материалу?

Дремучий: А можно сделать дерево независимым элементом с собственной прокруткой, чтобы оно не уползало при навигации по основному материалу?

В теории — точно можно, но на практике пока что у меня не получается подогнать высоту дерева под высоту экрана. max-height: 100vh; работал бы, если бы не зафиксированная шапка, сохраняющая свою позицию на экране при прокручивании. Немного справки: 100vh это такой способ сказать “100 процентов высоты экрана (видимой области)”, но из-за того что шапка занимает часть видимой области, и эту часть довольно сложно посчитать ввиду того, что высота шапки назначена не одним свойством height, а множеством padding’ов на разных слоях.
Сейчас я не вижу другого выхода, кроме как попытаться на глаз вычислить точный vh, но чую что придётся прям очень долго мучаться с десятичной дробью (представьте что-то вроде 92.976394vh), да и не факт что полученное значение будет работать на других мониторах. Древо либо вылезает, либо не занимает нужное место!

Если я смогу разобраться с этой частью, то дальше уже будет полегче, благо подобным я уже занимался (отвязыванием боковой панели от прокрутки, то бишь фиксированием этой панели на экране). Ну а про начало и говорить нечего — для отдельной прокрутки достаточно overflow-y: scroll; (дословно: если контент не влезает в контейнер, то добавить прокрутку (но прокрутка в любом случае есть всегда, просто если влезает то она отображается отключенной)).
Вкратце — миссия явно не невыполнима, но и не нетрудна :-)

Merci за идею !

Отходя от идеи Дремучего, я тут немного украл позаимствовал CSS-кода с сайта к себе в расширение, и получил вот такую аутентичную красоту. Взгляните:

Есть некоторые кривоватости, неровности и прочие некрасивости, но в процессе постараюсь это всё залатать (к следующему апдейту пофикшу часть этого). Основная идея, куда движется дизайн, думаю, ясна. Больше аутентичности богу аутентичности!

nmalofeev
В теории — точно можно, но на практике пока что у меня не получается подогнать высоту дерева под высоту экрана. max-height: 100vh; работал бы, если бы не зафиксированная шапка, сохраняющая свою позицию на экране при прокручивании.

overflow-y: scroll;
position: fixed;
float: left;
width: 20%;
max-height: 100vh;