Feature:Make_Timeline_URL_selectable_by_double_click

Author: ArpanMondalGITHUB

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js

@@ -121,10 +121,14 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.text};
   }
   .tl-header-url-method {
+    display: inline-block;
     font-weight: 600;
     margin-right: 6px;
     text-transform: uppercase;
   }
+  .tl-header-url-text {
+    display: inline-block;
+  }
   .tl-header-src {
     display: inline-flex;
     align-items: center;

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js

@@ -63,6 +63,15 @@ const TimelineItem = ({
     setVisitedTabs((v) => (v[id] ? v : { ...v, [id]: true }));
   };
 
+  const selectAllTextOnDoubleClick = (event) => {
+    const el = event.currentTarget;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+
   const { method, url = '' } = request || {};
   // Main-request entries use `status`; scripted entries use `statusCode`.
   const { status, statusCode, statusText } = response || {};
@@ -156,7 +165,7 @@ const TimelineItem = ({
           <div className="tl-col-method">
             <Method method={method} />
           </div>
-          <div className="tl-col-url" title={url} data-testid="timeline-url">{url}</div>
+          <div className="tl-col-url" title={url} data-testid="timeline-url">{url} onDoubleClick={selectAllTextOnDoubleClick}</div>
           <div className="tl-col-badge">
             <span className={badge.badgeClass} data-testid={`timeline-badge-${badge.kind}`}>{badge.badgeLabel}</span>
           </div>
@@ -171,8 +180,8 @@ const TimelineItem = ({
           <div className="tl-detail" data-testid="timeline-detail">
             <div className="tl-header">
               <div className="tl-header-url" title={`${method || ''} ${url}`}>
-                <span className="tl-header-url-method">{method}</span>
-                <span className="tl-header-url-text">{url}</span>
+                <span className="tl-header-url-method">{method}</span>{' '}
+                <span className="tl-header-url-text" onDoubleClick={selectAllTextOnDoubleClick}>{url}</span>
               </div>
               {sourceFile && (
                 <a