Merge tag 'v1.11.2' into sc

.github/workflows/dockerhub.yaml

@@ -0,0 +1,59 @@
+name: Dockerhub
+on:
+  workflow_dispatch: { }
+  push:
+    tags: [ v* ]
+  schedule:
+    # This job can take a while, and we have usage limits, so just publish develop only twice a day
+    - cron: '0 7/12 * * *'
+concurrency: ${{ github.ref_name }}
+jobs:
+  buildx:
+    name: Docker Buildx
+    runs-on: ubuntu-latest
+    environment: dockerhub
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # needed for docker-package to be able to calculate the version
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          install: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: |
+            vectorim/element-web
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Update repo description
+        uses: peter-evans/dockerhub-description@v2
+        continue-on-error: true
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          repository: vectorim/element-web

.github/workflows/static_analysis.yaml

@@ -57,9 +57,9 @@ jobs:
         with:
           cache: 'yarn'
 
-      # Does not need branch matching as only analyses this layer
+      # Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
-      - name: Install Deps
+      - name: Install Dependencies
-        run: "yarn install --pure-lockfile"
+        run: "./scripts/layered.sh"
 
       - name: Run Linter
         run: "yarn run lint:style"

.github/workflows/triage-labelled.yml

@@ -44,14 +44,7 @@ jobs:
     name: P1 X-Needs-Design to Design project board
     runs-on: ubuntu-latest
     if: >
-      contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
+      contains(github.event.issue.labels.*.name, 'X-Needs-Design')
-      (contains(github.event.issue.labels.*.name, 'S-Critical') &&
-       (contains(github.event.issue.labels.*.name, 'O-Frequent') ||
-        contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
-       contains(github.event.issue.labels.*.name, 'S-Major') &&
-       contains(github.event.issue.labels.*.name, 'O-Frequent') ||
-       contains(github.event.issue.labels.*.name, 'A11y') &&
-       contains(github.event.issue.labels.*.name, 'O-Frequent'))
     steps:
       - uses: octokit/graphql-action@v2.x
         id: add_to_project

.stylelintrc.js

@@ -1,26 +1,3 @@
-// Copied from react-sdk
-// TODO: Only keep one copy of this for synchronization purposes
 module.exports = {
-    "extends": "stylelint-config-standard",
+    ...require("matrix-react-sdk/.stylelintrc.js"),
-    "plugins": [
-        "stylelint-scss",
-    ],
-    "rules": {
-        "indentation": 4,
-        "comment-empty-line-before": null,
-        "declaration-empty-line-before": null,
-        "length-zero-no-unit": null,
-        "rule-empty-line-before": null,
-        "color-hex-length": null,
-        "max-empty-lines": null,
-        "number-no-trailing-zeros": null,
-        "number-leading-zero": null,
-        "selector-list-comma-newline-after": null,
-        "at-rule-no-unknown": null,
-        "no-descending-specificity": null,
-        "scss/at-rule-no-unknown": [true, {
-            // https://github.com/vector-im/element-web/issues/10544
-            "ignoreAtRules": ["define-mixin"],
-        }],
-    }
 };

CHANGELOG.md

@@ -1,3 +1,31 @@
+Changes in [1.11.2](https://github.com/vector-im/element-web/releases/tag/v1.11.2) (2022-08-03)
+===============================================================================================
+
+## ✨ Features
+ * Live location share -  focus on user location on list item click ([\#9051](https://github.com/matrix-org/matrix-react-sdk/pull/9051)). Contributed by @kerryarchibald.
+ * Live location sharing - don't trigger unread counts for beacon location events ([\#9071](https://github.com/matrix-org/matrix-react-sdk/pull/9071)). Contributed by @kerryarchibald.
+ * Support for sending voice messages as replies and in threads ([\#9097](https://github.com/matrix-org/matrix-react-sdk/pull/9097)). Fixes #22031.
+ * Add `Reply in thread` button to the right-click message context-menu ([\#9004](https://github.com/matrix-org/matrix-react-sdk/pull/9004)). Fixes #22745.
+ * Starred_Messages_Feature_Contd_II/Outreachy ([\#9086](https://github.com/matrix-org/matrix-react-sdk/pull/9086)).
+ * Use "frequently used emojis" for autocompletion in composer ([\#8998](https://github.com/matrix-org/matrix-react-sdk/pull/8998)). Fixes #18978. Contributed by @grimhilt.
+ * Improve clickability of view source event toggle button  ([\#9068](https://github.com/matrix-org/matrix-react-sdk/pull/9068)). Fixes #21856. Contributed by @luixxiul.
+ * Improve clickability of "collapse" link button on bubble layout ([\#9037](https://github.com/matrix-org/matrix-react-sdk/pull/9037)). Fixes #22864. Contributed by @luixxiul.
+ * Starred_Messages_Feature/Outreachy ([\#8842](https://github.com/matrix-org/matrix-react-sdk/pull/8842)).
+ * Implement Use Case Selection screen ([\#8984](https://github.com/matrix-org/matrix-react-sdk/pull/8984)). Contributed by @justjanne.
+ * Live location share - handle insufficient permissions in location sharing ([\#9047](https://github.com/matrix-org/matrix-react-sdk/pull/9047)). Contributed by @kerryarchibald.
+ * Improve _FilePanel.scss ([\#9031](https://github.com/matrix-org/matrix-react-sdk/pull/9031)). Contributed by @luixxiul.
+ * Improve spotlight accessibility by adding context menus ([\#8907](https://github.com/matrix-org/matrix-react-sdk/pull/8907)). Fixes #20875 and #22675. Contributed by @justjanne.
+
+## 🐛 Bug Fixes
+ * Replace mask-images with svg components in MessageActionBar ([\#9088](https://github.com/matrix-org/matrix-react-sdk/pull/9088)). Fixes #22912. Contributed by @kerryarchibald.
+ * Unbreak in-app permalink tooltips ([\#9087](https://github.com/matrix-org/matrix-react-sdk/pull/9087)). Fixes #22874.
+ * Show a back button when viewing a space member ([\#9095](https://github.com/matrix-org/matrix-react-sdk/pull/9095)). Fixes #22898.
+ * Align the right edge of info tile lines with normal ones on IRC layout ([\#9058](https://github.com/matrix-org/matrix-react-sdk/pull/9058)). Fixes #22871. Contributed by @luixxiul.
+ * Prevent email verification from overriding existing sessions ([\#9075](https://github.com/matrix-org/matrix-react-sdk/pull/9075)). Fixes #22881. Contributed by @justjanne.
+ * Fix wrong buttons being used when exploring public rooms ([\#9062](https://github.com/matrix-org/matrix-react-sdk/pull/9062)). Fixes #22862.
+ * Re-add padding to generic event list summary on IRC layout ([\#9063](https://github.com/matrix-org/matrix-react-sdk/pull/9063)). Fixes #22869. Contributed by @luixxiul.
+ * Joining federated rooms via the spotlight search should no longer cause a "No known servers" error. ([\#9055](https://github.com/matrix-org/matrix-react-sdk/pull/9055)). Fixes #22845. Contributed by @Half-Shot.
+
 Changes in [1.11.1](https://github.com/vector-im/element-web/releases/tag/v1.11.1) (2022-07-26)
 ===============================================================================================
 

docs/labs.md

@@ -192,3 +192,7 @@ Enables rendering of MD / HTML in room topics.
 
 Enables exploring public spaces in the new search dialog. Requires the server to
 have [MSC3827](https://github.com/matrix-org/matrix-spec-proposals/pull/3827) enabled.
+
+## Favourite Messages (`feature_favourite_messages`) [In Development]
+
+Enables users to bookmark a message or content for a later reference.

docs/theming.md

@@ -11,11 +11,11 @@ As of March 2022, skins are not fully supported; Element is the only available s
 To define a theme for Element:
 
  1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
- 2. Fork `src/skins/vector/css/themes/dark.scss` to be `teal.scss`
+ 2. Fork `src/skins/vector/css/themes/dark.pcss` to be `teal.pcss`
- 3. Fork `src/skins/vector/css/themes/_base.scss` to be `_teal.scss`
+ 3. Fork `src/skins/vector/css/themes/_base.pcss` to be `_teal.pcss`
- 4. Override variables in `_teal.scss` as desired. You may wish to delete ones
+ 4. Override variables in `_teal.pcss` as desired. You may wish to delete ones
-    which don't differ from `_base.scss`, to make it clear which are being
+    which don't differ from `_base.pcss`, to make it clear which are being
-    overridden. If every single colour is being changed (as per `_dark.scss`)
+    overridden. If every single colour is being changed (as per `_dark.pcss`)
     then you might as well keep them all.
  5. Add the theme to the list of entrypoints in webpack.config.js
  6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-web",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "repository": {
@@ -49,19 +49,20 @@
     "lint:js": "eslint --max-warnings 0 src module_system",
     "lint:js-fix": "eslint --fix src module_system",
     "lint:types": "tsc --noEmit --jsx react && tsc --noEmit --project ./tsconfig.module_system.json",
-    "lint:style": "stylelint \"res/css/**/*.scss\"",
+    "lint:style": "stylelint \"res/css/**/*.pcss\"",
     "test": "jest",
-    "coverage": "yarn test --coverage"
+    "coverage": "yarn test --coverage",
+    "analyse:unused-exports": "node ./scripts/analyse_unused_exports.js"
   },
   "dependencies": {
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "browser-request": "^0.3.3",
     "gfm.css": "^1.1.2",
     "jsrsasign": "^10.5.25",
     "katex": "^0.12.0",
-    "matrix-js-sdk": "19.1.0",
+    "matrix-js-sdk": "19.2.0",
-    "matrix-react-sdk": "3.49.0",
+    "matrix-react-sdk": "3.51.0",
     "matrix-widget-api": "^0.1.0-beta.18",
     "prop-types": "^15.7.2",
     "react": "17.0.2",
@@ -135,7 +136,7 @@
     "node-fetch": "^2.6.7",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss-easings": "^2.0.0",
-    "postcss-hexrgba": "^2.0.1",
+    "postcss-hexrgba": "2.0.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-mixins": "^6.2.3",
@@ -151,11 +152,12 @@
     "simple-proxy-agent": "^1.1.0",
     "string-replace-loader": "2",
     "style-loader": "2",
-    "stylelint": "^13.9.0",
+    "stylelint": "^14.9.1",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-standard": "^26.0.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint-scss": "^4.2.0",
     "terser-webpack-plugin": "^2.3.8",
-    "typescript": "^4.5.3",
+    "ts-prune": "^0.10.3",
+    "typescript": "^4.7.4",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2",
@@ -175,7 +177,7 @@
       "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
     ],
     "moduleNameMapper": {
-      "\\.(css|scss)$": "<rootDir>/__mocks__/cssMock.js",
+      "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
       "\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
       "\\.svg$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/svg.js",
       "\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",

res/css/structures/ErrorView.pcss

@@ -14,17 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// import font-size variables manually, ideally this scss would get loaded by the theme which has all variables in context
+// import font-size variables manually,
-@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.scss";
+// ideally this file would get loaded by the theme which has all variables in context
-@import "../../../node_modules/matrix-react-sdk/res/css/_border-radii.scss";
+@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.pcss";
+@import "../../../node_modules/matrix-react-sdk/res/css/_border-radii.pcss";
 
 .mx_ErrorView {
     background: #c5e0f7;
     background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
     background: -webkit-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
     background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
+    /* stylelint-disable-next-line function-no-unknown */
     filter: progid:dximagetransform.microsoft.gradient(startColorstr='#c5e0f7', endColorstr='#ffffff', GradientType=0);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol";
     width: 100%;
     min-height: 100%;
     height: auto;

scripts/analyse_unused_exports.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require("fs");
+const { exec } = require("node:child_process");
+
+const includeJSSDK = process.argv.includes("--include-js-sdk");
+const ignore = [];
+
+ignore.push(...Object.values(JSON.parse(fs.readFileSync(`${__dirname}/../components.json`))));
+ignore.push("/index.ts");
+// We ignore js-sdk by default as it may export for other non element-web projects
+if (!includeJSSDK) ignore.push("matrix-js-sdk");
+
+const command = `yarn ts-prune --ignore "${ignore.join("|")}" | grep -v "(used in module)"`;
+
+exec(command, (error, stdout, stderr) => {
+    if (error) throw error;
+    // We have to do this as piping the output of ts-prune causes the return
+    // code to be 0
+    if (stderr) throw Error(stderr);
+
+    let lines = stdout.split("\n");
+    // Remove the first line as that is the command that was being run and we
+    // log that only in case of an error
+    lines.splice(0, 1);
+    // Remove the last line as it is empty
+    lines.pop();
+
+    // ts-prune has bug where if the unused export is in a dependency, the path
+    // won't have an "/" character at the start, so we try to fix that for
+    // better UX
+    // TODO: This might break on Windows
+    lines = lines.reduce((newLines, line) => {
+        if (!line.startsWith("/")) newLines.push("/" + line);
+        else newLines.push(line);
+        return newLines;
+    }, []);
+
+    // If an unused export has been found, we error
+    if (lines.length > 0) {
+        console.log(`Command that was run: ${command}`);
+        console.log(lines.join("\n"));
+        throw Error("Unused exports found!");
+    }
+
+    console.log("Success - no unused exports found!");
+});

src/async-components/structures/CompatibilityView.tsx

@@ -19,8 +19,8 @@ import { _t } from "matrix-react-sdk/src/languageHandler";
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
-// scss variables will be accessible.
+// PostCSS variables will be accessible.
-import "../../../res/css/structures/ErrorView.scss";
+import "../../../res/css/structures/ErrorView.pcss";
 
 interface IProps {
     onAccept(): void;

src/async-components/structures/ErrorView.tsx

@@ -18,8 +18,8 @@ import * as React from "react";
 import { _t } from "matrix-react-sdk/src/languageHandler";
 
 // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
-// scss variables will be accessible.
+// PostCSS variables will be accessible.
-import "../../../res/css/structures/ErrorView.scss";
+import "../../../res/css/structures/ErrorView.pcss";
 
 interface IProps {
     // both of these should already be internationalised

src/i18n/strings/fa.json

@@ -27,5 +27,6 @@
     "Go to element.io": "برو به element.io",
     "Failed to start": "خطا در شروع",
     "Powered by Matrix": "راه اندازی شده با استفاده از ماتریکس",
-    "Use %(brand)s on mobile": "از %(brand)s گوشی استفاده کنید"
+    "Use %(brand)s on mobile": "از %(brand)s گوشی استفاده کنید",
+    "Decentralised, encrypted chat & collaboration powered by $matrixLogo": "همکاری چت غیرمتمرکز و رمزگذاری شده & توسعه یافته با استفاده از $matrixLogo"
 }

src/i18n/strings/ko.json

@@ -3,7 +3,7 @@
     "Unknown device": "알 수 없는 기기",
     "Welcome to Element": "Element에 오신 것을 환영합니다",
     "The message from the parser is: %(message)s": "파서에서 온 메시지: %(message)s",
-    "Invalid JSON": "잘못된 JSON",
+    "Invalid JSON": "유효하지 않은 JSON",
     "Unexpected error preparing the app. See console for details.": "앱을 준비하는 동안 예기치 않은 오류가 발생했습니다. 자세한 내용은 콘솔을 확인하세요.",
     "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "잘못된 설정: default_server_config 와 defalut_server_name, default_hs_url 중 하나만 지정할 수 있습니다.",
     "Invalid configuration: no default server specified.": "잘못된 설정: 기본 서버가 지정되지 않았습니다.",
@@ -16,9 +16,9 @@
     "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
     "Unsupported browser": "지원되지 않는 브라우저",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "최상의 경험을 위해 <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, 또는 <safariLink>Safari</safariLink>를 설치해주세요.",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "현재 사용중이신 브라우저를 계속 사용하셔도 됩니다, 다만 일부 기능들이 작동하지 않을 수 있으며 애플리케이션이 잘못돼 보일 수 있습니다.",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "현재 사용 중인 브라우저를 계속 사용할 수 있지만, 일부 기능들이 작동하지 않거나 애플리케이션이 올바르게 보여지지 않을 수 있습니다.",
     "I understand the risks and wish to continue": "위험하다는 것을 이해했으며 계속하고 싶습니다",
-    "Go to element.io": "element.io으로 가기",
+    "Go to element.io": "element.io 로 이동",
     "Failed to start": "시작 실패",
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s 는 당신의 브라우저에서 지원되지 않는 고급 기능을 사용합니다.",
     "Your browser can't run %(brand)s": "당신의 브라우저는 %(brand)s 를 작동할 수 없습니다",

src/i18n/strings/zh_Hans.json

@@ -3,31 +3,31 @@
     "Unknown device": "未知设备",
     "Welcome to Element": "欢迎来到 Element",
     "Sign In": "登录",
-    "Create Account": "创建账号",
+    "Create Account": "创建账户",
-    "Explore rooms": "探索聊天室",
+    "Explore rooms": "探索房间",
-    "The message from the parser is: %(message)s": "语法分析器的信息：%(message)s",
+    "The message from the parser is: %(message)s": "来自解析器的消息：%(message)s",
     "Invalid JSON": "无效的 JSON",
-    "Unexpected error preparing the app. See console for details.": "软件准备时出错，详细信息请查看控制台。",
+    "Unexpected error preparing the app. See console for details.": "准备软件时出现意外错误，详细信息请查看控制台。",
-    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "配置无效: 只能设置 default_server_config、default_server_name 或 default_hs_url。",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "配置无效：只能指定default_server_config、default_server_name或default_hs_url其中之一。",
-    "Invalid configuration: no default server specified.": "配置无效：没有设置默认服务器。",
+    "Invalid configuration: no default server specified.": "配置无效：没有指定默认服务器。",
-    "Unable to load config file: please refresh the page to try again.": "无法加载配置文件：请再次刷新页面。",
+    "Unable to load config file: please refresh the page to try again.": "无法加载配置文件：请刷新页面以重试。",
     "%(brand)s Desktop (%(platformName)s)": "%(brand)s 桌面版（%(platformName)s）",
     "Go to your browser to complete Sign In": "转到您的浏览器以完成登录",
-    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s（%(browserName)s，%(osName)s）",
     "Unsupported browser": "不支持的浏览器",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "请安装 <chromeLink>Chrome</chromeLink>、<firefoxLink>Firefox</firefoxLink> 或 <safariLink>Safari</safariLink> 以获得最佳体验。",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "您可以继续使用您目前的浏览器，但部分或全部的功能可能无法正常工作，应用程序的外观可能也看起来不正确。",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "您可以继续使用您目前的浏览器，但部分或全部功能可能无法正常工作，应用程序的外观可能也看起来不正确。",
     "I understand the risks and wish to continue": "我了解风险并希望继续",
     "Go to element.io": "前往 element.io",
     "Failed to start": "启动失败",
     "Your Element is misconfigured": "Element 配置错误",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Element 配置文件中包含无效的 JSON，请改正错误并重新加载页面。",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Element 配置文件中包含无效的 JSON。请改正错误并重新加载页面。",
-    "Download Completed": "下载成功",
+    "Download Completed": "下载完成",
     "Open": "打开",
-    "Your browser can't run %(brand)s": "浏览器无法运行 %(brand)s",
+    "Your browser can't run %(brand)s": "你的浏览器无法运行 %(brand)s",
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "当前浏览器不支持 %(brand)s 所需的高级浏览器特性。",
     "Powered by Matrix": "由 Matrix 驱动",
     "Use %(brand)s on mobile": "在移动设备上使用 %(brand)s",
     "Switch to space by number": "按数字切换空间",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "去中心化、加密的聊天与协作，威力本源 $matrixLogo"
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "去中心化、加密的聊天与协作，由 $matrixLogo 驱动"
 }

src/vector/jitsi/index.ts

@@ -29,7 +29,7 @@ import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 import { getVectorConfig } from "../getconfig";
 
 // We have to trick webpack into loading our CSS for us.
-require("./index.scss");
+require("./index.pcss");
 
 const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';
 

test/app-tests/joining-test.tsx

@@ -1,229 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/* joining.js: tests for the various paths when joining a room */
-
-import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
-import WebPlatform from '../../src/vector/platform/WebPlatform';
-import * as jssdk from "matrix-js-sdk/src/matrix";
-import "../jest-mocks";
-import React from "react";
-import ReactDOM from "react-dom";
-import ReactTestUtils from "react-dom/test-utils";
-import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
-import {sleep} from "../test-utils";
-import MockHttpBackend from "matrix-mock-request";
-import "fake-indexeddb/auto";
-import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView';
-import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
-import RoomDirectory from "matrix-react-sdk/src/components/structures/RoomDirectory";
-import RoomPreviewBar from "matrix-react-sdk/src/components/views/rooms/RoomPreviewBar";
-
-const HS_URL='http://localhost';
-const IS_URL='http://localhost';
-const USER_ID='@me:localhost';
-const ACCESS_TOKEN='access_token';
-
-describe('joining a room', function() {
-    describe('over federation', function() {
-        let parentDiv;
-        let httpBackend;
-        let matrixChat;
-
-        beforeEach(function() {
-            httpBackend = new MockHttpBackend();
-            jssdk.request(httpBackend.requestFn);
-            parentDiv = document.createElement('div');
-
-            // uncomment this to actually add the div to the UI, to help with
-            // debugging (but slow things down)
-            // document.body.appendChild(parentDiv);
-        });
-
-        afterEach(function() {
-            if (parentDiv) {
-                ReactDOM.unmountComponentAtNode(parentDiv);
-                parentDiv.remove();
-                parentDiv = null;
-            }
-        });
-
-        // TODO: Re-enable test
-        // The test is currently disabled because the room directory now resides in a dialog,
-        // which is not accessible from the MatrixChat component anymore. Convincing react that
-        // the dialog does exist and is under a different tree is incredibly difficult though,
-        // so for now the test has been disabled. We should revisit this test when someone has
-        // the time to kill to figure this out. Problem area is highlighted within the test.
-        xit('should not get stuck at a spinner', function() {
-            const ROOM_ALIAS = '#alias:localhost';
-            const ROOM_ID = '!id:localhost';
-
-            httpBackend.when('GET', '/pushrules').respond(200, {});
-            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
-
-            // note that we deliberately do *not* set an expectation for a
-            // presence update - setting one makes the first httpBackend.flush
-            // return before the first /sync arrives.
-
-            // start with a logged-in client
-            localStorage.setItem("mx_hs_url", HS_URL );
-            localStorage.setItem("mx_is_url", IS_URL );
-            localStorage.setItem("mx_access_token", ACCESS_TOKEN );
-            localStorage.setItem("mx_user_id", USER_ID);
-
-            PlatformPeg.set(new WebPlatform());
-
-            const config = {
-                validated_server_config: makeType(ValidatedServerConfig, {
-                    hsUrl: HS_URL,
-                    hsName: "TEST_ENVIRONMENT",
-                    hsNameIsDifferent: false, // yes, we lie
-                    isUrl: IS_URL,
-                }),
-            };
-
-            const mc = (
-                <MatrixChat
-                    config={config}
-                    serverConfig={config.validated_server_config}
-                    makeRegistrationUrl={()=>{throw new Error("unimplemented");}}
-                    initialScreenAfterLogin={{
-                        screen: 'directory',
-                    }}
-                />
-            );
-            matrixChat = ReactDOM.render(mc, parentDiv);
-
-            let roomView;
-
-            // wait for /sync to happen. This may take some time, as the client
-            // has to initialise indexeddb.
-            console.log("waiting for /sync");
-            httpBackend.when('GET', '/sync')
-                .respond(200, {});
-
-            return httpBackend.flushAllExpected({
-                timeout: 1000,
-            }).then(() => {
-                // wait for the directory requests
-                httpBackend.when('POST', '/publicRooms').respond(200, {chunk: []});
-                httpBackend.when('GET', '/thirdparty/protocols').respond(200, {});
-                return httpBackend.flushAllExpected();
-            }).then(() => {
-                console.log(`${Date.now()} App made requests for directory view; switching to a room.`);
-
-                // TODO: Make this look in the right spot for the directory dialog.
-                // See the comment block at the top of the test for a bit more information. The short
-                // story here is that the RoomDirectory does not exist under matrixChat anymore, or even
-                // the parentDiv we have access to. Asking React to find the RoomDirectory as a child of
-                // the document results in it complaining that you didn't give it a component tree to
-                // search in. When you do get a reference to the component tree based off the document
-                // root and ask it to search, it races and can't find the component in time. To top it
-                // all off, MatrixReactTestUtils can't find the element in time either even with a very
-                // high number of attempts. Assuming we can get a reference to the RoomDirectory in a
-                // dialog, the rest of the test should be fine.
-                const roomDir = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomDirectory,
-                );
-
-                // enter an alias in the input, and simulate enter
-                const input = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    roomDir, 'input') as HTMLInputElement;
-                input.value = ROOM_ALIAS;
-                ReactTestUtils.Simulate.change(input);
-                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
-
-                // that should create a roomview which will start a peek; wait
-                // for the peek.
-                httpBackend.when('GET', '/directory/room/'+encodeURIComponent(ROOM_ALIAS)).respond(200, { room_id: ROOM_ID });
-                httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ID)+"/initialSync")
-                    .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
-
-                return httpBackend.flushAllExpected();
-            }).then(() => {
-                console.log(`${Date.now()} App made room preview request`);
-
-                // we should now have a roomview
-                roomView = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomViewClass);
-
-                // the preview bar may take a tick to be displayed
-                return sleep(1);
-            }).then(() => {
-                const previewBar = ReactTestUtils.findRenderedComponentWithType(
-                    roomView, RoomPreviewBar);
-
-                const joinLink = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    previewBar, 'a');
-
-                ReactTestUtils.Simulate.click(joinLink);
-
-                httpBackend.when('POST', '/join/'+encodeURIComponent(ROOM_ALIAS))
-                    .respond(200, {room_id: ROOM_ID});
-            }).then(() => {
-                // wait for the join request to be made
-                return sleep(1);
-            }).then(() => {
-                // and again, because the state update has to go to the store and
-                // then one dispatch within the store, then to the view
-                // XXX: This is *super flaky*: a better way would be to declare
-                // that we expect a certain state transition to happen, then wait
-                // for that transition to occur.
-                return sleep(1);
-            }).then(() => {
-                // the roomview should now be loading
-                expect(roomView.state.room).toBe(null);
-                expect(roomView.state.joining).toBe(true);
-
-                // there should be a spinner
-                ReactTestUtils.findRenderedDOMComponentWithClass(
-                    roomView, "mx_Spinner");
-
-                // flush it through
-                return httpBackend.flush('/join/'+encodeURIComponent(ROOM_ALIAS));
-            }).then(() => {
-                httpBackend.verifyNoOutstandingExpectation();
-
-                return sleep(1);
-            }).then(() => {
-                // NB. we don't expect the 'joining' flag to reset at any point:
-                // it will stay set and we observe whether we have Room object for
-                // the room and whether our member event shows we're joined.
-
-                // now send the room down the /sync pipe
-                httpBackend.when('GET', '/sync').
-                    respond(200, {
-                        rooms: {
-                            join: {
-                                [ROOM_ID]: {
-                                    state: {},
-                                    timeline: {
-                                        events: [],
-                                        limited: true,
-                                    },
-                                },
-                            },
-                        },
-                    });
-                return httpBackend.flush();
-            }).then(() => {
-                // now the room should have loaded
-                expect(roomView.state.room).toBeTruthy();
-            });
-        });
-    });
-});

test/app-tests/loading-test.tsx

@@ -32,7 +32,7 @@ import * as test_utils from '../test-utils';
 import MockHttpBackend from 'matrix-mock-request';
 import {parseQs, parseQsFromFragment} from '../../src/vector/url_utils';
 import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
+import { ValidatedServerConfig } from 'matrix-react-sdk/src/utils/ValidatedServerConfig';
 import {sleep} from "../test-utils";
 import "fake-indexeddb/auto";
 import {cleanLocalstorage} from "../test-utils";

webpack.config.js

@@ -21,14 +21,14 @@ if (!process.env.VERSION) {
 
 const cssThemes = {
     // CSS themes
-    "theme-legacy-light": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
+    "theme-legacy-light": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.pcss",
-    "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
+    "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.pcss",
-    "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
+    "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.pcss",
     "theme-light-high-contrast":
-        "./node_modules/matrix-react-sdk/res/themes/light-high-contrast/css/light-high-contrast.scss",
+        "./node_modules/matrix-react-sdk/res/themes/light-high-contrast/css/light-high-contrast.pcss",
-    "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
+    "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.pcss",
-    "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
+    "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.pcss",
-    "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
+    "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss",
 };
 
 function getActiveThemes() {
@@ -300,10 +300,10 @@ module.exports = (env, argv) => {
                     ],
                 },
                 {
-                    test: /\.scss$/,
+                    test: /\.pcss$/,
                     use: [
                         /**
-                         * This code is hopeful that no .scss outside of our themes will be directly imported in any
+                         * This code is hopeful that no .pcss outside of our themes will be directly imported in any
                          * of the JS/TS files.
                          * Should be MUCH better with webpack 5, but we're stuck to this solution for now.
                          */
@@ -349,8 +349,7 @@ module.exports = (env, argv) => {
                             options: {
                                 sourceMap: true,
                                 plugins: () => [
-                                    // Note that we use slightly different plugins for SCSS.
+                                    // Note that we use slightly different plugins for PostCSS.
-
                                     require('postcss-import')(),
                                     require("postcss-mixins")(),
                                     require("postcss-simple-vars")(),
@@ -502,7 +501,7 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.svg$/,
-                    issuer: /\.(scss|css)$/,
+                    issuer: /\.(pcss|scss|css)$/,
                     use: [
                         {
                             loader: 'file-loader',
@@ -528,7 +527,7 @@ module.exports = (env, argv) => {
                     oneOf: [
                         {
                             // Assets referenced in CSS files
-                            issuer: /\.(scss|css)$/,
+                            issuer: /\.(pcss|scss|css)$/,
                             loader: 'file-loader',
                             options: {
                                 esModule: false,