Changing the time a little manually opens a popup

public/content.css

@@ -554,4 +554,15 @@ input::-webkit-inner-spin-button {
     border-width: 15px;
     border-style: solid;
     border-color: rgba(28, 28, 28, 0.7) transparent transparent transparent;
+}
+
+.sponsorBlockRectangleTooltip {
+    position: absolute;
+    background-color: rgba(28, 28, 28, 0.7);
+    border-radius: 5px;
+    padding: 10px;
+	min-width: 250px;
+	min-height: 75px;
+    white-space: normal;
+    line-height: 1.5em;
 }

src/components/SponsorTimeEditComponent.tsx

@@ -5,6 +5,7 @@ import { ActionType, ActionTypes, Category, CategoryActionType, ContentContainer
 import Utils from "../utils";
 import { getCategoryActionType } from "../utils/categoryUtils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
+import { RectangleTooltip } from "../render/RectangleTooltip";
 
 
 const utils = new Utils();
@@ -110,14 +111,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             ref={oldYouTubeDarkStyles}
                             type="text"
                             value={this.state.sponsorTimeEdits[0]}
-                            onChange={(e) => {
-                                const sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                sponsorTimeEdits[0] = e.target.value;
-                                if (getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = e.target.value;
-
-                                this.setState({sponsorTimeEdits});
-                                this.saveEditTimes();
-                            }}
+                            onChange={(e) => {this.handleOnChange(0, e, sponsorTime, e.target.value)}}
                             onWheel={(e) => {this.changeTimesWhenScrolling(0, e, sponsorTime)}}>
                         </input>
 
@@ -132,14 +126,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                     ref={oldYouTubeDarkStyles}
                                     type="text"
                                     value={this.state.sponsorTimeEdits[1]}
-                                    onChange={(e) => {
-                                        const sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                        sponsorTimeEdits[1] = e.target.value;
-
-                                        this.setState({sponsorTimeEdits});
-
-                                        this.saveEditTimes();
-                                    }}
+                                    onChange={(e) => {this.handleOnChange(1, e, sponsorTime, e.target.value)}}
                                     onWheel={(e) => {this.changeTimesWhenScrolling(1, e, sponsorTime)}}>
                                 </input>
 
@@ -247,6 +234,21 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         );
     }
 
+    handleOnChange(index: number, e: React.ChangeEvent, sponsorTime: SponsorTime, targetValue: string): void {
+        const sponsorTimeEdits = this.state.sponsorTimeEdits;
+        
+        // check if change is small engough to show tooltip
+        const before = utils.getFormattedTimeToSeconds(sponsorTimeEdits[index]);
+        const after = utils.getFormattedTimeToSeconds(targetValue);
+        const difference = Math.abs(before - after);
+        if (0 < difference && difference< 0.5) this.showToolTip();
+
+        sponsorTimeEdits[index] = targetValue;
+        if (index === 0 && getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = targetValue;
+
+        this.setState({sponsorTimeEdits});
+        this.saveEditTimes();
+    }
     changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
         let step = 0;
         // shift + ctrl = 1
@@ -272,6 +274,22 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
     }
 
+    showToolTip(): void {
+        if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
+            const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
+            new RectangleTooltip({
+                text: "Use your mousewheel while hovering over the edit box to quickly adjust the time. Combinations of the ctrl or shift key can be used to fine tune the changes.",
+                referenceNode: element.parentElement,
+                prependElement: element,
+                timeout: 15,
+                bottomOffset: 75 + "px",
+                leftOffset: -318 + "px",
+                htmlId: "sponsorTimesContainer" + this.idSuffix,
+                buttonFunction: () => {Config.config.scrollToEditTimeUpdate = true}
+            });
+        }
+    }
+
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
             <option value={DEFAULT_CATEGORY}

src/config.ts

@@ -43,7 +43,8 @@ interface SBConfig {
     showDonationLink: boolean,
     autoHideInfoButton: boolean,
     autoSkipOnMusicVideos: boolean,
-    highlightCategoryUpdate: boolean
+    highlightCategoryUpdate: boolean,
+    scrollToEditTimeUpdate: boolean
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
@@ -191,6 +192,7 @@ const Config: SBObject = {
         autoHideInfoButton: true,
         autoSkipOnMusicVideos: false,
         highlightCategoryUpdate: false, // TODO: Remove this once update is done
+        scrollToEditTimeUpdate: false, // false means the tooltip will be shown
 
         categorySelections: [{
             name: "sponsor" as Category,

src/render/RectangleTooltip.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export interface RectangleTooltipProps {
+    text: string, 
+    link?: string,
+    referenceNode: HTMLElement,
+    prependElement?: HTMLElement, // Element to append before
+    bottomOffset?: string,
+    leftOffset?: string,
+    timeout?: number,
+    htmlId?: string,
+    maxHeight?: string,
+    maxWidth?: string,
+    buttonFunction?: () => void;
+}
+
+export class RectangleTooltip {
+    text: string;   
+    container: HTMLDivElement;
+
+    timer: NodeJS.Timeout;
+    
+    constructor(props: RectangleTooltipProps) {
+        props.bottomOffset ??= "0px";
+        props.leftOffset ??= "0px";
+        props.maxHeight ??= "100px";
+        props.maxWidth ??= "300px";
+        this.text = props.text;
+        props.buttonFunction ??= () => {};
+
+        this.container = document.createElement('div');
+        props.htmlId ??= props.text;
+        this.container.id = "sponsorRectangleTooltip" + props.htmlId;
+        this.container.style.display = "relative";
+
+        if (props.prependElement) {
+            props.referenceNode.insertBefore(this.container, props.prependElement);
+        } else {
+            props.referenceNode.appendChild(this.container);
+        }
+
+        if (props.timeout) {
+            this.timer = setTimeout(() => this.close(), props.timeout * 1000);
+        }
+
+        ReactDOM.render(
+            <div style={{
+                bottom: props.bottomOffset, 
+                left: props.leftOffset,
+                maxHeight: props.maxHeight,
+                maxWidth: props.maxWidth}} 
+                    className="sponsorBlockRectangleTooltip" >
+                    <div>
+                        <img className="sponsorSkipLogo sponsorSkipObject"
+                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        </img>
+                        <span className="sponsorSkipObject">
+                            {this.text + (props.link ? ". " : "")}
+                            {props.link ? 
+                                <a style={{textDecoration: "underline"}} 
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        href={props.link}>
+                                    {chrome.i18n.getMessage("LearnMore")}
+                                    </a> 
+                            : null}
+                        </span>
+                    </div>
+                    <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                        style ={{float: "right" }}
+                        onClick={() => {
+                            props.buttonFunction();
+                            this.close();
+                        }}>
+
+                        {chrome.i18n.getMessage("GotIt")}
+                    </button>
+            </div>,
+            this.container
+        )
+    }
+
+    close(): void {
+        ReactDOM.unmountComponentAtNode(this.container);
+        this.container.remove();
+
+        if (this.timer) clearTimeout(this.timer);
+    }
+}