Merge branch 'develop' into UserInfo

.github/workflows/element-build-and-test.yaml

@@ -8,13 +8,14 @@ on:
     branches: [ develop, master ]
   repository_dispatch:
     types: [ upstream-sdk-notify ]
+env:
+  # These must be set for fetchdep.sh to get the right branch
+  REPOSITORY: ${{ github.repository }}
+  PR_NUMBER: ${{ github.event.pull_request.number }}
 jobs:
   build:
     name: "Build Element-Web"
     runs-on: ubuntu-latest
-    env:
-      # This must be set for fetchdep.sh to get the right branch
-      PR_NUMBER: ${{github.event.number}}
     steps:
       - uses: actions/checkout@v2
 
@@ -90,9 +91,6 @@ jobs:
   app-tests:
     name: Element Web Integration Tests
     runs-on: ubuntu-latest
-    env:
-      # This must be set for fetchdep.sh to get the right branch
-      PR_NUMBER: ${{github.event.number}}
     steps:
       - uses: actions/checkout@v2
 

.github/workflows/end-to-end-tests.yaml

@@ -9,12 +9,13 @@ on:
     branches: [ develop ]
   repository_dispatch:
     types: [ upstream-sdk-notify ]
+env:
+  # These must be set for fetchdep.sh to get the right branch
+  REPOSITORY: ${{ github.repository }}
+  PR_NUMBER: ${{ github.event.pull_request.number }}
 jobs:
   end-to-end:
     runs-on: ubuntu-latest
-    env:
-      # This must be set for fetchdep.sh to get the right branch
-      PR_NUMBER: ${{github.event.number}}
     container: vectorim/element-web-ci-e2etests-env:latest
     steps:
       - name: Checkout code

.github/workflows/netlify.yaml

@@ -25,40 +25,40 @@ jobs:
           echo "PR number: $pr_number"
           echo "::set-output name=prnumber::$pr_number"
 
-      - name: Create Deployment ID
-        uses: altinukshini/deployment-action@v1.2.6
+      - name: Create Deployment
+        uses: bobheadxi/deployments@v1
         id: deployment
         with:
-          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
-          pr: true
-          pr_id: ${{ steps.readctx.outputs.prnumber }}
-          transient_environment: true
-          environment: Netlify
-          initial_status: in_progress
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: Netlify
           ref: ${{ github.event.workflow_run.head_sha }}
+          desc: |
+            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
+            Exercise caution. Use test accounts.
 
-      # There's a 'download artifact' action but it hasn't been updated for the
+      # There's a 'download artifact' action, but it hasn't been updated for the
       # workflow_run action (https://github.com/actions/download-artifact/issues/60)
       # so instead we get this mess:
       - name: 'Download artifact'
         uses: actions/github-script@v3.1.0
         with:
           script: |
-            var artifacts = await github.actions.listWorkflowRunArtifacts({
-               owner: context.repo.owner,
-               repo: context.repo.repo,
-               run_id: ${{github.event.workflow_run.id }},
+            const artifacts = await github.actions.listWorkflowRunArtifacts({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                run_id: ${{ github.event.workflow_run.id }},
             });
-            var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "previewbuild"
+            const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
+                return artifact.name == "previewbuild"
             })[0];
-            var download = await github.actions.downloadArtifact({
-               owner: context.repo.owner,
-               repo: context.repo.repo,
-               artifact_id: matchArtifact.id,
-               archive_format: 'zip',
+            const download = await github.actions.downloadArtifact({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                artifact_id: matchArtifact.id,
+                archive_format: 'zip',
             });
-            var fs = require('fs');
+            const fs = require('fs');
             fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
 
       - name: Extract Artifacts
@@ -79,25 +79,16 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
         timeout-minutes: 1
 
-      - name: Update deployment status (success)
-        if: success()
-        uses: altinukshini/deployment-status@v1.0.1
+      - name: Update deployment status
+        uses: bobheadxi/deployments@v1
+        if: always()
         with:
-          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
-          environment_url: ${{ steps.netlify.outputs.deploy-url }}
-          state: "success"
+          step: finish
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          env: ${{ steps.deployment.outputs.env }}
           deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-          pr: true
-          pr_id: ${{ steps.readctx.outputs.prnumber }}
-          description: |
+          env_url: ${{ steps.netlify.outputs.deploy-url }}
+          desc: |
             Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
             Exercise caution. Use test accounts.
-      - name: Update deployment status (failure)
-        if: failure()
-        uses: altinukshini/deployment-status@v1.0.1
-        with:
-          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
-          state: "failure"
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-          pr: true
-          pr_id: ${{ steps.readctx.outputs.prnumber }}

.github/workflows/static_analysis.yaml

@@ -5,13 +5,14 @@ on:
     branches: [ develop, master ]
   repository_dispatch:
     types: [ upstream-sdk-notify ]
+env:
+  # These must be set for fetchdep.sh to get the right branch
+  REPOSITORY: ${{ github.repository }}
+  PR_NUMBER: ${{ github.event.pull_request.number }}
 jobs:
   ts_lint:
     name: "Typescript Syntax Check"
     runs-on: ubuntu-latest
-    env:
-      # This must be set for fetchdep.sh to get the right branch
-      PR_NUMBER: ${{github.event.number}}
     steps:
       - uses: actions/checkout@v2
 
@@ -86,3 +87,16 @@ jobs:
 
       - name: Run Linter
         run: "yarn run lint:style"
+
+  sonarqube:
+    name: "SonarQube"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/tests.yml

@@ -5,13 +5,14 @@ on:
     branches: [ develop, master ]
   repository_dispatch:
     types: [ upstream-sdk-notify ]
+env:
+  # These must be set for fetchdep.sh to get the right branch
+  REPOSITORY: ${{ github.repository }}
+  PR_NUMBER: ${{ github.event.pull_request.number }}
 jobs:
   jest:
     name: Jest with Codecov
     runs-on: ubuntu-latest
-    env:
-      # This must be set for fetchdep.sh to get the right branch
-      PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout code
         uses: actions/checkout@v2

res/css/_common.scss

@@ -692,6 +692,29 @@ legend {
     }
 }
 
+@define-mixin ThreadsAmount {
+    $threadInfoLineHeight: calc(2 * $font-12px);
+
+    color: $secondary-content;
+    font-weight: $font-semi-bold;
+    line-height: $threadInfoLineHeight;
+    white-space: nowrap;
+    position: relative;
+    padding: 0 $spacing-12 0 $spacing-8;
+}
+
+@define-mixin ThreadInfoIcon {
+    content: "";
+    display: inline-block;
+    mask-image: url('$(res)/img/element-icons/thread-summary.svg');
+    mask-position: center;
+    height: 18px;
+    min-width: 18px;
+    background-color: $secondary-content !important;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+}
+
 @define-mixin ListResetDefault {
     list-style: none;
     padding: 0;

res/css/structures/_SpacePanel.scss

@@ -155,6 +155,7 @@ $activeBorderColor: $primary-content;
             border-radius: 12px;
             padding: 4px;
             width: calc(100% - 32px);
+            min-width: 0;
         }
 
         .mx_SpaceButton_name {
@@ -274,6 +275,7 @@ $activeBorderColor: $primary-content;
         display: flex;
         flex-direction: column;
         max-width: 250px;
+        min-width: 0;
         flex-grow: 1;
 
         .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {

res/css/views/messages/_MLocationBody.scss

@@ -21,6 +21,7 @@ limitations under the License.
         z-index: 0; // keeps the entire map under the message action bar
 
         border-radius: $timeline-image-border-radius;
+        cursor: pointer;
     }
 }
 

res/css/views/right_panel/_ThreadPanel.scss

@@ -20,10 +20,6 @@ limitations under the License.
     height: 100px;
     overflow: visible;
 
-    &:not(.mx_ThreadView).mx_BaseCard {
-        padding-right: 2px;
-    }
-
     .mx_BaseCard_header {
         margin-bottom: 12px;
 
@@ -111,15 +107,37 @@ limitations under the License.
     .mx_AutoHideScrollbar {
         background-color: $background;
         border-radius: 8px;
-        width: calc(100% - 24px);
-        padding-right: 18px;
+        padding-inline-end: 0;
+        overflow-y: scroll; // set gap between the thread tile and the right border
+    }
+
+    // Override _GroupLayout.scss for the thread panel
+    .mx_GroupLayout {
+        .mx_EventTile {
+            .mx_MessageActionBar {
+                right: 0;
+                top: -36px; // 2px above EventTile
+                z-index: 10; // See _EventTile.scss
+            }
+
+            &[data-shape=ThreadsList] {
+                > .mx_DisambiguatedProfile {
+                    margin-inline-start: 0;
+                }
+
+                .mx_MessageTimestamp {
+                    position: initial;
+                    width: auto;
+                }
+
+                .mx_EventTile_line {
+                    padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss
+                }
+            }
+        }
     }
 
     &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
-        /* the scrollbar is 8px wide, and we want a 12px gap with the side of the
-        panel. Hence the magic number, 8+4=12 */
-        width: calc(100% + 6px);
-        padding-right: 4px;
         position: relative;
         min-height: 0; // don't displace the composer
         flex-grow: 1;
@@ -129,9 +147,15 @@ limitations under the License.
         }
     }
 
+    .mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty
+        .mx_RoomView_messageListWrapper {
+            width: calc(100% + 6px); // 8px - 2px
+        }
+    }
+
     .mx_RoomView_MessageList {
-        padding-left: 12px;
-        padding-right: 0;
+        padding-inline-start: $spacing-8;
+        padding-inline-end: $spacing-8;
         content-visibility: visible;
     }
 
@@ -256,14 +280,14 @@ limitations under the License.
 }
 
 .mx_ThreadPanel_replies {
-    margin-top: 8px;
+    margin-top: $spacing-8;
     display: flex;
     align-items: center;
     position: relative;
 
-    .mx_ThreadSummary_threads-amount {
-        color: $secondary-content;
-        font-size: $font-12px;
+    .mx_ThreadPanel_ThreadsAmount {
+        @mixin ThreadsAmount;
+        font-size: $font-12px; // Same font size as the counter on the main panel
     }
 }
 
@@ -286,7 +310,6 @@ limitations under the License.
     top: 0;
     bottom: 0;
     left: 0;
-    right: 6px;
     padding: 20px;
 
     h2 {

res/css/views/right_panel/_TimelineCard.scss

@@ -42,11 +42,6 @@ limitations under the License.
         border-radius: 8px;
     }
 
-    .mx_AutoHideScrollbar {
-        padding-right: 10px;
-        width: calc(100% - 10px);
-    }
-
     .mx_NewRoomIntro {
         margin-left: 36px;
     }

res/css/views/rooms/_EventBubbleTile.scss

@@ -562,6 +562,17 @@ limitations under the License.
         padding-top: 0;
     }
 
+    .mx_EventTile {
+        &.mx_EventTile_info {
+            .mx_EventTile_line {
+                // Avoid overflow of event info by cancelling width settings
+                width: 100%;
+                min-width: 0;
+                max-width: 100%;
+            }
+        }
+    }
+
     &::after {
         content: "";
         clear: both;
@@ -585,7 +596,7 @@ limitations under the License.
         margin-right: 0;
 
         .mx_MessageActionBar {
-            right: 127px; // align with that of right-column bubbles
+            right: 48px; // align with that of right-column bubbles
         }
 
         .mx_ReadReceiptGroup {