allow single click to edit URL request (#7385)

* allow single click to edit URL request

* update changelog

* [autofix.ci] apply automated fixes

* update changelog

* use 'selectAllOnClick' instead of 'setCursorOnClick'

* remove 'selectAllOnClick' from capture tab page

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -9,6 +9,8 @@
 
 - Add cache-busting for mitmweb's front end code.
   ([#7386](https://github.com/mitmproxy/mitmproxy/pull/7386), @mhils)
+- Clicking the URL in mitmweb now places the cursor at the current position instead of selecting the entire URL.
+  ([#7385](https://github.com/mitmproxy/mitmproxy/pull/7385), @lups2000)
 
 ## 05 December 2024: mitmproxy 11.0.2
 

web/src/js/components/FlowView/Comment.tsx

@@ -17,6 +17,7 @@ export default function Comment({ flow }: { flow: Flow }) {
                     dispatch(flowActions.update(flow, { comment }));
                 }}
                 placeholder="empty"
+                selectAllOnClick={true}
             />
         </section>
     );

web/src/js/components/FlowView/HttpMessages.tsx

@@ -33,6 +33,7 @@ function RequestLine({ flow }: RequestLineProps) {
                         )
                     }
                     isValid={(method) => method.length > 0}
+                    selectAllOnClick={true}
                 />
                  
                 <ValidateEditor
@@ -57,6 +58,7 @@ function RequestLine({ flow }: RequestLineProps) {
                         )
                     }
                     isValid={isValidHttpVersion}
+                    selectAllOnClick={true}
                 />
             </div>
         </div>
@@ -82,6 +84,7 @@ function ResponseLine({ flow }: ResponseLineProps) {
                     )
                 }
                 isValid={isValidHttpVersion}
+                selectAllOnClick={true}
             />
             &nbsp;
             <ValidateEditor
@@ -94,6 +97,7 @@ function ResponseLine({ flow }: ResponseLineProps) {
                     )
                 }
                 isValid={(code) => /^\d+$/.test(code)}
+                selectAllOnClick={true}
             />
             {flow.response.http_version !== "HTTP/2.0" && (
                 <>
@@ -105,6 +109,7 @@ function ResponseLine({ flow }: ResponseLineProps) {
                                 flowActions.update(flow, { response: { msg } }),
                             )
                         }
+                        selectAllOnClick={true}
                     />
                 </>
             )}

web/src/js/components/Modes/Reverse.tsx

@@ -115,7 +115,7 @@ function ReverseToggleRow({
                     <h4>Advanced Configuration</h4>
                     <p>Listen Host</p>
                     <ValueEditor
-                        className="mode-reverse-input"
+                        className="mode-input"
                         content={server.listen_host || ""}
                         onEditDone={(value) =>
                             dispatch(setListenHost({ server, value }))
@@ -124,7 +124,7 @@ function ReverseToggleRow({
                     />
                     <p>Listen Port</p>
                     <ValueEditor
-                        className="mode-reverse-input"
+                        className="mode-input"
                         content={String(server.listen_port || "")}
                         onEditDone={(value) =>
                             dispatch(

web/src/js/components/editors/KeyValueListEditor.tsx

@@ -36,6 +36,7 @@ class Row extends Component<RowProps> {
                     onEditDone={(newKey) =>
                         this.props.onEditDone([newKey, value])
                     }
+                    selectAllOnClick={true}
                 />
                 :&nbsp;
                 <ValueEditor
@@ -47,6 +48,7 @@ class Row extends Component<RowProps> {
                         this.props.onEditDone([key, newVal])
                     }
                     placeholder="empty"
+                    selectAllOnClick={true}
                 />
             </div>
         );

web/src/js/components/editors/ValueEditor.tsx

@@ -9,6 +9,7 @@ export interface ValueEditorProps {
     onInput?: (newVal: string) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
     placeholder?: string;
+    selectAllOnClick?: boolean;
 }
 
 /** "plaintext-only" for browsers which support it, "true" for everyone else */
@@ -69,11 +70,13 @@ export default class ValueEditor extends Component<ValueEditorProps> {
             this.input.current.focus();
             this.suppress_events = false;
 
-            const range = document.createRange();
-            range.selectNodeContents(this.input.current);
-            const sel = window.getSelection();
-            sel?.removeAllRanges();
-            sel?.addRange(range);
+            if (this.props.selectAllOnClick) {
+                const range = document.createRange();
+                range.selectNodeContents(this.input.current);
+                const sel = window.getSelection();
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+            }
 
             this.props.onEditStart?.();
         });
@@ -125,8 +128,14 @@ export default class ValueEditor extends Component<ValueEditorProps> {
                 has_not_selected_text,
             );
 
-        if (still_on_elem && has_not_selected_text) {
-            this.startEditing();
+        if (this.props.selectAllOnClick) {
+            if (still_on_elem && has_not_selected_text) {
+                this.startEditing();
+            }
+        } else {
+            if (still_on_elem) {
+                this.startEditing();
+            }
         }
         this.suppress_events = false;
     };