From 20de5383694867f9aa63f07def17b8203a767f55 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:22:52 -0800
Subject: [PATCH 1/4] tool wip

---
 .../src/screenshot/components/CropIcon.tsx    |  23 ++
 .../components/ScreenshotEditor.tsx           | 199 +++++++++++-------
 .../components/ScreenshotInput.css.ts         |  19 +-
 3 files changed, 155 insertions(+), 86 deletions(-)
 create mode 100644 packages/feedback/src/screenshot/components/CropIcon.tsx

diff --git a/packages/feedback/src/screenshot/components/CropIcon.tsx b/packages/feedback/src/screenshot/components/CropIcon.tsx
new file mode 100644
index 000000000000..2f4dcc61ca6a
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/CropIcon.tsx
@@ -0,0 +1,23 @@
+import type { VNode, h as hType } from 'preact';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function CropIconFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function CropIcon(): VNode {
+    return (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  };
+}
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index e242415c0903..b38f69cb76a8 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
 import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
 import CropCornerFactory from './CropCorner';
+import CropIconFactory from './CropIcon';
 import PenIconFactory from './PenIcon';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshotFactory } from './useTakeScreenshot';
@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
   const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
   const CropCorner = CropCornerFactory({ h });
   const PenIcon = PenIconFactory({ h });
+  const CropIcon = CropIconFactory({ h });
 
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
     const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
     const [confirmCrop, setConfirmCrop] = hooks.useState(false);
     const [isResizing, setIsResizing] = hooks.useState(false);
+    const [isCropping, setIsCropping] = hooks.useState(false);
     const [isAnnotating, setIsAnnotating] = hooks.useState(false);
 
     hooks.useEffect(() => {
@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
       const croppingBox = constructRect(croppingRect);
       ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);
 
+      if (!isCropping) {
+        return;
+      }
+
       // draw gray overlay around the selection
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
       ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
       ctx.strokeStyle = '#000000';
       ctx.lineWidth = 1;
       ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
-    }, [croppingRect]);
+    }, [croppingRect, isCropping]);
 
     function onGrabButton(e: Event, corner: string): void {
       setIsAnnotating(false);
@@ -398,102 +405,132 @@ export function ScreenshotEditorFactory({
     return (
       <div class="editor">
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
-        {options._experiments.annotations && (
-          <div class="editor__tool-container">
-            <button
-              class="editor__pen-tool"
-              style={{
-                background: isAnnotating
-                  ? 'var(--button-primary-background, var(--accent-background))'
-                  : 'var(--button-background, var(--background))',
-                color: isAnnotating
-                  ? 'var(--button-primary-foreground, var(--accent-foreground))'
-                  : 'var(--button-foreground, var(--foreground))',
-              }}
-              onClick={e => {
-                e.preventDefault();
-                setIsAnnotating(!isAnnotating);
-              }}
-            >
-              <PenIcon />
-            </button>
-          </div>
-        )}
-        <div class="editor__canvas-container" ref={canvasContainerRef}>
-          <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
+        <div class="editor__image-container">
+          <div class="editor__canvas-container" ref={canvasContainerRef}>
+            <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
+              <canvas
+                onMouseDown={onDragStart}
+                style={{ cursor: confirmCrop ? 'move' : 'auto' }}
+                ref={croppingRef}
+              ></canvas>
+              {isCropping && (
+                <div>
+                  <CropCorner
+                    left={croppingRect.startX - CROP_BUTTON_BORDER}
+                    top={croppingRect.startY - CROP_BUTTON_BORDER}
+                    onGrabButton={onGrabButton}
+                    corner="top-left"
+                  ></CropCorner>
+                  <CropCorner
+                    left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
+                    top={croppingRect.startY - CROP_BUTTON_BORDER}
+                    onGrabButton={onGrabButton}
+                    corner="top-right"
+                  ></CropCorner>
+                  <CropCorner
+                    left={croppingRect.startX - CROP_BUTTON_BORDER}
+                    top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
+                    onGrabButton={onGrabButton}
+                    corner="bottom-left"
+                  ></CropCorner>
+                  <CropCorner
+                    left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
+                    top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
+                    onGrabButton={onGrabButton}
+                    corner="bottom-right"
+                  ></CropCorner>
+                </div>
+              )}
+              <div
+                style={{
+                  left: Math.max(0, croppingRect.endX - 191),
+                  top: Math.max(0, croppingRect.endY + 8),
+                  display: confirmCrop ? 'flex' : 'none',
+                }}
+                class="editor__crop-btn-group"
+              >
+                <button
+                  onClick={e => {
+                    e.preventDefault();
+                    if (croppingRef.current) {
+                      setCroppingRect({
+                        startX: 0,
+                        startY: 0,
+                        endX: croppingRef.current.width / DPI,
+                        endY: croppingRef.current.height / DPI,
+                      });
+                    }
+                    setConfirmCrop(false);
+                  }}
+                  class="btn btn--default"
+                >
+                  {options.cancelButtonLabel}
+                </button>
+                <button
+                  onClick={e => {
+                    e.preventDefault();
+                    applyCrop();
+                    setConfirmCrop(false);
+                  }}
+                  class="btn btn--primary"
+                >
+                  {options.confirmButtonLabel}
+                </button>
+              </div>
+            </div>
+
             <canvas
-              onMouseDown={onDragStart}
-              style={{ cursor: confirmCrop ? 'move' : 'auto' }}
-              ref={croppingRef}
+              class="editor__annotation"
+              onMouseDown={onAnnotateStart}
+              style={{ zIndex: isAnnotating ? '2' : '1' }}
+              ref={annotatingRef}
             ></canvas>
-            <CropCorner
-              left={croppingRect.startX - CROP_BUTTON_BORDER}
-              top={croppingRect.startY - CROP_BUTTON_BORDER}
-              onGrabButton={onGrabButton}
-              corner="top-left"
-            ></CropCorner>
-            <CropCorner
-              left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
-              top={croppingRect.startY - CROP_BUTTON_BORDER}
-              onGrabButton={onGrabButton}
-              corner="top-right"
-            ></CropCorner>
-            <CropCorner
-              left={croppingRect.startX - CROP_BUTTON_BORDER}
-              top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
-              onGrabButton={onGrabButton}
-              corner="bottom-left"
-            ></CropCorner>
-            <CropCorner
-              left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
-              top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
-              onGrabButton={onGrabButton}
-              corner="bottom-right"
-            ></CropCorner>
-            <div
-              style={{
-                left: Math.max(0, croppingRect.endX - 191),
-                top: Math.max(0, croppingRect.endY + 8),
-                display: confirmCrop ? 'flex' : 'none',
-              }}
-              class="editor__crop-btn-group"
-            >
+          </div>
+        </div>
+        {options._experiments.annotations && (
+          <div class="editor__tool-container">
+            <div />
+            <div class="editor__tool-bar">
               <button
+                class="editor__tool"
+                style={{
+                  background: isAnnotating
+                    ? 'var(--button-primary-background, var(--accent-background))'
+                    : 'var(--button-background, var(--background))',
+                  color: isAnnotating
+                    ? 'var(--button-primary-foreground, var(--accent-foreground))'
+                    : 'var(--button-foreground, var(--foreground))',
+                }}
                 onClick={e => {
                   e.preventDefault();
-                  if (croppingRef.current) {
-                    setCroppingRect({
-                      startX: 0,
-                      startY: 0,
-                      endX: croppingRef.current.width / DPI,
-                      endY: croppingRef.current.height / DPI,
-                    });
-                  }
-                  setConfirmCrop(false);
+                  setIsAnnotating(!isAnnotating);
+                  setIsCropping(false);
                 }}
-                class="btn btn--default"
               >
-                {options.cancelButtonLabel}
+                <CropIcon />
               </button>
               <button
+                class="editor__tool"
+                style={{
+                  background: isCropping
+                    ? 'var(--button-primary-background, var(--accent-background))'
+                    : 'var(--button-background, var(--background))',
+                  color: isCropping
+                    ? 'var(--button-primary-foreground, var(--accent-foreground))'
+                    : 'var(--button-foreground, var(--foreground))',
+                }}
                 onClick={e => {
                   e.preventDefault();
-                  applyCrop();
-                  setConfirmCrop(false);
+                  setIsCropping(!isCropping);
+                  setIsAnnotating(false);
                 }}
-                class="btn btn--primary"
               >
-                {options.confirmButtonLabel}
+                <PenIcon />
               </button>
             </div>
+            <div />
           </div>
-          <canvas
-            class="editor__annotation"
-            onMouseDown={onAnnotateStart}
-            style={{ zIndex: isAnnotating ? '2' : '1' }}
-            ref={annotatingRef}
-          ></canvas>
-        </div>
+        )}
       </div>
     );
   };
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 5b439390d068..3f78e41a5851 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 
   style.textContent = `
 .editor {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+.editor__image-container {
   padding: 10px;
   padding-top: 65px;
   padding-bottom: 65px;
-  flex-grow: 1;
   position: relative;
+  height: 100%;
+  border-radius: var(--menu-border-radius, 6px);
 
   background-color: ${surface200};
   background-image: repeating-linear-gradient(
@@ -90,13 +96,16 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border-top: none;
 }
 .editor__tool-container {
-  position: absolute;
-  padding: 10px 0px;
-  top: 0;
+  padding-top: 10px;
+  display: flex;
+  justify-content: space-between;
 }
-.editor__pen-tool {
+.editor__tool-bar {
   height: 30px;
   display: flex;
+    gap: 8px;
+}
+.editor__tool {
   justify-content: center;
   align-items: center;
   border: var(--button-border, var(--border));

From 5ba5800ec00973cb5b3c6a0e37c19dcc897f110a Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 3 Feb 2025 16:54:01 -0500
Subject: [PATCH 2/4] use multiple class names in BEM format

---
 .../src/screenshot/components/CropIcon.tsx    |   2 +-
 .../src/screenshot/components/PenIcon.tsx     |   2 +-
 .../components/ScreenshotEditor.tsx           | 111 ++++++++----------
 .../components/ScreenshotInput.css.ts         |  33 +++++-
 4 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/CropIcon.tsx b/packages/feedback/src/screenshot/components/CropIcon.tsx
index 2f4dcc61ca6a..091179d86004 100644
--- a/packages/feedback/src/screenshot/components/CropIcon.tsx
+++ b/packages/feedback/src/screenshot/components/CropIcon.tsx
@@ -9,7 +9,7 @@ export default function CropIconFactory({
 }: FactoryParams) {
   return function CropIcon(): VNode {
     return (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
           stroke="currentColor"
diff --git a/packages/feedback/src/screenshot/components/PenIcon.tsx b/packages/feedback/src/screenshot/components/PenIcon.tsx
index ec50862c1dd4..75a0faedf480 100644
--- a/packages/feedback/src/screenshot/components/PenIcon.tsx
+++ b/packages/feedback/src/screenshot/components/PenIcon.tsx
@@ -9,7 +9,7 @@ export default function PenIconFactory({
 }: FactoryParams) {
   return function PenIcon(): VNode {
     return (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
           stroke="currentColor"
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index b38f69cb76a8..3425c73a4c55 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -407,13 +407,13 @@ export function ScreenshotEditorFactory({
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
         <div class="editor__image-container">
           <div class="editor__canvas-container" ref={canvasContainerRef}>
-            <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
-              <canvas
-                onMouseDown={onDragStart}
-                style={{ cursor: confirmCrop ? 'move' : 'auto' }}
-                ref={croppingRef}
-              ></canvas>
-              {isCropping && (
+            <div
+              class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
+              ${confirmCrop ? 'editor__crop-container--move' : ''}`}
+              ref={cropContainerRef}
+            >
+              <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
+              {(!options._experiments.annotations || isCropping) && (
                 <div>
                   <CropCorner
                     left={croppingRect.startX - CROP_BUTTON_BORDER}
@@ -441,48 +441,47 @@ export function ScreenshotEditorFactory({
                   ></CropCorner>
                 </div>
               )}
-              <div
-                style={{
-                  left: Math.max(0, croppingRect.endX - 191),
-                  top: Math.max(0, croppingRect.endY + 8),
-                  display: confirmCrop ? 'flex' : 'none',
-                }}
-                class="editor__crop-btn-group"
-              >
-                <button
-                  onClick={e => {
-                    e.preventDefault();
-                    if (croppingRef.current) {
-                      setCroppingRect({
-                        startX: 0,
-                        startY: 0,
-                        endX: croppingRef.current.width / DPI,
-                        endY: croppingRef.current.height / DPI,
-                      });
-                    }
-                    setConfirmCrop(false);
-                  }}
-                  class="btn btn--default"
-                >
-                  {options.cancelButtonLabel}
-                </button>
-                <button
-                  onClick={e => {
-                    e.preventDefault();
-                    applyCrop();
-                    setConfirmCrop(false);
+              {(!options._experiments.annotations || isCropping) && (
+                <div
+                  style={{
+                    left: Math.max(0, croppingRect.endX - 191),
+                    top: Math.max(0, croppingRect.endY + 8),
                   }}
-                  class="btn btn--primary"
+                  class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
                 >
-                  {options.confirmButtonLabel}
-                </button>
-              </div>
+                  <button
+                    onClick={e => {
+                      e.preventDefault();
+                      if (croppingRef.current) {
+                        setCroppingRect({
+                          startX: 0,
+                          startY: 0,
+                          endX: croppingRef.current.width / DPI,
+                          endY: croppingRef.current.height / DPI,
+                        });
+                      }
+                      setConfirmCrop(false);
+                    }}
+                    class="btn btn--default"
+                  >
+                    {options.cancelButtonLabel}
+                  </button>
+                  <button
+                    onClick={e => {
+                      e.preventDefault();
+                      applyCrop();
+                      setConfirmCrop(false);
+                    }}
+                    class="btn btn--primary"
+                  >
+                    {options.confirmButtonLabel}
+                  </button>
+                </div>
+              )}
             </div>
-
             <canvas
-              class="editor__annotation"
+              class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
               onMouseDown={onAnnotateStart}
-              style={{ zIndex: isAnnotating ? '2' : '1' }}
               ref={annotatingRef}
             ></canvas>
           </div>
@@ -492,40 +491,24 @@ export function ScreenshotEditorFactory({
             <div />
             <div class="editor__tool-bar">
               <button
-                class="editor__tool"
-                style={{
-                  background: isAnnotating
-                    ? 'var(--button-primary-background, var(--accent-background))'
-                    : 'var(--button-background, var(--background))',
-                  color: isAnnotating
-                    ? 'var(--button-primary-foreground, var(--accent-foreground))'
-                    : 'var(--button-foreground, var(--foreground))',
-                }}
+                class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
                 onClick={e => {
                   e.preventDefault();
                   setIsAnnotating(!isAnnotating);
                   setIsCropping(false);
                 }}
               >
-                <CropIcon />
+                <PenIcon />
               </button>
               <button
-                class="editor__tool"
-                style={{
-                  background: isCropping
-                    ? 'var(--button-primary-background, var(--accent-background))'
-                    : 'var(--button-background, var(--background))',
-                  color: isCropping
-                    ? 'var(--button-primary-foreground, var(--accent-foreground))'
-                    : 'var(--button-foreground, var(--foreground))',
-                }}
+                class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
                 onClick={e => {
                   e.preventDefault();
                   setIsCropping(!isCropping);
                   setIsAnnotating(false);
                 }}
               >
-                <PenIcon />
+                <CropIcon />
               </button>
             </div>
             <div />
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 3f78e41a5851..4a9b313cdd6b 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -40,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
     );
 }
 
+.editor__annotation {
+  z-index: 1;
+}
+.editor__annotation--active {
+  z-index: 2;
+}
+
 .editor__canvas-container {
   width: 100%;
   height: 100%;
@@ -55,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 }
 
 .editor__crop-container {
+  custor: auto;
   position: absolute;
+  z-index: 2;
+}
+.editor__crop-container--inactive {
+  z-index: 1;
+}
+.editor__crop-container--move {
+  cursor: move;
 }
 
 .editor__crop-btn-group {
@@ -65,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   background: var(--button-background, var(--background));
   width: 175px;
   position: absolute;
+  display: none;
+}
+.editor__crop-btn-group--active {
+  display: flex;
 }
 
 .editor__crop-corner {
@@ -96,20 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border-top: none;
 }
 .editor__tool-container {
-  padding-top: 10px;
+  padding-top: 8px;
   display: flex;
   justify-content: space-between;
 }
 .editor__tool-bar {
-  height: 30px;
   display: flex;
-    gap: 8px;
+  gap: 8px;
 }
 .editor__tool {
+  display: flex;
+  padding: 8px 12px;
   justify-content: center;
   align-items: center;
   border: var(--button-border, var(--border));
   border-radius: var(--button-border-radius, 6px);
+  background: var(--button-background, var(--background));
+  color: var(--button-foreground, var(--foreground));
+}
+
+.editor__tool--active {
+  background: var(--button-primary-background, var(--accent-background));
+  color: var(--button-primary-foreground, var(--accent-foreground));
 }
 `;
 

From ff07b6cb8ab42b0e0d9ef1f91d25fd1358da54a2 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:05:51 -0500
Subject: [PATCH 3/4] still works when option is off

---
 .../screenshot/components/ScreenshotEditor.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 3425c73a4c55..23f13d310586 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -88,7 +88,7 @@ export function ScreenshotEditorFactory({
     const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
     const [confirmCrop, setConfirmCrop] = hooks.useState(false);
     const [isResizing, setIsResizing] = hooks.useState(false);
-    const [isCropping, setIsCropping] = hooks.useState(false);
+    const [isCropping, setIsCropping] = hooks.useState(true);
     const [isAnnotating, setIsAnnotating] = hooks.useState(false);
 
     hooks.useEffect(() => {
@@ -491,24 +491,24 @@ export function ScreenshotEditorFactory({
             <div />
             <div class="editor__tool-bar">
               <button
-                class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
+                class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
                 onClick={e => {
                   e.preventDefault();
-                  setIsAnnotating(!isAnnotating);
-                  setIsCropping(false);
+                  setIsCropping(!isCropping);
+                  setIsAnnotating(false);
                 }}
               >
-                <PenIcon />
+                <CropIcon />
               </button>
               <button
-                class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
+                class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
                 onClick={e => {
                   e.preventDefault();
-                  setIsCropping(!isCropping);
-                  setIsAnnotating(false);
+                  setIsAnnotating(!isAnnotating);
+                  setIsCropping(false);
                 }}
               >
-                <CropIcon />
+                <PenIcon />
               </button>
             </div>
             <div />

From 71d8049cdcc1ad70291e6575162de77d56324a0f Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:31:23 -0500
Subject: [PATCH 4/4] rm extra options

---
 .../feedback/src/screenshot/components/ScreenshotEditor.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 23f13d310586..1de5759efad0 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -413,7 +413,7 @@ export function ScreenshotEditorFactory({
               ref={cropContainerRef}
             >
               <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
-              {(!options._experiments.annotations || isCropping) && (
+              {isCropping && (
                 <div>
                   <CropCorner
                     left={croppingRect.startX - CROP_BUTTON_BORDER}
@@ -441,7 +441,7 @@ export function ScreenshotEditorFactory({
                   ></CropCorner>
                 </div>
               )}
-              {(!options._experiments.annotations || isCropping) && (
+              {isCropping && (
                 <div
                   style={{
                     left: Math.max(0, croppingRect.endX - 191),