[Editor] Add a toolbar to selected editors with a button to delete it (bug 1863763)

web/annotation_editor_layer_builder.css

@@ -188,6 +188,105 @@
       border: var(--focus-outline-around);
     }
   }
+
+  .editToolbar {
+    --editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg);
+    --editor-toolbar-bg-color: #f0f0f4;
+    --editor-toolbar-fg-color: #2e2e56;
+    --editor-toolbar-border-color: #8f8f9d;
+    --editor-toolbar-hover-bg-color: #e0e0e6;
+    --editor-toolbar-active-bg-color: #cfcfd8;
+    --editor-toolbar-focus-outline-color: #0060df;
+    --editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2);
+
+    @media (prefers-color-scheme: dark) {
+      --editor-toolbar-bg-color: #2b2a33;
+      --editor-toolbar-fg-color: #fbfbfe;
+      --editor-toolbar-border-color: #2b2a33;
+      --editor-toolbar-hover-bg-color: #52525e;
+      --editor-toolbar-active-bg-color: #5b5b66;
+      --editor-toolbar-focus-outline-color: #0df;
+    }
+
+    @media screen and (forced-colors: active) {
+      --editor-toolbar-bg-color: ButtonFace;
+      --editor-toolbar-fg-color: ButtonText;
+      --editor-toolbar-border-color: ButtonText;
+      --editor-toolbar-hover-bg-color: AccentColor;
+      --editor-toolbar-active-bg-color: ButtonFace;
+      --editor-toolbar-focus-outline-color: ButtonBorder;
+      --editor-toolbar-shadow: none;
+    }
+
+    display: flex;
+    width: fit-content;
+    height: 28px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: default;
+
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: calc(100% + 6px);
+
+    border-radius: 4px;
+    background-color: var(--editor-toolbar-bg-color);
+    border: 1px solid var(--editor-toolbar-border-color);
+    box-shadow: var(--editor-toolbar-shadow);
+
+    &.hidden {
+      display: none;
+    }
+
+    &:has(:focus-visible) {
+      border-color: transparent;
+    }
+
+    .buttons {
+      display: flex;
+      padding: 0 2px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+
+      .delete {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        border: none;
+        background-color: transparent;
+
+        &::before {
+          content: "";
+          mask-image: var(--editor-toolbar-delete-image);
+          mask-repeat: no-repeat;
+          mask-position: center;
+          display: inline-block;
+          background-color: var(--editor-toolbar-fg-color);
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      > * {
+        &:hover {
+          border-radius: 2px;
+          background-color: var(--editor-toolbar-hover-bg-color);
+        }
+
+        &:active {
+          border-radius: 2px;
+          background-color: var(--editor-toolbar-active-bg-color);
+        }
+
+        &:focus-visible {
+          border-radius: 3px;
+          outline: 2px solid var(--editor-toolbar-focus-outline-color);
+        }
+      }
+    }
+  }
 }
 
 .annotationEditorLayer .freeTextEditor {
@@ -409,6 +508,21 @@
         }
       }
     }
+
+    .editToolbar {
+      rotate: 270deg;
+
+      &:dir(ltr) {
+        inset-inline-start: calc(100% + 6px);
+        inset-block-start: 0;
+      }
+
+      &:dir(rtl) {
+        inset-inline-end: calc(100% + 6px);
+        inset-block-end: 0;
+        inset-block-start: unset;
+      }
+    }
   }
 
   &
@@ -429,6 +543,13 @@
         inset-block-start: -8px;
       }
     }
+
+    .editToolbar {
+      rotate: 180deg;
+      inset-inline-start: 0;
+      inset-block-end: calc(100% + 6px);
+      inset-block-start: unset;
+    }
   }
 
   &
@@ -459,6 +580,21 @@
         }
       }
     }
+
+    .editToolbar {
+      rotate: 90deg;
+
+      &:dir(ltr) {
+        inset-inline-end: calc(100% + 6px);
+        inset-block-end: 0;
+        inset-block-start: unset;
+      }
+
+      &:dir(rtl) {
+        inset-inline-start: calc(100% + 6px);
+        inset-block-start: 0;
+      }
+    }
   }
 }
 
@@ -492,6 +628,7 @@
   &:dir(ltr) {
     transform-origin: 0 100%;
   }
+
   &:dir(rtl) {
     transform-origin: 100% 100%;
   }
@@ -500,6 +637,7 @@
     &:dir(ltr) {
       transform-origin: 0 0;
     }
+
     &:dir(rtl) {
       transform-origin: 100% 0;
     }
@@ -804,6 +942,7 @@
             outline-offset: 0;
             border-color: transparent;
           }
+
           &:disabled {
             pointer-events: none;
             opacity: 0.4;

web/images/editor-toolbar-delete.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M11 3H13.6C14 3 14.3 3.3 14.3 3.6C14.3 3.9 14 4.2 13.7 4.2H13.3V14C13.3 15.1 12.4 16 11.3 16H4.80005C3.70005 16 2.80005 15.1 2.80005 14V4.2H2.40005C2.00005 4.2 1.80005 4 1.80005 3.6C1.80005 3.2 2.00005 3 2.40005 3H5.00005V2C5.00005 0.9 5.90005 0 7.00005 0H9.00005C10.1 0 11 0.9 11 2V3ZM6.90005 1.2L6.30005 1.8V3H9.80005V1.8L9.20005 1.2H6.90005ZM11.4 14.7L12 14.1V4.2H4.00005V14.1L4.60005 14.7H11.4ZM7.00005 12.4C7.00005 12.7 6.70005 13 6.40005 13C6.10005 13 5.80005 12.7 5.80005 12.4V7.6C5.70005 7.3 6.00005 7 6.40005 7C6.80005 7 7.00005 7.3 7.00005 7.6V12.4ZM10.2001 12.4C10.2001 12.7 9.90006 13 9.60006 13C9.30006 13 9.00006 12.7 9.00006 12.4V7.6C9.00006 7.3 9.30006 7 9.60006 7C9.90006 7 10.2001 7.3 10.2001 7.6V12.4Z"
+        fill="black" />
+</svg>