☰

Habr.Features

Всякое-разное для Habr aka habr.com

当前为 2018-11-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Habr.Features
  3. // @version 3.2.39
  4. // @description Всякое-разное для Habr aka habr.com
  5. // @author AngReload
  6. // @include https://habr.com/*
  7. // @include http://habr.com/*
  8. // @namespace habr_comments
  9. // @run-at document-start
  10. // @grant none
  11. // @icon https://habr.com/favicon.ico
  12. // ==/UserScript==
  13. /* global localStorage, MutationObserver */
  14.  
  15. // настройки по умолчанию
  16. const FLAGS = {};
  17. // остановка гифок
  18. // клик по гифке заменит картинку на заглушку
  19. // повторный клик вернет гифку на место
  20. FLAGS.GIF_STOP = true;
  21. // остановить гифки при загрузке страницы
  22. FLAGS.GIF_STOP_ONLOAD = false;
  23. // цвета заглушки
  24. FLAGS.GIF_STOP_COLOR_FG = 'White'; // White
  25. FLAGS.GIF_STOP_COLOR_BG = 'LightGray'; // LightGray or WhiteSmoke
  26. // менять src вместо создания-удаления нод
  27. FLAGS.GIF_STOP_OVERTYPE = true;
  28.  
  29. // показывать счетчики рейтинга в виде:
  30. // рейтинг = число_голосовавших * (процент_плюсов - процент_минусов)%
  31. FLAGS.RATING_DETAILS = true;
  32. // клик мышкой по рейтингу меняет вид на простой \ детальный
  33. FLAGS.RATING_DETAILS_ONCLICK = false;
  34. // рейтинг = число_плюсов - число_минусов (как альтернатива процентам)
  35. FLAGS.RATING_DETAILS_PN = false;
  36.  
  37. // карма = число_голосовавших * (процент_товарищей - процент_неприятелей)%
  38. FLAGS.KARMA_DETAILS = true;
  39.  
  40. // показывать метки времени в текущем часовом поясе
  41. // абсолютно, либо относительно текущего времени, либо относительно родительского времени
  42. // меняется по клику, в всплывающей подсказке другие виды времени, автообновляется
  43. FLAGS.TIME_DETAILS = true;
  44.  
  45. // добавить возможность сортировки комментариев
  46. FLAGS.COMMENTS_SORT = true;
  47. // сортировать комменты при загрузке страницы или оставить сортировку по времени
  48. FLAGS.COMMENTS_SORT_ONLOAD = true;
  49. // список доступных сортировок
  50. FLAGS.COMMENTS_SORT_BY_FRESHNESS = true;
  51. FLAGS.COMMENTS_SORT_BY_TREND = true; // самая полезная сортировка
  52. FLAGS.COMMENTS_SORT_BY_QUALITY = false;
  53. FLAGS.COMMENTS_SORT_BY_RATING = false;
  54. FLAGS.COMMENTS_SORT_BY_POPULARITY = false;
  55. FLAGS.COMMENTS_SORT_BY_REDDIT = false;
  56. FLAGS.COMMENTS_SORT_BY_RANDOM = false;
  57.  
  58. // добавить возможность сворачивать комментарии
  59. FLAGS.COMMENTS_HIDE = true;
  60. // свернуть комментарии если их глубина вложенности равна некому числу
  61. FLAGS.HIDE_LEVEL = 4;
  62. // свернуть комменты с 4-го уровня
  63. FLAGS.HIDE_LEVEL_4 = true;
  64. // сделать «возврат каретки» для комментариев чтобы глубина вложенности не превышала некого числа
  65. FLAGS.LINE_LEN = 8;
  66. // отбивать каждый следущий уровень вложенности дополнительным отступом
  67. FLAGS.REDUCE_NEW_LINES = true;
  68. // глубина вложенности при «возврате каретки» комментариев обозначается разным цветом
  69. FLAGS.RAINBOW_NEW_LINE = true;
  70.  
  71. // заменить ссылки ведущие к новым комментариям на дерево комментариев
  72. FLAGS.COMMENTS_LINKS = true;
  73.  
  74. // запоминание галки «Использовать MarkDown» для комментариев
  75. FLAGS.COMMENTS_MD = true;
  76.  
  77. // в огнелисе, в отличии о хрома, при загрузке изображений не сохраняется прокрутка
  78. // меня раздражает когда дерево комментариев скачками пытается уехать вниз
  79. // эта опция зафиксирует высоту публикации пока та находится вне обзора
  80. // надо переделать
  81. FLAGS.FIX_JUMPING_SCROLL = false;
  82.  
  83. // линии вдоль прокрутки для отображения размеров поста и комментариев
  84. FLAGS.SCROLL_LEGEND = true;
  85.  
  86. // добавляет кнопку активации ночного режима
  87. FLAGS.NIGHT_MODE = true;
  88.  
  89. // добавляет диалок настроек
  90. FLAGS.CONFIG_INTERFACE = true;
  91.  
  92. // включить разные стили
  93. FLAGS.USERSTYLE = true;
  94. // лента постов с увеличенными отступами, нижний бар выровнен вправо
  95. FLAGS.USERSTYLE_FEED_DISTANCED = true;
  96. // мелкий фикс для отступа в счетчике ленты
  97. FLAGS.USERSTYLE_COUNTER_NEW_FIX_SPACE = true;
  98. // удаляет правую колонку, там где не жалко
  99. FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT = true;
  100. // аватарки без скруглений
  101. FLAGS.USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS = true;
  102. // большие аватарки в профиле и карточках
  103. FLAGS.USERSTYLE_USERINFO_BIG_AVATARS = true;
  104. // ограничить размер картинок в комментах
  105. FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE = 0;
  106. // нормальные стили для комментариев
  107. FLAGS.USERSTYLE_COMMENTS_FIX = true;
  108. // нормальные стили для кода
  109. FLAGS.USERSTYLE_CODE_FIX = true;
  110. // окантовка границ спойлеров
  111. FLAGS.USERSTYLE_SPOILER_BORDERS = true;
  112. // делает глючные плавающие блоки статичными
  113. FLAGS.USERSTYLE_STATIC_STICKY = true;
  114. // показывать язык подсветки блоков кода
  115. FLAGS.USERSTYLE_HLJS_LANG = true;
  116. // показывать язык кода только при наведении
  117. FLAGS.USERSTYLE_HLJS_LANG_HOVER = false;
  118. // свой шрифт для блоков кода
  119. FLAGS.USERSTYLE_CODE_FONT = 'PT Mono';
  120. // размер табов в коде
  121. FLAGS.USERSTYLE_CODE_TABSIZE = 2;
  122. // для ночного режима
  123. FLAGS.USERSTYLE_CODE_NIGHT = true;
  124. // для настроек
  125. FLAGS.USERSTYLE_CONFIG_INTERFACE = true;
  126. FLAGS.SCROLL_BEHAVIOR_SMOOTH = true;
  127.  
  128. const configOptions = [
  129.   ['KARMA_DETAILS', 'счётчики кармы с плюсами и минусами'],
  130.   ['RATING_DETAILS', 'рейтинг с подробностями о плюсах и минусах'],
  131.   ['RATING_DETAILS_PN', 'рейтинг в абсолютных единицах вместо процентов'],
  132.   ['TIME_DETAILS', 'отметки о времени с подробностями'],
  133.   ['GIF_STOP', 'остановка гифок'],
  134.   ['GIF_STOP_ONLOAD', 'остановить гифки при загрузке страницы'],
  135.   ['COMMENTS_SORT', 'сортировка комментов'],
  136.   ['COMMENTS_SORT_ONLOAD', 'сортировать комменты при загрузке'],
  137.   ['COMMENTS_SORT_BY_FRESHNESS', 'сортировка новые'],
  138.   ['COMMENTS_SORT_BY_TREND', 'сортировка горячие'],
  139.   ['COMMENTS_SORT_BY_QUALITY', 'сортировка хорошие'],
  140.   ['COMMENTS_SORT_BY_REDDIT', 'сортировка проверенные'],
  141.   ['COMMENTS_SORT_BY_RATING', 'сортировка рейтинговые'],
  142.   ['COMMENTS_SORT_BY_POPULARITY', 'сортировка популярные'],
  143.   ['COMMENTS_SORT_BY_RANDOM', 'сортировка случайные'],
  144.   ['COMMENTS_HIDE', 'сворачивание комментов'],
  145.   ['HIDE_LEVEL_4', 'свернуть комменты с 4-го уровня'],
  146.   ['REDUCE_NEW_LINES', 'возврат каретки с уменьшением ширины'],
  147.   ['RAINBOW_NEW_LINE', 'возврат каретки комментов в разных цветах'],
  148.   ['COMMENTS_LINKS', '"читать комментарии" ведёт на корень комментов'],
  149.   ['COMMENTS_MD', 'запоминать галку MarkDown'],
  150.   ['FIX_JUMPING_SCROLL', 'заморозить высоту статьи при загрузке'],
  151.   ['SCROLL_LEGEND', 'ленгенда страницы у скроллбара'],
  152.   ['NIGHT_MODE', 'ночной режим'],
  153.   // ['USERSTYLE', 'стилизация'],
  154.   ['USERSTYLE_COMMENTS_FIX', 'стили комментов'],
  155.   ['USERSTYLE_HLJS_LANG', 'показать язык для блоков кода'],
  156.   ['USERSTYLE_HLJS_LANG_HOVER', 'язык кода скрыт до наведении курсора'],
  157.   ['USERSTYLE_STATIC_STICKY', 'зафиксировать плавающие блоки'],
  158.   ['USERSTYLE_SPOILER_BORDERS', 'видимые границы спойлеров'],
  159.   ['USERSTYLE_FEED_DISTANCED', 'большие отступы между постами в ленте'],
  160.   ['USERSTYLE_REMOVE_SIDEBAR_RIGHT', 'удалить правую колонку сайта'],
  161.   ['USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS', 'квадратные аватарки'],
  162.   ['USERSTYLE_USERINFO_BIG_AVATARS', 'большие аватарки в профилях'],
  163. ];
  164.  
  165. // сохраняяем умолчания для панели настроек
  166. if (!localStorage.getItem('habrafixFlags')) {
  167.   localStorage.setItem('habrafixFlags', JSON.stringify(FLAGS));
  168. } else {
  169.   const jsonString = localStorage.getItem('habrafixFlags');
  170.   const loadedConfig = jsonString ? JSON.parse(jsonString) : {};
  171.   const loadedKeys = Object.keys(loadedConfig);
  172.   Object.keys(FLAGS).forEach((key) => {
  173.     if (
  174.       loadedKeys.includes(key) &&
  175.       configOptions.find(arr => arr[0] === key)
  176.     ) {
  177.       FLAGS[key] = loadedConfig[key];
  178.     }
  179.   });
  180. }
  181.  
  182. // интерфейс для хранения настроек
  183. const userConfig = {
  184.   // имя записи в localsorage
  185.   key: 'habrafix',
  186.   // модель настроек: ключ - возможные значения
  187.   model: {
  188.     time_publications: ['fromNow', 'absolute'],
  189.     time_comments: ['fromParent', 'fromNow', 'absolute'],
  190.     comments_order: ['trend', 'time'],
  191.     scores_details: [true, false],
  192.     comment_markdown: [false, true],
  193.     night_mode: [false, true],
  194.   },
  195.   config: {},
  196.   // при старте для конфига берем сохраненные параметры либо по умолчанию
  197.   init() {
  198.     let jsonString = localStorage.getItem(userConfig.key);
  199.     const loadedConfig = jsonString ? JSON.parse(jsonString) : {};
  200.     const loadedKeys = Object.keys(loadedConfig);
  201.     const config = {};
  202.     Object.keys(userConfig.model).forEach((key) => {
  203.       const exist = loadedKeys.indexOf(key) >= 0;
  204.       config[key] = exist ? loadedConfig[key] : userConfig.model[key][0];
  205.     });
  206.     jsonString = JSON.stringify(config);
  207.     localStorage.setItem(userConfig.key, jsonString);
  208.     userConfig.config = config;
  209.   },
  210.   getItem(key) {
  211.     const jsonString = localStorage.getItem(userConfig.key);
  212.     const config = JSON.parse(jsonString);
  213.     return config[key];
  214.     // return userConfig.config[key];
  215.   },
  216.   setItem(key, value) {
  217.     let jsonString = localStorage.getItem(userConfig.key);
  218.     const config = JSON.parse(jsonString);
  219.     config[key] = value;
  220.     jsonString = JSON.stringify(config);
  221.     localStorage.setItem(userConfig.key, jsonString);
  222.     userConfig.config = config;
  223.   },
  224.   // каруселит параметр по значения модели
  225.   shiftItem(key) {
  226.     const currentValue = userConfig.getItem(key);
  227.     const availableValues = userConfig.model[key];
  228.     const currentIdx = availableValues.indexOf(currentValue);
  229.     const nextIdx = (currentIdx + 1) % availableValues.length;
  230.     const nextValue = availableValues[nextIdx];
  231.     userConfig.setItem(key, nextValue);
  232.     return nextValue;
  233.   },
  234. };
  235. userConfig.init();
  236.  
  237. // свои стили
  238. const userStyleEl = document.createElement('style');
  239. let userStyle = '';
  240.  
  241. if (FLAGS.SCROLL_LEGEND) {
  242.   userStyle += `
  243.     .legend_el {
  244.       position: fixed;
  245.       width: 4px;
  246.       right: 0;
  247.       transition: top 1s ease-out, height 1s ease-out;
  248.       z-index: 101;
  249.     }
  250.  
  251.     #xpanel {
  252.       right: 4px;
  253.     }
  254.   `;
  255. }
  256.  
  257. if (FLAGS.USERSTYLE_FEED_DISTANCED) {
  258.   userStyle += `
  259.     .post__body_crop {
  260.       text-align: right;
  261.     }
  262.  
  263.     .post__body_crop .post__text {
  264.       text-align: left;
  265.     }
  266.  
  267.     .post__footer {
  268.       text-align: right;
  269.     }
  270.  
  271.     .posts_list .content-list__item_post {
  272.       padding: 40px 0;
  273.     }
  274.   `;
  275. }
  276.  
  277. if (FLAGS.USERSTYLE_COUNTER_NEW_FIX_SPACE) {
  278.   userStyle += `
  279.     .toggle-menu__item-counter_new {
  280.       margin-left: 4px;
  281.     }
  282.   `;
  283. }
  284.  
  285. if (FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT) {
  286.   // remove for
  287.   // https://habr.com/post/352896/
  288.   // https://habr.com/sandbox/
  289.   // https://habr.com/sandbox/115216/
  290.   // https://habr.com/users/saggid/posts/
  291.   // https://habr.com/users/saggid/comments/
  292.   // https://habr.com/users/saggid/favorites/
  293.   // https://habr.com/users/saggid/favorites/posts/
  294.   // https://habr.com/users/saggid/favorites/comments/
  295.   // https://habr.com/company/pvs-studio/blog/353640/
  296.   // https://habr.com/company/pvs-studio/blog/
  297.   // https://habr.com/company/pvs-studio/blog/top/
  298.   // https://habr.com/company/pvs-studio/
  299.   // https://habr.com/feed/
  300.   // https://habr.com/top/
  301.   // https://habr.com/top/yearly/
  302.   // https://habr.com/all/
  303.   // https://habr.com/all/top10/
  304.  
  305.   // display for
  306.   // https://habr.com/company/pvs-studio/profile/
  307.   // https://habr.com/company/pvs-studio/vacancies/
  308.   // https://habr.com/company/pvs-studio/fans/all/rating/
  309.   // https://habr.com/company/pvs-studio/workers/new/rating/
  310.   // https://habr.com/feed/settings/
  311.   // https://habr.com/users/
  312.   // https://habr.com/hubs/
  313.   // https://habr.com/hubs/admin/
  314.   // https://habr.com/companies/
  315.   // https://habr.com/companies/category/software/
  316.   // https://habr.com/companies/new/
  317.   // https://habr.com/flows/design/
  318.  
  319.   const path = window.location.pathname;
  320.   const isPost = /^\/post\/\d+\/$/.test(path);
  321.   const isSandbox = /^\/sandbox\//.test(path);
  322.   const isUserPosts = /^\/users\/[^/]+\/posts\//.test(path);
  323.   const isUserComments = /^\/users\/[^/]+\/comments\//.test(path);
  324.   const isUserFavorites = /^\/users\/[^/]+\/favorites\//.test(path);
  325.   const isCompanyBlog = /^\/company\/[^/]+\/blog\//.test(path);
  326.   const isCompanyBlog2 = /^\/company\/[^/]+\/(page\d+\/)?$/.test(path);
  327.   const isFeed = /^\/feed\//.test(path);
  328.   const isHome = /^\/$/.test(path);
  329.   const isTop = /^\/top\//.test(path);
  330.   const isAll = /^\/all\//.test(path);
  331.  
  332.   if (
  333.     isPost || isSandbox ||
  334.     isUserPosts || isUserComments || isUserFavorites ||
  335.     isCompanyBlog || isCompanyBlog2 ||
  336.     isFeed || isHome || isTop || isAll
  337.   ) {
  338.     userStyle += `
  339.       .sidebar_right {
  340.         display: none;
  341.       }
  342.  
  343.       .content_left {
  344.         padding-right: 0;
  345.       }
  346.  
  347.       .comment_plain {
  348.         max-width: 860px;
  349.       }
  350.     `;
  351.   }
  352. }
  353.  
  354. if (FLAGS.USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS) {
  355.   userStyle += `
  356.     .user-info__image-pic,
  357.     .user-pic_popover,
  358.     .media-obj__image-pic {
  359.       border-radius: 0;
  360.     }
  361.   `;
  362. }
  363.  
  364. if (FLAGS.USERSTYLE_USERINFO_BIG_AVATARS) {
  365.   userStyle += `
  366.     .page-header {
  367.       height: auto;
  368.     }
  369.  
  370.     .media-obj__image-pic_hub,
  371.     .media-obj__image-pic_user,
  372.     .media-obj__image-pic_company {
  373.       width: auto;
  374.       height: auto;
  375.     }
  376.   `;
  377. }
  378.  
  379. if (FLAGS.COMMENTS_SORT) {
  380.   userStyle += `
  381.     .comments_order {
  382.       color: #333;
  383.       font-size: 14px;
  384.       font-family: "-apple-system",BlinkMacSystemFont,Arial,sans-serif;
  385.       text-rendering: optimizeLegibility;
  386.       border-bottom: 1px solid #e3e3e3;
  387.       padding: 8px;
  388.       text-align: right;
  389.     }
  390.  
  391.     .comments_order a {
  392.       color: #548eaa;
  393.       font-style: normal;
  394.       text-decoration: none;
  395.     }
  396.  
  397.     .comments_order a:hover {
  398.       color: #487284;
  399.     }
  400.   `;
  401. }
  402.  
  403. if (FLAGS.USERSTYLE_COMMENTS_FIX) {
  404.   userStyle += `
  405.     .content-list_comments {
  406.       overflow: visible;
  407.     }
  408.  
  409.     .comment__folding-dotholder {
  410.       display: none !important;
  411.     }
  412.  
  413.     .content-list_nested-comments {
  414.       border-left: 1px solid #e3e3e3;
  415.       margin: 0;
  416.       padding-top: 20px;
  417.       padding-left: 20px !important;
  418.     }
  419.  
  420.     .content-list_comments {
  421.       /*border-left: 1px solid silver;*/
  422.       margin: 0;
  423.       padding-left: 0;
  424.       padding-top: 20px;
  425.       /*background: #FCE4EC;*/
  426.     }
  427.  
  428.     #comments-list .js-form_placeholder {
  429.       border-left: 1px solid #e3e3e3;
  430.       padding-left: 20px;
  431.     }
  432.  
  433.     .comments_new-line {
  434.       border-left: 1px solid #777;
  435.       border-bottom: 1px solid #777;
  436.       border-top: 1px solid #777;
  437.       margin-left: -${FLAGS.LINE_LEN * 21}px !important;
  438.       background: white;
  439.       padding-bottom: 4px;
  440.     }
  441.  
  442.     /* .comment__head_topic-author.comment__head_new-comment */
  443.     .comment__head_topic-author .user-info {
  444.       text-decoration: underline;
  445.     }
  446.  
  447.     /* фикс, когда не добавляется класс &_plus или minus при user_vote_action */
  448.     .voting-wjt__button[title="Вы проголосовали положительно"] {
  449.       color: #7ba600;
  450.     }
  451.     .voting-wjt__button[title="Вы проголосовали отрицательно"] {
  452.       color: #d53c30;
  453.     }
  454.   `;
  455. }
  456.  
  457. if (FLAGS.USERSTYLE_COMMENTS_FIX && FLAGS.RAINBOW_NEW_LINE) {
  458.   userStyle += `
  459.     .comments_new-line-1 {
  460.       border-color: #0caefb;
  461.     }
  462.  
  463.     .comments_new-line-2 {
  464.       border-color: #06feb7;
  465.     }
  466.  
  467.     .comments_new-line-3 {
  468.       border-color: #fbcb02;
  469.     }
  470.  
  471.     .comments_new-line-0 {
  472.       border-color: #fb0543;
  473.     }
  474.   `;
  475. }
  476.  
  477. if (FLAGS.USERSTYLE_COMMENTS_FIX && FLAGS.REDUCE_NEW_LINES) {
  478.   userStyle += `
  479.     .comments_new-line .comments_new-line {
  480.       margin-left: -${(FLAGS.LINE_LEN - 1) * 21}px !important;
  481.     }
  482.   `;
  483. }
  484.  
  485. if (FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE) {
  486.   userStyle += `
  487.     .comment__message img {
  488.       max-height: ${FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE}px;
  489.     }
  490.  
  491.     .comment__message .spoiler .img {
  492.       max-height: auto;
  493.     }
  494.   `;
  495. }
  496.  
  497. if (FLAGS.USERSTYLE_CODE_FIX) {
  498.   let addFont = '';
  499.   if (FLAGS.USERSTYLE_CODE_FONT) {
  500.     addFont = FLAGS.USERSTYLE_CODE_FONT;
  501.     if (addFont.indexOf(' ') >= 0) {
  502.       addFont = `"${addFont}"`;
  503.     }
  504.     addFont += ',';
  505.   }
  506.  
  507.   const tabSize = FLAGS.USERSTYLE_CODE_TABSIZE || 4;
  508.  
  509.   userStyle += `
  510.     .editor .text-holder textarea,
  511.     .tm-editor__textarea {
  512.       font-family: ${addFont} 'Ubuntu Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Courier New', monospace;
  513.     }
  514.  
  515.     code {
  516.       font-family: ${addFont} 'Ubuntu Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Courier New', monospace !important;;
  517.       -o-tab-size: ${tabSize};
  518.       -moz-tab-size: ${tabSize};
  519.       tab-size: ${tabSize};
  520.       background: #f7f7f7;
  521.       border-radius: 3px;
  522.       color: #505c66;
  523.       display: inline-block;
  524.       font-weight: 500;
  525.       line-height: 1.29;
  526.       padding: 5px 9px;
  527.       vertical-align: 1px;
  528.     }
  529.   `;
  530. }
  531.  
  532. if (FLAGS.USERSTYLE_SPOILER_BORDERS) {
  533.   userStyle += `
  534.     .spoiler .spoiler_text {
  535.       border: 1px dashed rgb(12, 174, 251);
  536.     }
  537.   `;
  538. }
  539.  
  540. if (FLAGS.USERSTYLE_STATIC_STICKY) {
  541.   userStyle += `
  542.     .wrapper-sticky,
  543.     .js-ad_sticky,
  544.     .js-ad_sticky_comments {
  545.       position: static !important;
  546.     }
  547.     .sticky-spacer {
  548.       display: none !important;
  549.     }
  550.   `;
  551. }
  552.  
  553. if (FLAGS.GIF_STOP) {
  554.   userStyle += `
  555.     .habrafix_gif-stop:hover {
  556.       outline: 4px solid #548eaa;
  557.       outline-offset: -4px;
  558.     }
  559.   `;
  560. }
  561.  
  562. if (FLAGS.USERSTYLE_HLJS_LANG) {
  563.   let hover = '';
  564.   if (FLAGS.USERSTYLE_HLJS_LANG_HOVER) hover = ':hover';
  565.   userStyle += `
  566.     pre {
  567.       position: relative;
  568.     }
  569.  
  570.     .hljs${hover}::after {
  571.       position: absolute;
  572.       font-size: 12px;
  573.       content: 'code';
  574.       right: 0;
  575.       top: 0;
  576.       padding: 1px 5px 0 4px;
  577.       /*border-bottom: 1px solid #e5e8ec;
  578.       border-left: 1px solid #e5e8ec;
  579.       border-bottom-left-radius: 3px;
  580.       color: #505c66;*/
  581.       opacity: .5;
  582.     }
  583.   `;
  584.   userStyle += [
  585.     ['1c', '1C:Enterprise (v7, v8)'],
  586.     ['abnf', 'Augmented Backus-Naur Form'],
  587.     ['accesslog', 'Access log'],
  588.     ['actionscript', 'ActionScript'],
  589.     ['ada', 'Ada'],
  590.     ['apache', 'Apache'],
  591.     ['applescript', 'AppleScript'],
  592.     ['arduino', 'Arduino'],
  593.     ['armasm', 'ARM Assembly'],
  594.     ['asciidoc', 'AsciiDoc'],
  595.     ['aspectj', 'AspectJ'],
  596.     ['autohotkey', 'AutoHotkey'],
  597.     ['autoit', 'AutoIt'],
  598.     ['avrasm', 'AVR Assembler'],
  599.     ['awk', 'Awk'],
  600.     ['axapta', 'Axapta'],
  601.     ['bash', 'Bash'],
  602.     ['basic', 'Basic'],
  603.     ['bnf', 'Backus–Naur Form'],
  604.     ['brainfuck', 'Brainfuck'],
  605.     ['cal', 'C/AL'],
  606.     ['capnproto', 'Cap’n Proto'],
  607.     ['ceylon', 'Ceylon'],
  608.     ['clean', 'Clean'],
  609.     ['clojure-repl', 'Clojure REPL'],
  610.     ['clojure', 'Clojure'],
  611.     ['cmake', 'CMake'],
  612.     ['coffeescript', 'CoffeeScript'],
  613.     ['coq', 'Coq'],
  614.     ['cos', 'Caché Object Script'],
  615.     ['cpp', 'C++'],
  616.     ['crmsh', 'crmsh'],
  617.     ['crystal', 'Crystal'],
  618.     ['cs', 'C#'],
  619.     ['csp', 'CSP'],
  620.     ['css', 'CSS'],
  621.     ['d', 'D'],
  622.     ['dart', 'Dart'],
  623.     ['delphi', 'Delphi'],
  624.     ['diff', 'Diff'],
  625.     ['django', 'Django'],
  626.     ['dns', 'DNS Zone file'],
  627.     ['dockerfile', 'Dockerfile'],
  628.     ['dos', 'DOS .bat'],
  629.     ['dsconfig', 'dsconfig'],
  630.     ['dts', 'Device Tree'],
  631.     ['dust', 'Dust'],
  632.     ['ebnf', 'Extended Backus-Naur Form'],
  633.     ['elixir', 'Elixir'],
  634.     ['elm', 'Elm'],
  635.     ['erb', 'ERB (Embedded Ruby)'],
  636.     ['erlang-repl', 'Erlang REPL'],
  637.     ['erlang', 'Erlang'],
  638.     ['excel', 'Excel'],
  639.     ['fix', 'FIX'],
  640.     ['flix', 'Flix'],
  641.     ['fortran', 'Fortran'],
  642.     ['fsharp', 'F#'],
  643.     ['gams', 'GAMS'],
  644.     ['gauss', 'GAUSS'],
  645.     ['gcode', 'G-code (ISO 6983)'],
  646.     ['gherkin', 'Gherkin'],
  647.     ['glsl', 'GLSL'],
  648.     ['go', 'Go'],
  649.     ['golo', 'Golo'],
  650.     ['gradle', 'Gradle'],
  651.     ['groovy', 'Groovy'],
  652.     ['haml', 'Haml'],
  653.     ['handlebars', 'Handlebars'],
  654.     ['haskell', 'Haskell'],
  655.     ['haxe', 'Haxe'],
  656.     ['hsp', 'HSP'],
  657.     ['htmlbars', 'HTMLBars'],
  658.     ['http', 'HTTP'],
  659.     ['hy', 'Hy'],
  660.     ['inform7', 'Inform 7'],
  661.     ['ini', 'Ini'],
  662.     ['irpf90', 'IRPF90'],
  663.     ['java', 'Java'],
  664.     ['javascript', 'JavaScript'],
  665.     ['jboss-cli', 'jboss-cli'],
  666.     ['json', 'JSON'],
  667.     ['julia-repl', 'Julia REPL'],
  668.     ['julia', 'Julia'],
  669.     ['kotlin', 'Kotlin'],
  670.     ['lasso', 'Lasso'],
  671.     ['ldif', 'LDIF'],
  672.     ['leaf', 'Leaf'],
  673.     ['less', 'Less'],
  674.     ['lisp', 'Lisp'],
  675.     ['livecodeserver', 'LiveCode'],
  676.     ['livescript', 'LiveScript'],
  677.     ['llvm', 'LLVM IR'],
  678.     ['lsl', 'Linden Scripting Language'],
  679.     ['lua', 'Lua'],
  680.     ['makefile', 'Makefile'],
  681.     ['markdown', 'Markdown'],
  682.     ['mathematica', 'Mathematica'],
  683.     ['matlab', 'Matlab'],
  684.     ['maxima', 'Maxima'],
  685.     ['mel', 'MEL'],
  686.     ['mercury', 'Mercury'],
  687.     ['mipsasm', 'MIPS Assembly'],
  688.     ['mizar', 'Mizar'],
  689.     ['mojolicious', 'Mojolicious'],
  690.     ['monkey', 'Monkey'],
  691.     ['moonscript', 'MoonScript'],
  692.     ['n1ql', 'N1QL'],
  693.     ['nginx', 'Nginx'],
  694.     ['nimrod', 'Nimrod'],
  695.     ['nix', 'Nix'],
  696.     ['nsis', 'NSIS'],
  697.     ['objectivec', 'Objective-C'],
  698.     ['ocaml', 'OCaml'],
  699.     ['openscad', 'OpenSCAD'],
  700.     ['oxygene', 'Oxygene'],
  701.     ['parser3', 'Parser3'],
  702.     ['perl', 'Perl'],
  703.     ['pf', 'pf'],
  704.     ['plaintext', 'простой текст'], // на будущее
  705.     ['php', 'PHP'],
  706.     ['pony', 'Pony'],
  707.     ['powershell', 'PowerShell'],
  708.     ['processing', 'Processing'],
  709.     ['profile', 'Python profile'],
  710.     ['prolog', 'Prolog'],
  711.     ['protobuf', 'Protocol Buffers'],
  712.     ['puppet', 'Puppet'],
  713.     ['purebasic', 'PureBASIC'],
  714.     ['python', 'Python'],
  715.     ['q', 'Q'],
  716.     ['qml', 'QML'],
  717.     ['r', 'R'],
  718.     ['rib', 'RenderMan RIB'],
  719.     ['roboconf', 'Roboconf'],
  720.     ['routeros', 'Microtik RouterOS script'],
  721.     ['rsl', 'RenderMan RSL'],
  722.     ['ruby', 'Ruby'],
  723.     ['ruleslanguage', 'Oracle Rules Language'],
  724.     ['rust', 'Rust'],
  725.     ['scala', 'Scala'],
  726.     ['scheme', 'Scheme'],
  727.     ['scilab', 'Scilab'],
  728.     ['scss', 'SCSS'],
  729.     ['shell', 'Shell Session'],
  730.     ['smali', 'Smali'],
  731.     ['smalltalk', 'Smalltalk'],
  732.     ['sml', 'SML'],
  733.     ['sqf', 'SQF'],
  734.     ['sql', 'SQL'],
  735.     ['stan', 'Stan'],
  736.     ['stata', 'Stata'],
  737.     ['step21', 'STEP Part 21'],
  738.     ['stylus', 'Stylus'],
  739.     ['subunit', 'SubUnit'],
  740.     ['swift', 'Swift'],
  741.     ['taggerscript', 'Tagger Script'],
  742.     ['tap', 'Test Anything Protocol'],
  743.     ['tcl', 'Tcl'],
  744.     ['tex', 'TeX'],
  745.     ['thrift', 'Thrift'],
  746.     ['tp', 'TP'],
  747.     ['twig', 'Twig'],
  748.     ['typescript', 'TypeScript'],
  749.     ['vala', 'Vala'],
  750.     ['vbnet', 'VB.NET'],
  751.     ['vbscript-html', 'VBScript in HTML'],
  752.     ['vbscript', 'VBScript'],
  753.     ['verilog', 'Verilog'],
  754.     ['vhdl', 'VHDL'],
  755.     ['vim', 'Vim Script'],
  756.     ['x86asm', 'Intel x86 Assembly'],
  757.     ['xl', 'XL'],
  758.     ['xml', 'HTML, XML'],
  759.     ['xquery', 'XQuery'],
  760.     ['yaml', 'YAML'],
  761.     ['zephir', 'Zephir'],
  762.   ].map(([langTag, langName]) => `.hljs.${langTag}${hover}::after{content:'${langName} [${langTag}]'}`).join('');
  763. }
  764.  
  765. if (FLAGS.USERSTYLE_CODE_NIGHT) {
  766.   userStyle += `
  767.   .night_mode_switcher {
  768.     box-sizing: border-box;
  769.     position: fixed;
  770.     width: 32px;
  771.     height: 32px;
  772.     right: 32px;
  773.     bottom: 32px;
  774.     z-index: 101;
  775.     background-color: transparent;
  776.     border-radius: 50%;
  777.     border: 4px solid #aaa;
  778.     border-right-width: 16px;
  779.     transition: border-color 0.1s ease-out;
  780.   }
  781.  
  782.   .night_mode_switcher:hover {
  783.     border-color: #333;
  784.   }
  785.  
  786.   .night .night_mode_switcher {
  787.     border-color: #515151;
  788.   }
  789.  
  790.   .night .night_mode_switcher:hover {
  791.     border-color: #9e9e9e;
  792.   }
  793.  
  794.   .night ::-webkit-scrollbar,
  795.   .night ::-webkit-scrollbar-corner,
  796.   .night ::-webkit-scrollbar-track-piece {
  797.     background-color: #000;
  798.   }
  799.   
  800.   .night ::-webkit-scrollbar-thumb {
  801.     background-color: #22272b;
  802.     border: 1px solid #000;
  803.   }
  804.   
  805.   .night ::-webkit-scrollbar-thumb:hover {
  806.     background-color: #2C3237;
  807.   }
  808.   
  809.   .night {
  810.     scrollbar-color: dark;
  811.     scrollbar-face-color: #22272b;
  812.     scrollbar-track-color: #000;
  813.     scrollbar-color: #22272b #000;
  814.   }
  815.  
  816.   /* bg */
  817.   .night .sidebar-block__suggest,
  818.   .night .dropdown-container,
  819.   .night .poll-result__bar,
  820.   .night .comments_new-line,
  821.   .night .tm-editor__textarea,
  822.   .night .layout,
  823.   .night .toggle-menu__most-read,
  824.   .night .toggle-menu_most-comments {
  825.     background: #171c20;
  826.   }
  827.  
  828.   /* text */
  829.   .night .companies-rating__name:not(:hover),
  830.   .night .profile-section__title,
  831.   .night .profile-section__about-text,
  832.   .night .profile-section__invited,
  833.   .night .sidebar-block__suggest,
  834.   .night .user-message__body,
  835.   .night .promo-block__title_total,
  836.   .night .beta-anounce__text,
  837.   .night .defination-list__label,
  838.   .night .defination-list__value,
  839.   .night .search-field__select,
  840.   .night .search-field__input[type="text"],
  841.   .night .search-form__field,
  842.   .night .post-info__title:not(:hover),
  843.   .night .dropdown__user-stats,
  844.   .night .dropdown-container_white .user-info__special,
  845.   .night .n-dropdown-menu__item-link,
  846.   .night body,
  847.   .night .default-block__polling-title,
  848.   .night .poll-result__data-label,
  849.   .night code,
  850.   .night .user-info__fullname,
  851.   .night .user-info__specialization,
  852.   .night .page-header__info-title,
  853.   .night .page-header__info-desc,
  854.   .night .post__title-text,
  855.   .night .post__title_link,
  856.   .night .checkbox__label,
  857.   .night .radio__label,
  858.   .night .tm-editor__textarea,
  859.   .night .footer-block__title,
  860.   .night #TMpanel .container .bmenu > a.current,
  861.   .night .post__text-html,
  862.   .night .comment__message,
  863.   .night .comment-form__preview {
  864.     color: #9e9e9e;
  865.   }
  866.  
  867.   /* non important text */
  868.   .night .icon-svg_bookmark,
  869.   .night .icon-svg_views-count,
  870.   .night .icon-svg_post-comments,
  871.   .night .icon-svg_edit,
  872.   .night .icon-svg_recommend,
  873.   .night .icon-svg_report,
  874.   .night .voting-wjt__button:not(.voting-wjt__button_plus):not(.voting-wjt__button_minus),
  875.   .night .icon_comment-edit,
  876.   .night .icon_comment-anchor,
  877.   .night .icon_comment-bookmark,
  878.   .night .icon_comment-branch,
  879.   .night .icon_comment-arrow-up,
  880.   .night .icon_comment-arrow-down,
  881.   .night .layout__elevator {
  882.     color: #515151;
  883.   }
  884.  
  885.   .night .voting-wjt__button:not(.voting-wjt__button_plus):not(.voting-wjt__button_minus):hover,
  886.   .night .icon_comment-anchor:hover,
  887.   .night .icon_comment-bookmark:hover,
  888.   .night .icon_comment-branch:hover,
  889.   .night .icon_comment-arrow-up:hover,
  890.   .night .icon_comment-arrow-down:hover {
  891.     color: #548eaa;
  892.   }
  893.  
  894.   .night .n-dropdown-menu__item-link:hover {
  895.     color: white;
  896.   }
  897.  
  898.   /* top lvl bg */
  899.   .night .h-popover,
  900.   .night .profile-section__user-hub:not(.profile-section__user-hub_cross),
  901.   .night a.sort-panel__item-toggler.active,
  902.   .night .checkbox__label::before,
  903.   .night .radio__label::before,
  904.   .night .content-list__item_conversation:hover,
  905.   .night .search-field__select,
  906.   .night .search-field__input[type="text"],
  907.   .night .search-form__field,
  908.   .night .dropdown-container,
  909.   .night .n-dropdown-menu,
  910.   .night .post__translatation,
  911.   .night code,
  912.   .night .megapost-teasers,
  913.   .night .tm-editor_comments,
  914.   .night .promo-block__header,
  915.   .night .post__text-html blockquote,
  916.   .night .default-block,
  917.   .night .post-share,
  918.   .night .company-info__author,
  919.   .night .layout__row_footer-links {
  920.     background: #22272B;
  921.   }
  922.  
  923.   /* not important bg */
  924.   .night .profile-section__user-hub:not(.profile-section__user-hub_cross):hover,
  925.   .night .btn_blue.disabled,
  926.   .night .btn_blue[disabled],
  927.   .night .tracker_page table.tracker_folowers tr.new,
  928.   .night .dropdown__user-stats,
  929.   .night .comment__head_topic-author,
  930.   .night .promo-item:hover,
  931.   .night .layout__row_navbar,
  932.   .night .layout__row_footer,
  933.   .night #TMpanel,
  934.   .night .n-dropdown-menu__item-link_flow:hover {
  935.     background: #1f2327;
  936.   }
  937.  
  938.   /* borders */
  939.   .night #tracker-page .tracker-table__header,
  940.   .night #tracker-page .tracker-table__cell,
  941.   .night .h-popover,
  942.   .night .h-popover__stats,
  943.   .night .default-block__footer,
  944.   .night .toggle-menu__item-link_bordered,
  945.   .night .default-block_promote,
  946.   .night .sort-panel,
  947.   .night .n-dropdown-menu_flows,
  948.   .night .for_users_only_msg,
  949.   .night #comments-list .js-form_placeholder,
  950.   .night .sidebar-block__suggest,
  951.   .night .content-list_preview-message,
  952.   .night .btn_outline_blue[disabled],
  953.   .night .user-message__body_html pre code,
  954.   .night .content-list_user-dialog,
  955.   .night .wysiwyg-toolbar,
  956.   .night .content-list__item_bordered,
  957.   .night .promo-block__total,
  958.   .night .search-field__select,
  959.   .night .search-field__input[type="text"],
  960.   .night .search-form__field,
  961.   .night .tracker_page table.tracker_folowers tr td,
  962.   .night .tracker_page table.tracker_folowers tr th,
  963.   .night .stacked-menu__item_devided,
  964.   .night .post__text-html table,
  965.   .night .post__text-html table td,
  966.   .night .post__text-html table th,
  967.   .night .n-dropdown-menu__item_border,
  968.   .night .dropdown-container,
  969.   .night .default-block_bordered,
  970.   .night .default_block_polling,
  971.   .night .column-wrapper_tabs .sidebar_right,
  972.   .night .post__type-label,
  973.   .night .promo-block__header,
  974.   .night .user-info__contacts,
  975.   .night .comment__message pre code,
  976.   .night .comment-form__preview pre code,
  977.   .night .sandbox-panel,
  978.   .night .comment__post-title,
  979.   .night .tm-editor__textarea,
  980.   .night .promo-block__footer,
  981.   .night .author-panel,
  982.   .night .promo-block,
  983.   .night .post__text-html pre code,
  984.   .night .footer-block__title,
  985.   .night #TMpanel,
  986.   .night .layout__row_navbar,
  987.   .night .page-header_bordered,
  988.   .night .post-stats,
  989.   .night .company-info__about,
  990.   .night .company-info_post-additional,
  991.   .night .company-info__contacts,
  992.   .night .post-share,
  993.   .night .content-list__item_devided,
  994.   .night .comments_order,
  995.   .night .comments-section__head,
  996.   .night .content-list_nested-comments,
  997.   .night .default-block__header,
  998.   .night .column-wrapper_bordered,
  999.   .night .tabs-menu,
  1000.   .night .toggle-menu {
  1001.     border-color: #393d41;
  1002.   }
  1003.  
  1004.   .night .rating-info__progress,
  1005.   .night .poll-result__progress {
  1006.     background-color: #515151;
  1007.   }
  1008.  
  1009.   .night .poll-result__progress_winner {
  1010.     background-color: #5e8eac;
  1011.   }
  1012.  
  1013.   .night .layout__elevator:hover {
  1014.     background-color: #22272B;
  1015.   }
  1016.  
  1017.   .night .comment__head_topic-author {
  1018.     background: #003030;
  1019.   }
  1020.  
  1021.   .night .comment__head_my-comment {
  1022.     background: #003000;
  1023.   }
  1024.  
  1025.   .night .comment__head_new-comment {
  1026.     background: black
  1027.   }
  1028.  
  1029.   .night .user-info__nickname_comment,
  1030.   .night .icon-svg_logo-habrahabr {
  1031.     color: inherit;
  1032.   }
  1033.  
  1034.   .night [disabled] {
  1035.     opacity: 0.5
  1036.   }
  1037.  
  1038.   .night .content-list_comments .comment__folding-dotholder::before,
  1039.   .night .comment.is_selected::after {
  1040.     filter: invert(0.9);
  1041.   }
  1042.  
  1043.   /* img filter */
  1044.   .night .comment__message img,
  1045.   .night .comment-form__preview img,
  1046.   .night .default-block__content #facebook_like_box,
  1047.   .night .default-block__content #vk_groups,
  1048.   .night .post img,
  1049.   .night .page-header__banner img,
  1050.   .night .company_top_banner img,
  1051.   .night img .teaser__image,
  1052.   .night .teaser__image-pic,
  1053.   .night .article__body img {
  1054.     filter: brightness(0.5);
  1055.     transition: filter .6s ease-out;
  1056.   }
  1057.  
  1058.   .night .comment__message img:hover,
  1059.   .night .comment-form__preview img:hover,
  1060.   .night .default-block__content #facebook_like_box:hover,
  1061.   .night .default-block__content #vk_groups:hover,
  1062.   .night img[alt="en"],
  1063.   .night img[alt="habr"],
  1064.   .night img:hover,
  1065.   .night a.post-author__link img,
  1066.   .night img.user-info__image-pic,
  1067.   .night .teaser__image-pic:hover,
  1068.   .night .teaser__image:hover {
  1069.     filter: none;
  1070.   }
  1071.  
  1072.   /* Atelier Cave Dark */
  1073.   .night .hljs-comment,
  1074.   .night .hljs-quote {
  1075.     color:#7e7887 !important
  1076.   }
  1077.   .night .hljs-variable,
  1078.   .night .hljs-template-variable,
  1079.   .night .hljs-attribute,
  1080.   .night .hljs-regexp,
  1081.   .night .hljs-link,
  1082.   .night .hljs-tag,
  1083.   .night .hljs-name,
  1084.   .night .hljs-selector-id,
  1085.   .night .hljs-selector-class {
  1086.     color:#be4678 !important
  1087.   }
  1088.   .night .hljs-number,
  1089.   .night .hljs-meta,
  1090.   .night .hljs-built_in,
  1091.   .night .hljs-builtin-name,
  1092.   .night .hljs-literal,
  1093.   .night .hljs-type,
  1094.   .night .hljs-params {
  1095.     color:#aa573c !important
  1096.   }
  1097.   .night .hljs-string,
  1098.   .night .hljs-symbol,
  1099.   .night .hljs-bullet {
  1100.     color:#2a9292 !important
  1101.   }
  1102.   .night .hljs-title,
  1103.   .night .hljs-section {
  1104.     color:#576ddb !important
  1105.   }
  1106.   .night .hljs-keyword,
  1107.   .night .hljs-selector-tag {
  1108.     color:#955ae7 !important
  1109.   }
  1110.   .night .hljs-deletion,
  1111.   .night .hljs-addition {
  1112.     color:#19171c !important;
  1113.     display:inline-block !important;
  1114.     width:100% !important
  1115.   }
  1116.   .night .hljs-deletion {
  1117.     background-color:#be4678 !important
  1118.   }
  1119.   .night .hljs-addition {
  1120.     background-color:#2a9292 !important
  1121.   }
  1122.   .night .hljs {
  1123.     display:block !important;
  1124.     overflow-x:auto !important;
  1125.     background:#19171c !important;
  1126.     color:#8b8792 !important;
  1127.     /*padding:0.5em !important*/
  1128.   }
  1129.   .night .hljs-emphasis {
  1130.     font-style:italic !important
  1131.   }
  1132.   .night .hljs-strong {
  1133.     font-weight:bold !important
  1134.   }
  1135.   `;
  1136. }
  1137.  
  1138. if (FLAGS.USERSTYLE_CONFIG_INTERFACE) {
  1139.   userStyle += `
  1140.   .config_button {
  1141.     box-sizing: border-box;
  1142.     position: fixed;
  1143.     width: 32px;
  1144.     height: 25px;
  1145.     right: 32px;
  1146.     bottom: ${FLAGS.NIGHT_MODE ? 88 : 32}px;
  1147.     z-index: 101;
  1148.     background: -webkit-linear-gradient(top, #aaa 50%, transparent 50%);
  1149.     background: -moz-linear-gradient(top, #aaa 50%, transparent 50%);
  1150.     background: -moz-linear-gradient(top, #aaa 50%, transparent 50%);
  1151.     background-size: 10px 10px;
  1152.     transition: background 0.1s ease-out;
  1153.   }
  1154.  
  1155.   .config_button:hover {
  1156.     background: -webkit-linear-gradient(top, #333 50%, transparent 50%);
  1157.     background: -moz-linear-gradient(top, #333 50%, transparent 50%);
  1158.     background: -moz-linear-gradient(top, #333 50%, transparent 50%);
  1159.     background-size: 10px 10px;
  1160.   }
  1161.  
  1162.   .night .config_button {
  1163.     background: -webkit-linear-gradient(top, #515151 50%, transparent 50%);
  1164.     background: -moz-linear-gradient(top, #515151 50%, transparent 50%);
  1165.     background: -moz-linear-gradient(top, #515151 50%, transparent 50%);
  1166.     background-size: 10px 10px;
  1167.   }
  1168.  
  1169.   .night .config_button:hover {
  1170.     background: -webkit-linear-gradient(top, #9e9e9e 50%, transparent 50%);
  1171.     background: -moz-linear-gradient(top, #9e9e9e 50%, transparent 50%);
  1172.     background: -moz-linear-gradient(top, #9e9e9e 50%, transparent 50%);
  1173.     background-size: 10px 10px;
  1174.   }
  1175.  
  1176.   .config_frame {
  1177.     box-sizing: border-box;
  1178.     position: fixed;
  1179.     right: 80px;
  1180.     bottom: 32px;
  1181.     z-index: 102;
  1182.     border: 1px solid #aaa;
  1183.     padding: 8px;
  1184.     background: #f7f7f7;
  1185.     -webkit-user-select: none;
  1186.     -moz-user-select: none;
  1187.     -ms-user-select: none;
  1188.     user-select: none;
  1189.     overflow-y: auto;
  1190.     max-height: calc(100vh - 64px);
  1191.     min-width: 390px;
  1192.   }
  1193.   .config_frame label:hover {
  1194.     cursor: pointer;
  1195.     background: rgba(128, 128, 128, 0.3);
  1196.   }
  1197.   .config_frame input {
  1198.     cursor: pointer;
  1199.     position: absolute;
  1200.     opacity: 0;
  1201.   }
  1202.   .config_frame input + span:before {
  1203.     content: '';
  1204.     display: inline-block;
  1205.     width: 0.5em;
  1206.     height: 0.5em;
  1207.     margin: 0 0.4em 0.1em 0.3em;
  1208.     outline: 1px solid currentcolor;
  1209.     outline-offset: 1px;
  1210.   }
  1211.   .config_frame input:checked + span:before {
  1212.     background: currentcolor;
  1213.   }
  1214.   .night .config_frame {
  1215.     background: #22272B;
  1216.     border-color: #393d41;
  1217.   }
  1218.   `;
  1219. }
  1220.  
  1221. userStyleEl.innerHTML = userStyle;
  1222.  
  1223. const navigatorEdge = /Edge/.test(navigator.userAgent);
  1224.  
  1225. function readyHead(fn) {
  1226.   if (document.body) { // если есть body, значит head готов
  1227.     fn();
  1228.   } else if (document.documentElement && !navigatorEdge) {
  1229.     const observer = new MutationObserver(() => {
  1230.       if (document.body) {
  1231.         observer.disconnect();
  1232.         fn();
  1233.       }
  1234.     });
  1235.     observer.observe(document.documentElement, { childList: true });
  1236.   } else {
  1237.     // рекурсивное ожидание появления DOM
  1238.     setTimeout(() => readyHead(fn), 16);
  1239.   }
  1240. }
  1241.  
  1242. readyHead(() => {
  1243.   if (document.getElementById('habrafixmarker')) return;
  1244.   if (FLAGS.USERSTYLE) document.head.appendChild(userStyleEl);
  1245.   if (FLAGS.NIGHT_MODE && userConfig.getItem('night_mode')) {
  1246.     document.documentElement.classList.add('night');
  1247.   }
  1248. });
  1249.  
  1250. function ready(fn) {
  1251.   const { readyState } = document;
  1252.   if (readyState === 'loading') {
  1253.     document.addEventListener('DOMContentLoaded', () => {
  1254.       fn();
  1255.     });
  1256.   } else {
  1257.     fn();
  1258.   }
  1259. }
  1260.  
  1261. ready(() => {
  1262.   if (document.getElementById('habrafixmarker')) return;
  1263.   if (FLAGS.COMMENTS_MD) {
  1264.     const mdSelectorEl = document.getElementById('comment_markdown');
  1265.     if (mdSelectorEl) {
  1266.       if (userConfig.getItem('comment_markdown')) mdSelectorEl.checked = true;
  1267.       mdSelectorEl.addEventListener('input', () => {
  1268.         userConfig.setItem('comment_markdown', mdSelectorEl.checked);
  1269.       });
  1270.     }
  1271.   }
  1272.  
  1273.   // надо ли ещё
  1274.   Array.from(document.querySelectorAll('iframe[src^="https://codepen.io/"]'))
  1275.     .map(el => el.setAttribute('scrolling', 'no'));
  1276.  
  1277.   // остановка гифок по клику и воспроизведение при повторном клике
  1278.   function toggleGIF(el) {
  1279.     // если атрибут со старым линком пуст или отсутствует
  1280.     if (!el.dataset.oldSrc) {
  1281.       // заменим ссылку на data-url-svg с треугольником в круге
  1282.       const w = Math.max(el.clientWidth || 256, 16);
  1283.       const h = Math.max(el.clientHeight || 128, 16);
  1284.       const cx = w / 2;
  1285.       const cy = h / 2;
  1286.       const r = Math.min(w, h) / 4;
  1287.       const ax = (r * 61) / 128;
  1288.       const by = (r * 56) / 128;
  1289.       const bx = (r * 35) / 128;
  1290.       const svg = `data:image/svg+xml;utf8,
  1291.         <svg width='${w}' height='${h}' baseProfile='full' xmlns='http://www.w3.org/2000/svg'>
  1292.           <rect x='0' y='0' width='${w}' height='${h}' fill='${FLAGS.GIF_STOP_COLOR_BG}'/>
  1293.           <circle cx='${cx}' cy='${cy}' r='${r}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1294.           <polygon points='${cx + ax} ${cy} ${cx - bx} ${cy - by} ${cx - bx} ${cy + by}' fill='${FLAGS.GIF_STOP_COLOR_BG}' />
  1295.         </svg>
  1296.       `;
  1297.       el.dataset.oldSrc = el.getAttribute('src'); // eslint-disable-line no-param-reassign
  1298.       el.setAttribute('src', svg);
  1299.     } else if (FLAGS.GIF_STOP_OVERTYPE) {
  1300.       // иначе поставим svg с троеточием
  1301.       const w = el.clientWidth;
  1302.       const h = el.clientHeight;
  1303.       const cx = w / 2;
  1304.       const cy = h / 2;
  1305.       const r = Math.min(w, h) / 4;
  1306.       const r2 = r / 4;
  1307.       const svg = `data:image/svg+xml;utf8,
  1308.         <svg width='${w}' height='${h}' baseProfile='full' xmlns='http://www.w3.org/2000/svg'>
  1309.           <rect x='0' y='0' width='${w}' height='${h}' fill='${FLAGS.GIF_STOP_COLOR_BG}'/>
  1310.           <circle cx='${cx - r}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1311.           <circle cx='${cx}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1312.           <circle cx='${cx + r}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1313.         </svg>
  1314.       `;
  1315.       el.setAttribute('src', svg);
  1316.       // когда отрендерится троеточие, можно менять на исходную гифку
  1317.       setTimeout(() => {
  1318.         if (el.dataset.oldSrc) {
  1319.           el.setAttribute('src', el.dataset.oldSrc);
  1320.           el.dataset.oldSrc = ''; // eslint-disable-line no-param-reassign
  1321.         }
  1322.       }, 100);
  1323.     } else {
  1324.       const img = document.createElement('img');
  1325.       img.setAttribute('src', el.dataset.oldSrc);
  1326.       if (el.hasAttribute('align')) {
  1327.         img.setAttribute('align', el.getAttribute('align'));
  1328.       }
  1329.       el.parentNode.insertBefore(img, el);
  1330.       img.onclick = () => toggleGIF(img); // eslint-disable-line no-param-reassign
  1331.       el.parentNode.removeChild(el);
  1332.     }
  1333.   }
  1334.  
  1335.   if (FLAGS.GIF_STOP) {
  1336.     Array.from(document.querySelectorAll('.post__text img[src$=".gif"], .comment__message img[src$=".gif"]'))
  1337.       .forEach((el) => {
  1338.         if (FLAGS.GIF_STOP_ONLOAD) toggleGIF(el);
  1339.         el.classList.add('habrafix_gif-stop');
  1340.         el.onclick = () => toggleGIF(el); // eslint-disable-line no-param-reassign
  1341.       });
  1342.   }
  1343.  
  1344.   // фиксирование высоты публикации чтобы убрать прыжки прокрутки
  1345.   if (FLAGS.FIX_JUMPING_SCROLL) {
  1346.     const postBodyEl = document.querySelector('.post__body_full');
  1347.     const checkPostBodyInViewport = () => postBodyEl.getBoundingClientRect().bottom > 0;
  1348.     const autoHeightPost = () => {
  1349.       if (checkPostBodyInViewport()) {
  1350.         window.removeEventListener('scroll', autoHeightPost);
  1351.         postBodyEl.style.height = null;
  1352.         postBodyEl.style.overflow = null;
  1353.       }
  1354.     };
  1355.     if (postBodyEl && !checkPostBodyInViewport()) {
  1356.       const h = postBodyEl.clientHeight;
  1357.       postBodyEl.style.height = `${h}px`;
  1358.       postBodyEl.style.overflow = 'hidden';
  1359.       window.addEventListener('scroll', autoHeightPost);
  1360.     }
  1361.   }
  1362.  
  1363.   // счетчики кармы
  1364.   if (FLAGS.KARMA_DETAILS) {
  1365.     Array.from(document.querySelectorAll('.user-info__stats-item.stacked-counter')).forEach((itemCounter) => {
  1366.       itemCounter.style.marginRight = '16px'; // eslint-disable-line no-param-reassign
  1367.     });
  1368.     Array.from(document.querySelectorAll('.page-header__stats_karma')).forEach((karmaEl) => {
  1369.       karmaEl.style.width = 'auto'; // eslint-disable-line no-param-reassign
  1370.       karmaEl.style.minWidth = '84px'; // eslint-disable-line no-param-reassign
  1371.     });
  1372.     Array.from(document.querySelectorAll('.stacked-counter[href="/info/help/karma/"]')).forEach((couterEl) => {
  1373.       let total = parseInt(couterEl.title, 10);
  1374.       const scoreEl = couterEl.querySelector('.stacked-counter__value');
  1375.       if (!scoreEl || !total) return;
  1376.       couterEl.style.width = 'auto'; // eslint-disable-line no-param-reassign
  1377.       couterEl.style.minWidth = '84px'; // eslint-disable-line no-param-reassign
  1378.       const score = parseFloat(scoreEl.innerHTML.replace('–', '-').replace(',', '.'), 10);
  1379.       if (score > total) total = score;
  1380.       const likes = (total + score) / 2;
  1381.       const percent = Math.round((100 * likes) / total);
  1382.       const details = `&nbsp;= ${total} × (${percent} − ${100 - percent})%`;
  1383.       const detailsEl = document.createElement('span');
  1384.       detailsEl.innerHTML = details;
  1385.       detailsEl.style.color = '#545454';
  1386.       detailsEl.style.fontFamily = '"-apple-system",BlinkMacSystemFont,Arial,sans-serif';
  1387.       detailsEl.style.fontSize = '13px';
  1388.       detailsEl.style.fontWeight = 'normal';
  1389.       detailsEl.style.verticalAlign = 'middle';
  1390.       scoreEl.appendChild(detailsEl);
  1391.       couterEl.title += `, ${(likes).toFixed(2)} плюсов и ${(total - likes).toFixed(2)} минусов`; // eslint-disable-line no-param-reassign
  1392.     });
  1393.   }
  1394.  
  1395.   // счетчики рейтинга с подробностями
  1396.   const scoresMap = new Map();
  1397.  
  1398.   class Score {
  1399.     constructor(el) {
  1400.       this.el = el;
  1401.       this.parentEl = el.parentNode;
  1402.       const data = this.constructor.parse(el);
  1403.       this.rating = data.rating;
  1404.       this.total = data.total;
  1405.       this.likes = data.likes;
  1406.       this.dislikes = data.dislikes;
  1407.       this.isDetailed = false;
  1408.       this.observer = new MutationObserver(() => this.update());
  1409.     }
  1410.  
  1411.     setDetails(isDetailed) {
  1412.       if (this.isDetailed === isDetailed) return;
  1413.       this.isDetailed = isDetailed;
  1414.       this.update();
  1415.     }
  1416.  
  1417.     update() {
  1418.       const newChild = this.parentEl.querySelector('.voting-wjt__counter');
  1419.       if (!newChild) return;
  1420.       this.el = newChild;
  1421.       const data = this.constructor.parse(this.el);
  1422.       this.rating = data.rating;
  1423.       this.total = data.total;
  1424.       this.likes = data.likes;
  1425.       this.dislikes = data.dislikes;
  1426.       this.observer.disconnect();
  1427.       if (this.isDetailed) {
  1428.         this.details();
  1429.       } else {
  1430.         this.simply();
  1431.       }
  1432.       this.observer.observe(this.parentEl, { childList: true });
  1433.     }
  1434.  
  1435.     static parse(el) {
  1436.       let [total, likes, dislikes] = el
  1437.         .attributes.title.textContent
  1438.         .match(/[0-9]+/g).map(Number);
  1439.       let [, sign, rating] = el.innerHTML.match(/([–]?)(\d+)/); // eslint-disable-line prefer-const
  1440.       rating = Number(rating);
  1441.       if (sign) rating = -rating;
  1442.       // не знаю что там происходит при голосовании, так что на всякий случай
  1443.       const diff = rating - (likes - dislikes);
  1444.       if (diff < 0) {
  1445.         total += Math.abs(diff);
  1446.         dislikes += Math.abs(diff);
  1447.       } else if (diff > 0) {
  1448.         total += diff;
  1449.         likes += diff;
  1450.       }
  1451.       return {
  1452.         rating,
  1453.         total,
  1454.         likes,
  1455.         dislikes,
  1456.       };
  1457.     }
  1458.  
  1459.     simply() {
  1460.       let innerHTML = '';
  1461.       if (this.rating > 0) {
  1462.         innerHTML = `+${this.rating}`;
  1463.       } else if (this.rating < 0) {
  1464.         innerHTML = `–${Math.abs(this.rating)}`;
  1465.       } else {
  1466.         innerHTML = '0';
  1467.       }
  1468.       this.el.innerHTML = innerHTML;
  1469.     }
  1470.  
  1471.     details() {
  1472.       let innerHTML = '';
  1473.       if (this.rating > 0) {
  1474.         innerHTML = `+${this.rating}`;
  1475.       } else if (this.rating < 0) {
  1476.         innerHTML = `–${Math.abs(this.rating)}`;
  1477.       } else {
  1478.         innerHTML = '0';
  1479.       }
  1480.       if (this.total !== 0) {
  1481.         let details = '';
  1482.         if (FLAGS.RATING_DETAILS_PN) {
  1483.           details = `&nbsp;= ${this.likes} − ${this.dislikes}`;
  1484.         } else {
  1485.           const percent = Math.round((100 * this.likes) / this.total);
  1486.           details = `&nbsp;= ${this.total} × (${percent} − ${100 - percent})%`;
  1487.         }
  1488.         innerHTML += ` <span style='color: #545454; font-weight: normal'>${details}</span>`;
  1489.       }
  1490.       this.el.innerHTML = innerHTML;
  1491.     }
  1492.   }
  1493.  
  1494.   // парсим их
  1495.   Array.from(document.querySelectorAll('.voting-wjt__counter')).forEach((el) => {
  1496.     scoresMap.set(el, new Score(el));
  1497.   });
  1498.  
  1499.   // добавляем подробностей
  1500.   if (FLAGS.RATING_DETAILS) {
  1501.     if (FLAGS.RATING_DETAILS_ONCLICK) {
  1502.       const isDetailed = userConfig.getItem('scores_details');
  1503.       if (isDetailed) scoresMap.forEach(score => score.setDetails(isDetailed));
  1504.       scoresMap.forEach((score) => {
  1505.         score.el.onclick = () => { // eslint-disable-line no-param-reassign
  1506.           const nowDetailed = userConfig.shiftItem('scores_details');
  1507.           scoresMap.forEach(s => s.setDetails(nowDetailed));
  1508.         };
  1509.       });
  1510.     } else {
  1511.       scoresMap.forEach(score => score.setDetails(true));
  1512.     }
  1513.   }
  1514.  
  1515.   // метки времени и работа с ними
  1516.   const pageLoadTime = new Date();
  1517.   const monthNames = [
  1518.     'января', 'февраля', 'марта',
  1519.     'апреля', 'мая', 'июня',
  1520.     'июля', 'августа', 'сентября',
  1521.     'октября', 'ноября', 'декабря',
  1522.   ];
  1523.  
  1524.   class HabraTime {
  1525.     constructor(el, parent) {
  1526.       this.el = el;
  1527.       this.parent = parent;
  1528.       this.attrDatetime = this.constructor.getAttributeDatetime(el);
  1529.       this.date = new Date(this.attrDatetime);
  1530.     }
  1531.  
  1532.     // вот было бы хорошо, если б на хабре были datetime атрибуты
  1533.     static getAttributeDatetime(el) {
  1534.       const imagination = el.getAttribute('datetime');
  1535.       if (imagination) return imagination;
  1536.  
  1537.       const re = /((сегодня|вчера)|(\d+)[ .]([а-я]+|\d+)[ .]?(\d+)?) в (\d\d:\d\d)/;
  1538.       let [,,
  1539.         recently, // eslint-disable-line prefer-const
  1540.         day, month, year,
  1541.         time, // eslint-disable-line prefer-const
  1542.       ] = el.innerHTML.match(re);
  1543.  
  1544.       // и местное время
  1545.       let moscow;
  1546.       if (recently || year === undefined) {
  1547.         const offsetMoscow = 3 * 60 * 60 * 1000;
  1548.         const yesterdayShift = (recently === 'вчера') ? 24 * 60 * 60 * 1000 : 0;
  1549.         const offset = pageLoadTime.getTimezoneOffset() * 60 * 1000;
  1550.         const value = (pageLoadTime - yesterdayShift) + offsetMoscow + offset;
  1551.         moscow = new Date(value);
  1552.       }
  1553.  
  1554.       if (recently) {
  1555.         day = moscow.getDate();
  1556.         month = moscow.getMonth() + 1;
  1557.       } else if (month.length !== 2) {
  1558.         month = monthNames.indexOf(month) + 1;
  1559.       } else {
  1560.         month = +month;
  1561.       }
  1562.  
  1563.       if (day < 10) day = `0${+day}`;
  1564.       if (month < 10) month = `0${month}`;
  1565.       if (year < 100) year = `20${year}`;
  1566.       if (year === undefined) year = moscow.getFullYear();
  1567.  
  1568.       return `${year}-${month}-${day}T${time}+03:00`;
  1569.     }
  1570.  
  1571.     absolute() {
  1572.       let result = '';
  1573.  
  1574.       const time = this.date;
  1575.       const day = time.getDate();
  1576.       const month = time.getMonth();
  1577.       const monthName = monthNames[month];
  1578.       const year = time.getFullYear();
  1579.       const hours = time.getHours();
  1580.       const minutes = time.getMinutes();
  1581.  
  1582.       const now = new Date();
  1583.       const nowDay = now.getDate();
  1584.       const nowMonth = now.getMonth();
  1585.       const nowYear = now.getFullYear();
  1586.  
  1587.       const yesterday = new Date((now - 24) * 60 * 60 * 1000);
  1588.       const yesterdayDay = yesterday.getDate();
  1589.       const yesterdayMonth = yesterday.getMonth();
  1590.       const yesterdayYear = yesterday.getFullYear();
  1591.  
  1592.       const hhmm = `${hours}:${minutes >= 10 ? minutes : `0${minutes}`}`;
  1593.  
  1594.       const isToday =
  1595.         day === nowDay &&
  1596.         month === nowMonth &&
  1597.         year === nowYear;
  1598.       const isYesterday =
  1599.         day === yesterdayDay &&
  1600.         month === yesterdayMonth &&
  1601.         year === yesterdayYear;
  1602.  
  1603.       if (isToday) {
  1604.         result = `сегодня в ${hhmm}`;
  1605.       } else if (isYesterday) {
  1606.         result = `вчера в ${hhmm}`;
  1607.       } else if (nowYear === year) {
  1608.         result = `${day} ${monthName} в ${hhmm}`;
  1609.       } else {
  1610.         result = `${day} ${monthName} ${year} в ${hhmm}`;
  1611.       }
  1612.  
  1613.       return result;
  1614.     }
  1615.  
  1616.     static relative(milliseconds) {
  1617.       let result = '';
  1618.  
  1619.       const pluralForm = (n, forms) => {
  1620.         if (n % 10 === 1 && n % 100 !== 11) return forms[0];
  1621.         if (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) return forms[1];
  1622.         return forms[2];
  1623.       };
  1624.  
  1625.       const formats = [
  1626.         ['год', 'года', 'лет'],
  1627.         ['месяц', 'месяца', 'месяцев'],
  1628.         ['день', 'дня', 'дней'],
  1629.         ['час', 'часа', 'часов'],
  1630.         ['минуту', 'минуты', 'минут'],
  1631.       ];
  1632.  
  1633.       const minutes = milliseconds / 60000;
  1634.       const hours = minutes / 60;
  1635.       const days = hours / 24;
  1636.       const months = days / 30;
  1637.       const years = months / 12;
  1638.       const idx = [years, months, days, hours, minutes].findIndex(x => x >= 1);
  1639.  
  1640.       if (idx === -1) {
  1641.         result = 'несколько секунд';
  1642.       } else {
  1643.         const value = Math.floor([years, months, days, hours, minutes][idx]);
  1644.         const forms = formats[idx];
  1645.         const form = pluralForm(value, forms);
  1646.         result = `${value} ${form}`;
  1647.       }
  1648.       return result;
  1649.     }
  1650.  
  1651.     fromNow() {
  1652.       const diff = Math.abs(Date.now() - this.date);
  1653.       return `${this.constructor.relative(diff)} назад`;
  1654.     }
  1655.  
  1656.     fromParent() {
  1657.       const diff = Math.abs(this.date - this.parent.date);
  1658.       return `через ${this.constructor.relative(diff)}`;
  1659.     }
  1660.   }
  1661.  
  1662.   // собираем метки времени
  1663.   const datesMap = new Map();
  1664.   const megapostTimeEl = document.querySelector('.megapost-head__meta > .list_inline > .list__item');
  1665.   (megapostTimeEl ? [megapostTimeEl] : [])
  1666.     .concat(Array.from(document.querySelectorAll(`
  1667.         .post__time,
  1668.         .preview-data__time-published,
  1669.         time.comment__date-time_published,
  1670.         .tm-post__date,
  1671.         .user-message__date-time
  1672.       `))).forEach((el) => {
  1673.       datesMap.set(el, new HabraTime(el));
  1674.     });
  1675.  
  1676.   function updateTime() {
  1677.     datesMap.forEach((habraTime) => {
  1678.       let type;
  1679.       let otherTypes;
  1680.       if (habraTime.parent) {
  1681.         type = userConfig.config.time_comments;
  1682.         otherTypes = userConfig.model.time_comments
  1683.           .filter(str => str !== type);
  1684.       } else {
  1685.         type = userConfig.config.time_publications;
  1686.         otherTypes = userConfig.model.time_publications
  1687.           .filter(str => str !== type);
  1688.       }
  1689.       const title = otherTypes.map(otherType => habraTime[otherType]()).join(', ');
  1690.       habraTime.el.innerHTML = habraTime[type](); // eslint-disable-line no-param-reassign
  1691.       habraTime.el.setAttribute('title', title);
  1692.     });
  1693.   }
  1694.  
  1695.   if (FLAGS.TIME_DETAILS) {
  1696.     datesMap.forEach((habraTime) => {
  1697.       habraTime.el.setAttribute(
  1698.         'style',
  1699.         'cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;',
  1700.       );
  1701.       habraTime.el.onclick = () => { // eslint-disable-line no-param-reassign
  1702.         if (habraTime.parent) {
  1703.           userConfig.shiftItem('time_comments');
  1704.         } else {
  1705.           userConfig.shiftItem('time_publications');
  1706.         }
  1707.         updateTime();
  1708.       };
  1709.     });
  1710.     // подождём, когда дерево комментариев будет построено
  1711.     // у некоторых меток времени будут установлены родители
  1712.     // тогда и обновим их тексты
  1713.     setTimeout(updateTime, 100);
  1714.     setInterval(updateTime, 30 * 1000);
  1715.   }
  1716.  
  1717.   // время публикации, понадобится для корня древа комментариев
  1718.   let datePublication = datesMap.get(megapostTimeEl || document.querySelector('.post__time'));
  1719.   // если нету публикации поищем самую раннюю метку времени
  1720.   if (!datePublication) {
  1721.     datePublication = { date: pageLoadTime };
  1722.     datesMap.forEach((date) => {
  1723.       if (date.date < datePublication.date) datePublication = date;
  1724.     });
  1725.   }
  1726.  
  1727.   // создаем дерево комментариев
  1728.   class ItemComment {
  1729.     constructor(el, parent) {
  1730.       this.parent = parent;
  1731.       this.el = el;
  1732.       this.lvl = parent.lvl + 1;
  1733.       this.id = Number(el.getAttribute('rel'));
  1734.       this.commentEl = el.querySelector('.comment');
  1735.       if (this.commentEl) {
  1736.         this.timeEl = this.commentEl.querySelector('time');
  1737.         this.ratingEl = this.commentEl.querySelector('.js-score');
  1738.       }
  1739.       this.date = datesMap.get(this.timeEl);
  1740.       if (this.date) {
  1741.         this.date.parent = parent.date;
  1742.       } else {
  1743.         this.date = parent.date;
  1744.       }
  1745.       this.votes = scoresMap.get(this.ratingEl) || {
  1746.         total: 0, likes: 0, dislikes: 0, rating: 0,
  1747.       };
  1748.       this.elList = el.querySelector('.content-list_nested-comments');
  1749.     }
  1750.  
  1751.     existId(id) {
  1752.       return !!this.elList.querySelector(id);
  1753.     }
  1754.  
  1755.     existNew() {
  1756.       return !!this.elList.querySelector('.js-comment_new');
  1757.     }
  1758.  
  1759.     getLength() {
  1760.       let { length } = this.list;
  1761.       this.list.forEach((node) => {
  1762.         length += node.getLength();
  1763.       });
  1764.       return length;
  1765.     }
  1766.   }
  1767.  
  1768.   class CommentsTree {
  1769.     constructor() {
  1770.       this.root = {
  1771.         isRoot: true,
  1772.         date: datePublication,
  1773.         lvl: 0,
  1774.         elList: document.getElementById('comments-list'),
  1775.         list: [],
  1776.       };
  1777.     }
  1778.  
  1779.     static exist() {
  1780.       return !!document.getElementById('comments-list');
  1781.     }
  1782.  
  1783.     update() {
  1784.       if (!this.root.elList) return;
  1785.       const recAdd = (node) => {
  1786.         node.list = Array.from(node.elList.children) // eslint-disable-line no-param-reassign
  1787.           .map(el => new ItemComment(el, node));
  1788.         node.list.forEach(recAdd);
  1789.       };
  1790.       recAdd(this.root);
  1791.     }
  1792.  
  1793.     walkTree(fn) {
  1794.       const walk = (tree) => {
  1795.         fn(tree);
  1796.         tree.list.forEach(walk);
  1797.       };
  1798.       walk(this.root);
  1799.     }
  1800.  
  1801.     sort(fn) {
  1802.       if (!this.root.elList) return;
  1803.       this.walkTree((tree) => {
  1804.         tree.list.sort(fn).forEach(subtree => tree.elList.appendChild(subtree.el));
  1805.       });
  1806.     }
  1807.  
  1808.     shuffle() {
  1809.       if (!this.root.elList) return;
  1810.       const randInt = maximum => Math.floor(Math.random() * (maximum + 1));
  1811.       this.walkTree((tree) => {
  1812.         const { list } = tree;
  1813.         for (let i = 0; i < list.length; i += 1) {
  1814.           const j = randInt(i);
  1815.           [list[i], list[j]] = [list[j], list[i]];
  1816.         }
  1817.         list.forEach(subtree => tree.elList.appendChild(subtree.el));
  1818.       });
  1819.     }
  1820.   }
  1821.  
  1822.   const commentsTree = new CommentsTree();
  1823.   commentsTree.update();
  1824.  
  1825.   FLAGS.sortVariants = [
  1826.     ['time', 'старые'],
  1827.   ];
  1828.  
  1829.   if (FLAGS.COMMENTS_SORT_BY_FRESHNESS) FLAGS.sortVariants.push(['freshness', 'новые']);
  1830.   if (FLAGS.COMMENTS_SORT_BY_TREND) FLAGS.sortVariants.push(['trend', 'горячие']);
  1831.   if (FLAGS.COMMENTS_SORT_BY_QUALITY) FLAGS.sortVariants.push(['quality', 'хорошие']);
  1832.   if (FLAGS.COMMENTS_SORT_BY_REDDIT) FLAGS.sortVariants.push(['reddit', 'проверенные']);
  1833.   if (FLAGS.COMMENTS_SORT_BY_RATING) FLAGS.sortVariants.push(['rating', 'рейтинговые']);
  1834.   if (FLAGS.COMMENTS_SORT_BY_POPULARITY) FLAGS.sortVariants.push(['popularity', 'популярные']);
  1835.   if (FLAGS.COMMENTS_SORT_BY_RANDOM) FLAGS.sortVariants.push(['shuffle', 'случайные']);
  1836.  
  1837.   // здесь начинается сортировка комментариев
  1838.   const commentsOrderEl = document.createElement('div');
  1839.   commentsOrderEl.classList.add('comments_order');
  1840.   commentsOrderEl.innerHTML = FLAGS.sortVariants.map(([type, text]) => {
  1841.     const underline = (type === 'time') ? '; text-decoration: underline' : '';
  1842.     return `<a data-order="${type}" style="cursor: pointer${underline}">${text}</a>`;
  1843.   }).join(', ');
  1844.  
  1845.   if (FLAGS.COMMENTS_SORT && document.getElementById('comments-list')) {
  1846.     const commentsList = document.getElementById('comments-list');
  1847.     commentsList.parentElement.insertBefore(commentsOrderEl, commentsList);
  1848.   }
  1849.  
  1850.   const commentsComparators = {
  1851.     time(a, b) {
  1852.       return a.id - b.id;
  1853.     },
  1854.  
  1855.     freshness(a, b) {
  1856.       return b.id - a.id;
  1857.     },
  1858.  
  1859.     rating(a, b) {
  1860.       const ascore = a.votes.rating;
  1861.       const bscore = b.votes.rating;
  1862.       if (bscore !== ascore) return bscore - ascore;
  1863.       return b.id - a.id;
  1864.     },
  1865.  
  1866.     popularity(a, b) {
  1867.       const aVotes = a.votes.total;
  1868.       const bVotes = b.votes.total;
  1869.       if (aVotes !== bVotes) return bVotes - aVotes;
  1870.       const aLength = a.getLength();
  1871.       const bLength = b.getLength();
  1872.       if (aLength !== bLength) return bLength - aLength;
  1873.       return b.id - a.id;
  1874.     },
  1875.  
  1876.     quality(a, b) {
  1877.       const aQuality = a.votes.rating / a.votes.total || 0;
  1878.       const bQuality = b.votes.rating / b.votes.total || 0;
  1879.       if (aQuality !== bQuality) return bQuality - aQuality;
  1880.       if (a.votes.rating !== b.votes.rating) return b.votes.rating - a.votes.rating;
  1881.       return b.id - a.id;
  1882.     },
  1883.  
  1884.     trend(a, b) {
  1885.       // в первые сутки после публикации статьи число посещений больше чем в остальное время
  1886.       const oneDay = 24 * 60 * 60 * 1000;
  1887.       const firstDayEnd = +datePublication.date + oneDay;
  1888.       // у комментария есть только три дня на голосование с момента его создания
  1889.       const threeDays = 3 * oneDay;
  1890.       const now = Date.now();
  1891.  
  1892.       // прикинем число голосов в первый день
  1893.       const aDate = +a.date.date;
  1894.       let aViews = 0;
  1895.       // в первый день
  1896.       if (aDate <= firstDayEnd) {
  1897.         aViews += Math.min(firstDayEnd, now) - aDate;
  1898.       }
  1899.       // и в остальное время
  1900.       if (now >= firstDayEnd) {
  1901.         const threeDaysEnd = aDate + threeDays;
  1902.         // для этого соотношения я собрал статистику
  1903.         aViews += (Math.min(threeDaysEnd, now) - Math.max(firstDayEnd, aDate)) / 16;
  1904.       }
  1905.       const aScore = a.votes.rating / aViews;
  1906.  
  1907.       // аналогично
  1908.       const bDate = +b.date.date;
  1909.       let bViews = 0;
  1910.       if (bDate <= firstDayEnd) {
  1911.         bViews += Math.min(firstDayEnd, now) - bDate;
  1912.       }
  1913.       if (now >= firstDayEnd) {
  1914.         const threeDaysEnd = bDate + threeDays;
  1915.         // найти зависимость активности голосования от времени суток не удалось
  1916.         bViews += (Math.min(threeDaysEnd, now) - Math.max(firstDayEnd, bDate)) / 16;
  1917.       }
  1918.       const bScore = b.votes.rating / bViews;
  1919.  
  1920.       if (bScore === aScore) return b.id - a.id;
  1921.       return bScore - aScore;
  1922.     },
  1923.  
  1924.     reddit(a, b) {
  1925.       const wilsonScore = (ups, downs) => {
  1926.         const n = ups + downs;
  1927.         if (n === 0) return 0;
  1928.         const z = 1.281551565545;
  1929.         const p = ups / n;
  1930.         const left = p + ((1 / (2 * n)) * z * z);
  1931.         const right = z * Math.sqrt(((p * (1 - p)) / n) + ((z * z) / (4 * n * n)));
  1932.         const under = 1 + ((1 / n) * (z * z));
  1933.         return (left - right) / under;
  1934.       };
  1935.       const aScore = wilsonScore(a.votes.likes, a.votes.dislikes);
  1936.       const bScore = wilsonScore(b.votes.likes, b.votes.dislikes);
  1937.       if (bScore === aScore) return b.id - a.id;
  1938.       return bScore - aScore;
  1939.     },
  1940.   };
  1941.  
  1942.   const sortComments = () => {
  1943.     const order = userConfig.getItem('comments_order');
  1944.  
  1945.     Array.from(commentsOrderEl.children).forEach((el) => {
  1946.       if (el.dataset.order === order) {
  1947.         el.style.textDecoration = 'underline'; // eslint-disable-line no-param-reassign
  1948.       } else {
  1949.         el.style.textDecoration = ''; // eslint-disable-line no-param-reassign
  1950.       }
  1951.     });
  1952.  
  1953.     if (order === 'shuffle') {
  1954.       commentsTree.shuffle();
  1955.     } else {
  1956.       const compare = commentsComparators[order];
  1957.       commentsTree.sort(compare);
  1958.     }
  1959.   };
  1960.  
  1961.   // сортируем комменты при загрузке страницы
  1962.   // или не сортируем, если они уже по порядку
  1963.   if (FLAGS.COMMENTS_SORT && FLAGS.COMMENTS_SORT_ONLOAD && userConfig.getItem('comments_order') !== 'time') {
  1964.     sortComments();
  1965.   }
  1966.  
  1967.   Array.from(commentsOrderEl.children).forEach((el) => {
  1968.     el.onclick = () => { // eslint-disable-line no-param-reassign
  1969.       userConfig.setItem('comments_order', el.dataset.order);
  1970.       sortComments();
  1971.     };
  1972.   });
  1973.  
  1974.   // меняем ссылки ведущие к новым комментариям на ссылки к началу комментариев
  1975.   if (FLAGS.COMMENTS_LINKS) {
  1976.     const commentsLinks = document.getElementsByClassName('post-stats__comments-link');
  1977.  
  1978.     for (let i = 0; i < commentsLinks.length; i += 1) {
  1979.       const iLink = commentsLinks[i];
  1980.       const hrefValue = iLink.getAttribute('href');
  1981.       const hrefToComments = hrefValue.replace('#first_unread', '#comments');
  1982.       iLink.setAttribute('href', hrefToComments);
  1983.     }
  1984.   }
  1985.  
  1986.   // сворачивание комментов
  1987.   if (FLAGS.COMMENTS_HIDE) {
  1988.     const commentHash = window.location.hash;
  1989.  
  1990.     const toggle = (subtree) => {
  1991.       const listLength = subtree.list.length;
  1992.       if (listLength === 0) return;
  1993.       /* eslint-disable */
  1994.       if (subtree.switcherEl.dataset.isVisibleList === 'true') {
  1995.         subtree.switcherEl.dataset.isVisibleList = 'false';
  1996.         subtree.switcherEl.innerHTML = `\u229E раскрыть ветку ${subtree.getLength()}`;
  1997.         subtree.elList.style.display = 'none';
  1998.       } else {
  1999.         subtree.switcherEl.dataset.isVisibleList = 'true';
  2000.         subtree.switcherEl.innerHTML = '\u229F';
  2001.         subtree.elList.style.display = 'block';
  2002.       }
  2003.       /* eslint-enable */
  2004.     };
  2005.  
  2006.     commentsTree.walkTree((subtree) => {
  2007.       // не пытаемся сворачивать корень
  2008.       if (subtree.isRoot) return;
  2009.       // у похищенных нет футера
  2010.       const footerEl = subtree.commentEl.querySelector('.comment__footer');
  2011.       if (footerEl === null) return;
  2012.       // создаём переключатель
  2013.       const switcher = document.createElement('a');
  2014.       switcher.classList.add('comment__footer-link');
  2015.       switcher.classList.add('comment__switcher');
  2016.       switcher.dataset.isVisibleList = 'true';
  2017.  
  2018.       switcher.innerHTML = '\u229F';
  2019.       if (subtree.list.length === 0) switcher.innerHTML = '\u22A1';
  2020.       switcher.style.cursor = 'pointer';
  2021.       switcher.style.marginLeft = '-5px';
  2022.  
  2023.       footerEl.insertBefore(switcher, footerEl.children[0]);
  2024.       subtree.switcherEl = switcher; // eslint-disable-line no-param-reassign
  2025.  
  2026.       switcher.onclick = () => toggle(subtree);
  2027.  
  2028.       const isHideLvl = subtree.lvl === FLAGS.HIDE_LEVEL && FLAGS.HIDE_LEVEL_4;
  2029.       const isLineLvl = subtree.lvl % FLAGS.LINE_LEN === 0;
  2030.       if (isLineLvl) {
  2031.         subtree.elList.classList.add('comments_new-line');
  2032.         const lineNumber = subtree.lvl / FLAGS.LINE_LEN;
  2033.         subtree.elList.classList.add(`comments_new-line-${lineNumber % 4}`);
  2034.       }
  2035.       // при запуске не сворачиваем ветки с новыми комментами, и содержащие целевой id
  2036.       if (
  2037.         (isHideLvl || isLineLvl) && !subtree.existNew() &&
  2038.         !(commentHash && subtree.existId(commentHash))
  2039.       ) {
  2040.         toggle(subtree);
  2041.       }
  2042.     });
  2043.   }
  2044.  
  2045.   if (FLAGS.SCROLL_LEGEND) {
  2046.     const postBodyEl = document.querySelector('.post__body_full') || document.querySelector('.article__body');
  2047.     const commentsEl = document.getElementById('comments-list');
  2048.     const getPercents = (el) => {
  2049.       if (!el) return { topPercent: 0, heightPercent: 0 };
  2050.       const pageHeight = document.documentElement.scrollHeight;
  2051.       const top = el.getBoundingClientRect().top + window.pageYOffset;
  2052.       const topPercent = ((100 * top) / pageHeight).toFixed(2);
  2053.       const height = el.clientHeight;
  2054.       const heightPercent = ((100 * height) / pageHeight).toFixed(2);
  2055.  
  2056.       return { topPercent, heightPercent };
  2057.     };
  2058.  
  2059.     const updateLegend = (pageEl, legendEl) => {
  2060.       const { topPercent, heightPercent } = getPercents(pageEl);
  2061.       legendEl.style.top = `${topPercent}%`; // eslint-disable-line no-param-reassign
  2062.       legendEl.style.height = `${heightPercent}%`; // eslint-disable-line no-param-reassign
  2063.     };
  2064.  
  2065.     const legendPost = document.createElement('div');
  2066.     legendPost.classList.add('legend_el');
  2067.     legendPost.style.background = 'rgba(84, 142, 170, 0.66)';
  2068.     updateLegend(postBodyEl, legendPost);
  2069.     document.body.appendChild(legendPost);
  2070.  
  2071.     const legendComments = document.createElement('div');
  2072.     legendComments.classList.add('legend_el');
  2073.     legendComments.style.background = 'rgba(49, 176, 7, 0.66)';
  2074.     updateLegend(commentsEl, legendComments);
  2075.     document.body.appendChild(legendComments);
  2076.  
  2077.     setInterval(() => {
  2078.       updateLegend(postBodyEl, legendPost);
  2079.       updateLegend(commentsEl, legendComments);
  2080.     }, 1000);
  2081.   }
  2082.  
  2083.   if (FLAGS.NIGHT_MODE) {
  2084.     const switcherEl = document.createElement('div');
  2085.     switcherEl.classList.add('night_mode_switcher');
  2086.     switcherEl.onclick = () => {
  2087.       const isNightMode = userConfig.shiftItem('night_mode');
  2088.       document.documentElement.classList.toggle('night', isNightMode);
  2089.     };
  2090.     document.body.appendChild(switcherEl);
  2091.     setInterval(() => {
  2092.       const boolClass = document.documentElement.classList.contains('night');
  2093.       const isNightMode = userConfig.getItem('night_mode');
  2094.       if (boolClass !== isNightMode) {
  2095.         document.documentElement.classList.toggle('night', isNightMode);
  2096.       }
  2097.     }, 1000);
  2098.   }
  2099.  
  2100.   if (FLAGS.CONFIG_INTERFACE) {
  2101.     const configFrame = document.createElement('div');
  2102.     configOptions.forEach(([key, text]) => {
  2103.       if (typeof FLAGS[key] !== 'boolean') return;
  2104.       const inputEl = document.createElement('input');
  2105.       inputEl.type = 'checkbox';
  2106.       inputEl.value = key;
  2107.       inputEl.checked = FLAGS[key];
  2108.       const labelEl = document.createElement('label');
  2109.       labelEl.setAttribute('unselectable', 'on');
  2110.       labelEl.setAttribute('onselectstart', 'return false');
  2111.       const spanEl = document.createElement('span');
  2112.       spanEl.innerHTML = text;
  2113.       configFrame.appendChild(labelEl);
  2114.       labelEl.appendChild(inputEl);
  2115.       labelEl.appendChild(spanEl);
  2116.       inputEl.onchange = () => {
  2117.         FLAGS[key] = inputEl.checked;
  2118.         localStorage.setItem('habrafixFlags', JSON.stringify(FLAGS));
  2119.       };
  2120.       configFrame.appendChild(document.createElement('br'));
  2121.     });
  2122.     const reloadText = document.createElement('div');
  2123.     reloadText.style.textAlign = 'right';
  2124.     reloadText.innerHTML = `
  2125.       * чтобы увидеть изменения
  2126.       <a  href="#" onclick="location.reload(); return false">
  2127.         обновите страницу
  2128.       </a>`;
  2129.     configFrame.appendChild(reloadText);
  2130.     configFrame.classList.add('config_frame');
  2131.     configFrame.style.display = 'none';
  2132.     document.body.appendChild(configFrame);
  2133.  
  2134.     const configButton = document.createElement('div');
  2135.     configButton.classList.add('config_button');
  2136.     document.body.appendChild(configButton);
  2137.  
  2138.     configButton.onclick = () => {
  2139.       if (configFrame.style.display) {
  2140.         configFrame.style.display = '';
  2141.       } else {
  2142.         configFrame.style.display = 'none';
  2143.       }
  2144.     };
  2145.   }
  2146.  
  2147.   setTimeout(() => {
  2148.     const marker = document.createElement('meta');
  2149.     marker.id = 'habrafixmarker';
  2150.     document.head.appendChild(marker);
  2151.   }, 300);
  2152. });