Merge branch 'preview-fixes'

CHANGELOG.md

@@ -1,6 +1,43 @@
 <!-- spell-checker: disable -->
 # 更新日志
 
+## v2.9.2-preview
+`2024-09-08`
+
+包含 [v2.9.2](https://github.com/the1812/Bilibili-Evolved/releases/tag/v2.9.2) 的所有更新内容.
+
+✨新增
+- `弹幕转义` 支持对正斜杠的换行 (`/n`) 进行转义. (#4865)
+- `自定义顶栏` 支持直接在功能中打开布局设置. (#2666)
+- `高分辨率图片` 支持处理没有指定高度的图片, 支持在专栏页面中请求原图. (#2868)
+- `直播间网页全屏自适应` 样式适配较低的宽度值. (#4895)
+
+☕开发者相关
+- 外部资源接入 Subresource Integrity. (#4896)
+
+## v2.9.2
+`2024-09-08`
+
+✨新增
+- `网址参数清理` 支持清理 `is_room_feed`. (PR #4886 by [dreammu](https://github.com/dreammu))
+
+🐛修复
+- 新版评论区相关功能修复: (#4843)
+  - 修复 `快速收起评论` 按钮错位. (#4890)
+  - 恢复功能: `禁用评论区搜索词`, `评论区IP属地显示`, `复制动态链接`.
+  - `简化评论区` 支持 Firefox.
+  - 样式实现使用 [Container style queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries_2) 替代 [:host-context](https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context), 虽然 Firefox 还是不支持, 但是能稍微标准化一点.
+  - 夜间模式适配
+
+☕开发者相关
+- Shadow DOM API (`./src/core/shadow-dom`) 更名为 Shadow Root API (`./src/core/shadow-root`), 模块内的功能导出单例:
+  - `shadowDomObserver`: 持续观测页面上的所有 Shadow DOM.
+  - `shadowRootStyles`: 支持将样式注入到 Shadow DOM 内部.
+- Comments API 增加 `CommentAreaV3` 实现, 支持基于 Shadow DOM 的新版评论区. (#4843)
+- 增加 `isContainerStyleQuerySupported` 来检测当前浏览器对 [Container style queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries_2) 的支持.
+- 组件样式支持在 `ComponentMetadata.instantStyles` 中声明 `shadowDom: true` 来插入到 Shadow DOM 中.
+
+
 ## v2.9.1-preview
 `2024-08-15`
 

doc/donate.md

@@ -30,6 +30,10 @@ https://afdian.net/@the1812?tab=sponsor
 
 | 时间                | 用户名                | 单号后4位 | 金额    |
 | ------------------- | --------------------- | --------- | ------- |
+| 2024.09.06 16:05:23 | 匿名                  | 0752      | ¥5.00   |
+| 2024.09.03 23:08:43 | *根                   | 3956      | ¥20.00  |
+| 2024.08.25 16:55:07 | 匿名                  | 6595      | ¥10.00  |
+| 2024.08.16 11:01:03 | 匿名                  | 7648      | ¥30.00  |
 | 2024.08.15 10:18:07 | *9                    | 1653      | ¥10.00  |
 | 2024.07.30 13:40:22 | Z*n                   | 2215      | ¥5.00   |
 | 2024.07.24 09:38:46 | H*g                   | 7776      | ¥5.00   |

registry/lib/components/feeds/fold-comments/fold-comment-shadow.scss

@@ -0,0 +1,5 @@
+:host(bili-comments) {
+  #end .bottombar {
+    padding-bottom: 8px !important;
+  }
+}

registry/lib/components/feeds/fold-comments/index.ts

@@ -6,6 +6,7 @@ import { select } from '@/core/spin-query'
 import { childListSubtree } from '@/core/observer'
 
 const entry = async () => {
+  const { shadowRootStyles } = await import('@/core/shadow-root')
   const { forEachFeedsCard } = await import('@/components/feeds/api')
   const { childList } = await import('@/core/observer')
   const commentSelector = '.bb-comment, .bili-comment-container'
@@ -30,20 +31,23 @@ const entry = async () => {
       commentBox.insertAdjacentElement('beforeend', button)
     }
     if (feedsCardsManager.managerType === 'v2') {
-      const existingComment = dq(card, commentSelector) as HTMLElement
+      const getExistingComment = () => dq(card, commentSelector) as HTMLElement
+      const isCommentAreaReady = () => {
+        const existingComment = getExistingComment()
+        return existingComment !== null && dq(existingComment, 'bili-comments')
+      }
       const handler = () => {
         const button = dq(card, '.bili-dyn-action.comment') as HTMLElement
         button?.click()
       }
-      if (!existingComment) {
+      if (!isCommentAreaReady()) {
         childListSubtree(card, () => {
-          const panel = dq(card, commentSelector)
-          if (panel) {
+          if (isCommentAreaReady()) {
             injectToComment(card, handler)
           }
         })
       } else {
-        injectToComment(existingComment, handler)
+        injectToComment(getExistingComment(), handler)
       }
       return
     }
@@ -75,6 +79,12 @@ const entry = async () => {
   forEachFeedsCard({
     added: c => injectButton(c.element),
   })
+
+  const style = await import('./fold-comment-shadow.scss').then(m => m.default)
+  shadowRootStyles.addStyle({
+    id: 'foldComments',
+    style,
+  })
 }
 
 export const component = defineComponentMetadata({

registry/lib/components/style/dark-mode/dark-shadow-dom.scss

@@ -0,0 +1,77 @@
+@import './dark-definitions';
+
+:host(bili-comment-action-buttons-renderer) {
+  @include color('a');
+  button {
+    @include color('a');
+    &:hover {
+      @include theme-color();
+    }
+  }
+  bili-icon[style*='var(--brand_blue)'] ~ #count {
+    @include theme-color();
+  }
+}
+:host(bili-comment-replies-renderer) {
+  #view-more {
+    @include color('a');
+  }
+}
+:host(bili-comment-user-info) {
+  #user-name {
+    @include color('e');
+  }
+}
+:host(bili-comments) {
+  .bottombar {
+    @include color('e');
+    &.clickable:hover {
+      @include theme-color();
+    }
+  }
+}
+:host(bili-comment-menu) {
+  #options li:hover {
+    @include background-color('3');
+  }
+}
+:host(bili-rich-text) {
+  #contents {
+    a {
+      @include theme-color();
+    }
+    img,
+    a i {
+      @include to-theme('blue');
+    }
+  }
+}
+:host(bili-comment-box) {
+  #pub button {
+    @include theme-background-color();
+    @include foreground-color();
+    &:hover,
+    &.active {
+      @include theme-background-color('80');
+    }
+  }
+}
+:host(bili-comments-header-renderer) {
+  #title #count {
+    @include color('a');
+  }
+  bili-text-button {
+    @include set-color('--_label-text-color', 'e');
+    &:hover {
+      @include set-theme-color('--_label-text-color-hover');
+    }
+  }
+  #sort-actions.hot bili-text-button:first-child,
+  #sort-actions.time bili-text-button:last-child {
+    @include set-theme-color('--_label-text-color');
+  }
+  .bili-comments-bottom-fixed-wrapper > div {
+    @include background-color('2');
+    @include border-color('3');
+  }
+}

registry/lib/components/style/dark-mode/dark-slice-16.scss

@@ -67,8 +67,28 @@
 .bili-dyn-publishing {
   @include dyn-container-skeleton();
   @include background-color('4');
+  &__title {
+    &__input {
+      @include background-color();
+      @include color('e');
+      &::placeholder {
+        @include color('a');
+      }
+    }
+    &__indicator {
+      @include color('a');
+    }
+    &__close {
+      @include background-color('6');
+    }
+  }
   &__tools {
     &__item {
+      @include color('e');
+      &.active,
+      &:hover {
+        @include theme-color();
+      }
       // 这里用 filter 会导致弹窗内容也被影响, 暂时先去掉了
       // &.active,
       // &:hover {
@@ -79,6 +99,13 @@
       }
     }
   }
+  &__settings__btn {
+    @include color('e');
+    &.active,
+    &:hover {
+      @include theme-color();
+    }
+  }
   .bili-rich-textarea__inner {
     @include background-color();
     @include color('e');

registry/lib/components/style/dark-mode/index.ts

@@ -1,6 +1,7 @@
 import { defineComponentMetadata } from '@/components/define'
 import { darkExcludes } from './dark-urls'
 
+const name = 'darkMode'
 const changeDelay = 200
 const darkMetaColor = '#111'
 const add = async () => {
@@ -40,16 +41,15 @@ const remove = async () => {
     colorSchemeMeta.content = 'light'
   }
 }
+const entry = async () => {
+  setTimeout(add, changeDelay)
+}
 
 export const component = defineComponentMetadata({
-  name: 'darkMode',
+  name,
   displayName: '夜间模式',
-  entry: () => {
-    setTimeout(add, changeDelay)
-  },
-  reload: () => {
-    setTimeout(add, changeDelay)
-  },
+  entry,
+  reload: entry,
   unload: () => {
     setTimeout(remove, changeDelay)
   },
@@ -66,6 +66,11 @@ export const component = defineComponentMetadata({
       style: () => import('./dark-mode.important.scss'),
       important: true,
     },
+    {
+      name: 'dark-shadow-dom',
+      style: () => import('./dark-shadow-dom.scss'),
+      shadowDom: true,
+    },
   ],
   plugin: {
     displayName: '夜间模式 - 提前注入',
@@ -76,8 +81,8 @@ export const component = defineComponentMetadata({
       const { contentLoaded } = await import('@/core/life-cycle')
       const { isComponentEnabled } = await import('@/core/settings')
       contentLoaded(() => {
-        // 提前添加dark的class, 防止颜色抖动
-        if (isComponentEnabled('darkMode')) {
+        // 提前添加 dark 的 class, 防止颜色抖动
+        if (isComponentEnabled(name)) {
           document.body.classList.add('dark')
         }
       })

registry/lib/components/style/simplify/comments/comments-v3-firefox/base.scss

@@ -0,0 +1,7 @@
+:host(bili-rich-text) {
+  #contents img,
+  #contents a i {
+    max-width: 1.4em;
+    max-height: 1.4em;
+  }
+}

registry/lib/components/style/simplify/comments/comments-v3-firefox/decorate-and-time.scss

@@ -0,0 +1,5 @@
+:host(bili-comment-renderer) {
+  bili-comment-user-sailing-card {
+    display: none;
+  }
+}

registry/lib/components/style/simplify/comments/comments-v3-firefox/event-banner.scss

@@ -0,0 +1,5 @@
+:host(bili-comments-header-renderer) {
+  bili-comments-notice {
+    display: none;
+  }
+}

registry/lib/components/style/simplify/comments/comments-v3-firefox/fans-medal.scss

@@ -0,0 +1,5 @@
+:host(bili-comment-user-info) {
+  bili-comment-user-medal {
+    display: none;
+  }
+}

registry/lib/components/style/simplify/comments/comments-v3-firefox/reply-editor.scss

@@ -0,0 +1,19 @@
+:host(bili-comment-box) {
+  #pub button {
+    font-size: 14px;
+  }
+}
+:host(bili-checkbox) {
+  #label {
+    font-size: 15px;
+  }
+}
+:host(bili-comment-textarea) {
+  #input {
+    font-size: 13px;
+  }
+  #input,
+  #input::placeholder {
+    line-height: normal;
+  }
+}

registry/lib/components/style/simplify/comments/comments-v3-firefox/sub-reply-new-line.scss

@@ -0,0 +1,5 @@
+:host(bili-comment-reply-renderer) {
+  bili-comment-user-info {
+    display: block;
+  }
+}

registry/lib/components/style/simplify/comments/comments-v3-firefox/user-level.scss

@@ -0,0 +1,5 @@
+:host(bili-comment-user-info) {
+  #user-level {
+    display: none;
+  }
+}