compose: Introduce scrolling buttons in gridded layout.

web/shared/icons/compose-scroll-left.svg

@@ -0,0 +1,5 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(3.5,4.46)">
+    <path fill="#7f7f7f" d="M 0,3.54 9,0.08 V 7 Z" />
+  </g>
+</svg>

web/shared/icons/compose-scroll-right.svg

@@ -0,0 +1,5 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(-1,0,0,1,12.5,4.46)">
+    <path fill="#7f7f7f" d="M 0,3.54 9,0.08 V 7 Z" />
+  </g>
+</svg>

web/src/ui_init.js

@@ -266,8 +266,12 @@ export function initialize_kitchen_sink_stuff() {
 
     // Ignore wheel events in the compose area which weren't already handled above.
     $("#compose").on("wheel", (e) => {
-        // Except for the compose banners, which still need scroll events.
+        // Except for the compose banners or formatting buttons,
-        if ($(e.target).closest("#compose_banners").length > 0) {
+        // which still need scroll events.
+        if (
+            $(e.target).closest("#compose_banners, #message-formatting-controls-container").length >
+            0
+        ) {
             return;
         }
         e.stopPropagation();

web/styles/app_variables.css

@@ -825,6 +825,37 @@
     --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
     --color-compose-formatting-button-divider: hsl(0deg 0% 75%);
     --color-compose-focus-ring: var(--color-outline-focus);
+    --color-compose-scroll-icon: hsl(0deg 0% 50%);
+    --color-compose-background-scroll-backward: linear-gradient(
+        90deg,
+        hsl(234deg 100% 95%) 50%,
+        hsl(0deg 0% 100% / 0%) 100%
+    );
+    --color-compose-background-scroll-backward-hover: linear-gradient(
+        90deg,
+        hsl(234deg 100% 93%) 50%,
+        hsl(0deg 0% 100% / 0%) 100%
+    );
+    --color-compose-background-scroll-backward-active: linear-gradient(
+        90deg,
+        hsl(234deg 100% 90%) 45%,
+        hsl(0deg 0% 100% / 0%) 100%
+    );
+    --color-compose-background-scroll-forward: linear-gradient(
+        90deg,
+        hsl(0deg 0% 100% / 0%) 0%,
+        hsl(234deg 100% 95%) 50%
+    );
+    --color-compose-background-scroll-forward-hover: linear-gradient(
+        90deg,
+        hsl(0deg 0% 100% / 0%) 0%,
+        hsl(234deg 100% 93%) 50%
+    );
+    --color-compose-background-scroll-forward-active: linear-gradient(
+        90deg,
+        hsl(0deg 0% 100% / 0%) 0%,
+        hsl(234deg 100% 90%) 55%
+    );
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -1785,6 +1816,36 @@
     --color-compose-control-button-background-hover: hsl(0deg 0% 100% / 5%);
     --color-compose-formatting-button-divider: hsl(236deg 33% 90% / 25%);
     --color-compose-focus-ring: hsl(0deg 0% 67%);
+    --color-compose-background-scroll-backward: linear-gradient(
+        90deg,
+        hsl(234deg 21% 24%) 35%,
+        hsl(225deg 9% 5% / 0%) 100%
+    );
+    --color-compose-background-scroll-backward-hover: linear-gradient(
+        90deg,
+        hsl(234deg 30% 28%) 35%,
+        hsl(225deg 9% 5% / 0%) 100%
+    );
+    --color-compose-background-scroll-backward-active: linear-gradient(
+        90deg,
+        hsl(234deg 35% 30%) 45%,
+        hsl(225deg 9% 5% / 0%) 100%
+    );
+    --color-compose-background-scroll-forward: linear-gradient(
+        90deg,
+        hsl(225deg 9% 5% / 0%) 0%,
+        hsl(234deg 21% 24%) 65%
+    );
+    --color-compose-background-scroll-forward-hover: linear-gradient(
+        90deg,
+        hsl(225deg 9% 5% / 0%) 0%,
+        hsl(234deg 30% 28%) 65%
+    );
+    --color-compose-background-scroll-forward-active: linear-gradient(
+        90deg,
+        hsl(225deg 9% 5% / 0%) 0%,
+        hsl(234deg 35% 30%) 55%
+    );
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 87%);

web/styles/compose.css

@@ -488,6 +488,79 @@
     margin: 0 1px;
 }
 
+.compose-scrolling-buttons-container {
+    display: grid;
+    /* The scroller buttons are set to a 48px width that does not scale;
+       the idea being that that's a generous target area, and that it
+       would be better not to consume more space at larger font sizes
+       under narrower screen sizes. */
+    grid-template-columns:
+        [scroller-backward-start buttons-start] 48px [scroller-backward-end] minmax(
+            0,
+            1fr
+        )
+        [scroller-forward-start] 48px [scroller-forward-end buttons-end];
+    grid-template-rows: auto;
+}
+
+.compose-scrollable-buttons {
+    grid-area: buttons;
+    overflow-x: scroll;
+    scrollbar-width: none;
+}
+
+.formatting-control-scroller-button {
+    z-index: 5;
+    display: flex;
+    align-items: center;
+
+    border-radius: 0;
+    border: 0;
+
+    color: var(--color-compose-scroll-icon);
+    background: transparent;
+}
+
+.formatting-scroller-backward {
+    grid-area: scroller-backward;
+    justify-content: flex-start;
+    border-radius: 0 0 0 3px;
+    background: var(--color-compose-background-scroll-backward);
+
+    &:hover {
+        background: var(--color-compose-background-scroll-backward-hover);
+    }
+
+    &:active {
+        background: var(--color-compose-background-scroll-backward-active);
+
+        .zulip-icon {
+            /* Subtly shift arrow in scroll direction. */
+            margin-left: -2px;
+        }
+    }
+}
+
+.formatting-scroller-forward {
+    grid-area: scroller-forward;
+    justify-content: flex-end;
+    border-radius: 0 0 3px;
+    background: var(--color-compose-background-scroll-forward);
+
+    &:hover {
+        background: var(--color-compose-background-scroll-forward-hover);
+    }
+
+    &:active {
+        background: var(--color-compose-background-scroll-forward-active);
+
+        .zulip-icon {
+            /* Subtly shift arrow in scroll direction. */
+            margin-right: -2px;
+        }
+    }
+}
+
 .message-limit-indicator:not(:empty) {
     font-size: 12px;
     color: var(--color-limit-indicator);

web/styles/message_row.css

@@ -742,8 +742,6 @@ of the base style defined for a read-only textarea in dark mode. */
 }
 
 .message-edit-feature-group {
-    display: flex;
-    align-items: baseline;
     border-radius: 0 0 3px 3px;
     background-color: var(--color-message-formatting-controls-container);
     /* margin on either side to let the border of

web/templates/compose.hbs

@@ -101,8 +101,14 @@
                             </div>
                         </div>
 
-                        <div id="message-formatting-controls-container">
+                        <div id="message-formatting-controls-container" class="compose-scrolling-buttons-container">
                             {{> compose_control_buttons . }}
+                            <button type="button" class="formatting-control-scroller-button formatting-scroller-forward">
+                                <i class="zulip-icon zulip-icon-compose-scroll-right"></i>
+                            </button>
+                            <button type="button" class="formatting-control-scroller-button formatting-scroller-backward">
+                                <i class="zulip-icon zulip-icon-compose-scroll-left"></i>
+                            </button>
                         </div>
                     </div>
                 </div>

web/templates/compose_control_buttons.hbs

@@ -1,4 +1,4 @@
-<div class="compose-control-buttons-container order-1">
+<div class="compose-scrollable-buttons compose-control-buttons-container order-1" tabindex="-1">
     <input type="file" class="file_input notvisible" multiple />
     <div class="compose_control_button_container" data-tooltip-template-id="preview-tooltip" data-tippy-maxWidth="none">
         <a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview' }}" tabindex=0></a>

web/templates/message_edit_form.hbs

@@ -18,8 +18,14 @@
             <div class="action-buttons">
                 <div class="controls edit-controls">
                     {{#if is_editable}}
-                    <div class="message-edit-feature-group">
+                    <div class="message-edit-feature-group compose-scrolling-buttons-container">
                         {{> compose_control_buttons . }}
+                        <button type="button" class="formatting-control-scroller-button formatting-scroller-forward">
+                            <i class="zulip-icon zulip-icon-compose-scroll-right"></i>
+                        </button>
+                        <button type="button" class="formatting-control-scroller-button formatting-scroller-backward">
+                            <i class="zulip-icon zulip-icon-compose-scroll-left"></i>
+                        </button>
                     </div>
                     {{/if}}
                     <div class="message-edit-buttons-and-timer">