Merge commit '5b457961fc1189a71599dc6c06b3f159b195a455' into glitch-soc/merge-upstream

Conflicts:
- `config/initializers/content_security_policy.rb`:
  Upstream fixed an issue that was not present in glitch-soc.
  Kept our version.

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -297,7 +297,7 @@ export default class Dropdown extends PureComponent {
       onKeyPress: this.handleKeyPress,
     }) : (
       <IconButton
-        icon={icon}
+        icon={!open ? icon : 'close'}
         title={title}
         active={open}
         disabled={disabled}

app/javascript/mastodon/features/compose/components/navigation_bar.jsx

@@ -8,7 +8,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Avatar } from '../../../components/avatar';
-import { IconButton } from '../../../components/icon_button';
 
 import ActionBar from './action_bar';
 
@@ -21,23 +20,27 @@ export default class NavigationBar extends ImmutablePureComponent {
   };
 
   render () {
+    const username = this.props.account.get('acct')
     return (
       <div className='navigation-bar'>
-        <Link to={`/@${this.props.account.get('acct')}`}>
-          <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
+        <Link to={`/@${username}`}>
+          <span style={{ display: 'none' }}>{username}</span>
           <Avatar account={this.props.account} size={46} />
         </Link>
 
         <div className='navigation-bar__profile'>
-          <Link to={`/@${this.props.account.get('acct')}`}>
-            <strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong>
-          </Link>
+          <span>
+            <Link to={`/@${username}`}>
+              <strong className='navigation-bar__profile-account'>@{username}</strong>
+            </Link>
+          </span>
 
-          <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+          <span>
+            <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+          </span>
         </div>
 
         <div className='navigation-bar__actions'>
-          <IconButton className='close' title='' icon='close' onClick={this.props.onClose} />
           <ActionBar account={this.props.account} onLogout={this.props.onLogout} />
         </div>
       </div>

app/javascript/mastodon/features/status/index.jsx

@@ -196,8 +196,8 @@ class Status extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
     isLoading: PropTypes.bool,
-    ancestorsIds: ImmutablePropTypes.list,
-    descendantsIds: ImmutablePropTypes.list,
+    ancestorsIds: ImmutablePropTypes.list.isRequired,
+    descendantsIds: ImmutablePropTypes.list.isRequired,
     intl: PropTypes.object.isRequired,
     askReplyConfirmation: PropTypes.bool,
     multiColumn: PropTypes.bool,
@@ -224,14 +224,9 @@ class Status extends ImmutablePureComponent {
 
   UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
-      this._scrolledIntoView = false;
       this.props.dispatch(fetchStatus(nextProps.params.statusId));
     }
 
-    if (nextProps.params.statusId && nextProps.ancestorsIds.size > this.props.ancestorsIds.size) {
-      this._scrolledIntoView = false;
-    }
-
     if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
       this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
     }
@@ -584,20 +579,23 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   };
 
-  componentDidUpdate () {
-    if (this._scrolledIntoView) {
-      return;
-    }
-
-    const { status, ancestorsIds } = this.props;
-
-    if (status && ancestorsIds && ancestorsIds.size > 0) {
-      const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
+  componentDidUpdate (prevProps) {
+    const { status, ancestorsIds, multiColumn } = this.props;
 
+    if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
       window.requestAnimationFrame(() => {
-        element.scrollIntoView(true);
+        this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);
+
+        // In the single-column interface, `scrollIntoView` will put the post behind the header,
+        // so compensate for that.
+        if (!multiColumn) {
+          const offset = document.querySelector('.column-header__wrapper')?.getBoundingClientRect()?.bottom;
+          if (offset) {
+            const scrollingElement = document.scrollingElement || document.body;
+            scrollingElement.scrollBy(0, -offset);
+          }
+        }
       });
-      this._scrolledIntoView = true;
     }
   }
 

app/javascript/styles/mastodon/basics.scss

@@ -161,13 +161,20 @@ body {
   }
 }
 
+a {
+  &:focus {
+    border-radius: 4px;
+    outline: $ui-button-icon-focus-outline;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
 button {
   font-family: inherit;
   cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
 }
 
 .app-holder {

app/javascript/styles/mastodon/components.scss

@@ -74,6 +74,10 @@
     background-color: $ui-button-focus-background-color;
   }
 
+  &:focus {
+    outline: $ui-button-icon-focus-outline;
+  }
+
   &--destructive {
     &:active,
     &:focus,
@@ -98,16 +102,6 @@
     transition: none;
   }
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
   &.button-secondary {
     color: $ui-button-secondary-color;
     background: transparent;
@@ -197,7 +191,7 @@
   border-radius: 4px;
   background: transparent;
   cursor: pointer;
-  transition: all 100ms ease-in;
+  transition: all 100ms ease-out;
   transition-property: background-color, color;
   text-decoration: none;
 
@@ -209,14 +203,12 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($action-button-color, 7%);
-    background-color: rgba($action-button-color, 0.15);
-    transition: all 200ms ease-out;
-    transition-property: background-color, color;
+    color: lighten($action-button-color, 20%);
+    background-color: $ui-button-icon-hover-background-color;
   }
 
   &:focus {
-    background-color: rgba($action-button-color, 0.3);
+    outline: $ui-button-icon-focus-outline;
   }
 
   &.disabled {
@@ -225,20 +217,6 @@
     cursor: default;
   }
 
-  &.active {
-    color: $highlight-text-color;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
   &.inverted {
     color: $lighter-text-color;
 
@@ -246,11 +224,11 @@
     &:active,
     &:focus {
       color: darken($lighter-text-color, 7%);
-      background-color: rgba($lighter-text-color, 0.15);
+      background-color: $ui-button-icon-hover-background-color;
     }
 
     &:focus {
-      background-color: rgba($lighter-text-color, 0.3);
+      outline: $ui-button-icon-focus-outline;
     }
 
     &.disabled {
@@ -305,7 +283,6 @@
   font-size: 11px;
   padding: 0 3px;
   line-height: 27px;
-  outline: 0;
   transition: all 100ms ease-in;
   transition-property: background-color, color;
 
@@ -313,13 +290,13 @@
   &:active,
   &:focus {
     color: darken($lighter-text-color, 7%);
-    background-color: rgba($lighter-text-color, 0.15);
+    background-color: $ui-button-icon-hover-background-color;
     transition: all 200ms ease-out;
     transition-property: background-color, color;
   }
 
   &:focus {
-    background-color: rgba($lighter-text-color, 0.3);
+    outline: $ui-button-icon-focus-outline;
   }
 
   &.disabled {
@@ -331,16 +308,6 @@
   &.active {
     color: $highlight-text-color;
   }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
 }
 
 body > [data-popper-placement] {
@@ -728,7 +695,6 @@ body > [data-popper-placement] {
     flex: 0 0 auto;
 
     .compose-form__publish-button-wrapper {
-      overflow: hidden;
       padding-top: 15px;
     }
   }
@@ -1929,13 +1895,6 @@ a.account__display-name {
   .navigation-bar__actions {
     position: relative;
 
-    .icon-button.close {
-      position: absolute;
-      pointer-events: none;
-      transform: scale(0, 1) translate(-100%, 0);
-      opacity: 0;
-    }
-
     .compose__action-bar .icon-button {
       pointer-events: auto;
       transform: scale(1, 1) translate(0, 0);
@@ -1945,19 +1904,21 @@ a.account__display-name {
 }
 
 .navigation-bar__profile {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   line-height: 20px;
-  overflow: hidden;
 }
 
 .navigation-bar__profile-account {
-  display: block;
+  display: inline;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .navigation-bar__profile-edit {
+  display: inline;
   color: inherit;
   text-decoration: none;
 }
@@ -4740,11 +4701,6 @@ a.status-card.compact:hover {
   outline: 0;
   cursor: pointer;
 
-  &:active,
-  &:focus {
-    outline: 0 !important;
-  }
-
   img {
     filter: grayscale(100%);
     opacity: 0.8;
@@ -4760,6 +4716,13 @@ a.status-card.compact:hover {
     img {
       opacity: 1;
       filter: none;
+      border-radius: 100%;
+    }
+  }
+
+  &:focus {
+    img {
+      outline: $ui-button-icon-focus-outline;
     }
   }
 }

app/javascript/styles/mastodon/variables.scss

@@ -5,6 +5,7 @@ $red-600: #b7253d !default; // Deep Carmine
 $red-500: #df405a !default; // Cerise
 $blurple-600: #563acc; // Iris
 $blurple-500: #6364ff; // Brand purple
+$blurple-400: #7477fd; // Medium slate blue
 $blurple-300: #858afa; // Faded Blue
 $grey-600: #4e4c5a; // Trout
 $grey-100: #dadaf3; // Topaz
@@ -56,6 +57,9 @@ $ui-button-tertiary-focus-color: $white !default;
 $ui-button-destructive-background-color: $red-500 !default;
 $ui-button-destructive-focus-background-color: $red-600 !default;
 
+$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
+$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
+
 // Variables for texts
 $primary-text-color: $white !default;
 $darker-text-color: $ui-primary-color !default;

app/serializers/activitypub/actor_serializer.rb

@@ -99,7 +99,7 @@ class ActivityPub::ActorSerializer < ActivityPub::Serializer
   end
 
   def name
-    object.suspended? ? '' : object.display_name
+    object.suspended? ? object.username : (object.display_name.presence || object.username)
   end
 
   def summary