[Ai Assistance] Fix overlap of text and screenshot button

Also, the screenshot button should not be visible when chat blocked by cross origin

Bug: 397376612
Change-Id: Ia5be54a32d478e4c9523c76e99dbb5eea8df27da
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6298369
Commit-Queue: Samiya Caur <[email protected]>
Auto-Submit: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Samiya Caur

front_end/panels/ai_assistance/components/ChatView.ts

@@ -1203,14 +1203,16 @@ function renderChatInputButtons(
 
 function renderTakeScreenshotButton({
   multimodalInputEnabled,
+  blockedByCrossOrigin,
   isTextInputDisabled,
   onTakeScreenshot,
 }: {
   isTextInputDisabled: boolean,
+  blockedByCrossOrigin: boolean,
   multimodalInputEnabled?: boolean,
   onTakeScreenshot?: () => void,
 }): Lit.LitTemplate {
-    if (!multimodalInputEnabled) {
+    if (!multimodalInputEnabled || blockedByCrossOrigin) {
       return Lit.nothing;
     }
     return html`<devtools-button
@@ -1308,6 +1310,7 @@ function renderChatInput({
   const chatInputCls = Lit.Directives.classMap({
     'chat-input': true,
     'two-big-buttons': blockedByCrossOrigin,
+    'screenshot-button': Boolean(multimodalInputEnabled) && !blockedByCrossOrigin,
   });
 
     const chatInputContainerCls = Lit.Directives.classMap({
@@ -1348,13 +1351,13 @@ function renderChatInput({
       ></textarea>
       <div class="chat-input-buttons">
         ${renderTakeScreenshotButton({
-          multimodalInputEnabled, isTextInputDisabled, onTakeScreenshot
+          multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, onTakeScreenshot
         })}
         ${renderChatInputButtons({ isLoading, blockedByCrossOrigin, isTextInputDisabled, onCancel, onNewConversation, onCancelCrossOriginChat })}
       </div>
     </div>
   </form>`;
-    // clang-format on
+  // clang-format on
   }
 
   function renderAidaUnavailableContents(

front_end/panels/ai_assistance/components/chatView.css

@@ -182,6 +182,13 @@
     /* cancel + start new chat button */
     --right-padding: 172px;
   }
+
+  &.screenshot-button {
+    --right-padding:
+    calc(
+      2*var(--sys-size-3) + 2*26px
+    ); /* Gaps because of right paddings + width of two icons */
+  }
 }
 
 .chat-input-buttons {