-
Notifications
You must be signed in to change notification settings - Fork 2
/
popup.html
183 lines (159 loc) · 8.28 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!--
Filename: popup.html
Purpose: Main HTML structure for the Tab Manager Chrome extension popup. This file defines the layout
and UI for tab management features such as Open Tabs, Auto Group, and Options. The Sessions tab is
currently commented out as it is under development.
Sections:
- Metadata: Provides character encoding, responsive settings, and description for accessibility and SEO.
- Navigation: Includes navigation tabs (Open Tabs, Auto Group, Options) to access different
sections of the extension.
- Popup Content: Contains content for each tab, with specific elements for managing tab groups
(Auto Group) and extension options (Options).
Dependencies:
- CSS: Links to popup.css for styling.
- JavaScript: Scripts for handling logic specific to each section (openTabs.js, autoGroup.js, etc.).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Popup Metadata -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A tool to manage and organize your tabs efficiently.">
<!-- Popup Title -->
<title>Tab Manager</title>
<!-- Popup CSS -->
<link rel="stylesheet" href="popup.css">
</head>
<body>
<!-- Heading -->
<h1><img src="./icons/icon32.png" /> Tab Manager</h1>
<!-- Popup Navigation -->
<div class="popup-nav">
<div class="nav-tab nav-tab--active" id="openTabsBtn">Open Tabs</div>
<div class="nav-tab" id="autoGroupBtn">Auto Group</div>
<!-- <div class="nav-tab" id="sessionsBtn">Sessions</div> -->
<div class="nav-tab" id="optionsBtn">Options</div>
</div>
<!-- Popup Content -->
<div class="popup-content-container">
<div id="openTabsContent" class="popup-content popup-content--active">
<p>Open Tabs will be here.</p>
</div>
<!-- Auto Grouping Section -->
<div id="autoGroupContent" class="popup-content">
<!-- Auto Grouping Checkbox -->
<div class="checkboxWrapper">
<input type="checkbox" id="activateAutoGroupingCheckbox">
<label for="activateAutoGroupingCheckbox">Enable Auto Grouping</label>
</div>
<!-- Form Container (disabled by default until auto-grouping is enabled) -->
<div id="formContainer" class="disabled">
<!-- Group Name Input -->
<label for="groupName">Group Name:</label>
<input type="text" id="groupName">
<!-- Group Color Picker -->
<label for="colorPicker">Group Color:</label>
<div id="colorPicker" style="display: flex;">
<!-- Dynamically generated color circles based on allowed colors -->
<div class="color-circle selected" data-color="grey" style="background-color: grey;"></div>
<div class="color-circle" data-color="blue" style="background-color: blue;"></div>
<div class="color-circle" data-color="red" style="background-color: red;"></div>
<div class="color-circle" data-color="yellow" style="background-color: yellow;"></div>
<div class="color-circle" data-color="green" style="background-color: green;"></div>
<div class="color-circle" data-color="pink" style="background-color: pink;"></div>
<div class="color-circle" data-color="purple" style="background-color: purple;"></div>
<div class="color-circle" data-color="cyan" style="background-color: cyan;"></div>
<div class="color-circle" data-color="orange" style="background-color: orange;"></div>
</div>
<!-- Pattern Input and List -->
<label for="groupPattern">Pattern:</label>
<input type="text" id="groupPattern">
<div class="buttonWrapper">
<div class="btns-container suggestions">
<p>Suggestions:</p>
<button id="getDomainBtn">This Domain</button>
<button id="getSubdomainBtn">This Domain and Subdomain</button>
<button id="getExactUrlBtn">Get Exact URL</button>
</div>
</div>
<ul id="patternList"></ul>
<!-- Button Wrapper -->
<div class="buttonWrapper">
<div class="btns-container">
<button id="addPatternBtn" class="green-button">Add Pattern</button>
<button id="saveGroupBtn" class="green-button">Save Group</button>
<button id="clearFormBtn" class="clear-btn">Clear</button>
</div>
</div>
<!-- Saved Groups Section -->
<h3>Saved Groups</h3>
<ul id="savedGroupsList"></ul>
</div>
</div>
<!-- <div id="sessionsContent" class="popup-content">
<p>Session Management will be here.</p>
</div> -->
<div id="optionsContent" class="popup-content">
<div id="autoCloseOption" class="option-container">
<label class="checkwrap">
<input type="checkbox" id="autoCloseCheckbox">
Auto Close Tabs
</label>
<div class="option-description">
<p>Automatically close tabs after a specified time if they haven't been visited.</p>
</div>
<div class="time-settings" style="display: none;">
<label for="autoCloseMinutes">Minutes:</label>
<input type="number" id="autoCloseMinutes" min="0" value="120">
<label for="autoCloseSeconds">Seconds:</label>
<input type="number" id="autoCloseSeconds" min="0" value="0">
<button id="editTimeBtn" class="green-button">Edit Time</button>
<button id="submitTimeBtn" style="display: none;" class="green-button">Submit</button>
</div>
</div>
<div id="autoSleepOption" class="option-container">
<label class="checkwrap">
<input type="checkbox" id="autoSleepCheckbox">
Auto Sleep Tabs
</label>
<div class="option-description">
<p>Automatically sleep inactive tabs after a specified time.</p>
</div>
<div class="time-settings" style="display: none;">
<label for="autoSleepMinutes">Minutes:</label>
<input type="number" id="autoSleepMinutes" min="0" value="120">
<label for="autoSleepSeconds">Seconds:</label>
<input type="number" id="autoSleepSeconds" min="0" value="0">
<button id="editSleepTimeBtn" class="green-button">Edit Time</button>
<button id="submitSleepTimeBtn" style="display: none;" class="green-button">Submit</button>
</div>
</div>
<div id="lazyLoadingOption" class="option-container">
<label class="checkwrap">
<input type="checkbox" id="lazyLoadingCheckbox">
Lazy Load Tabs
</label>
<div class="option-description">
<p>Load tabs only when accessed, reducing initial load time.</p>
</div>
</div>
<div id="allowManualGroupAccessOption" class="option-container">
<label class="checkwrap">
<input type="checkbox" id="allowManualGroupAccessCheckbox">
Allow Auto Grouping to Access Manual Groups
</label>
<div class="option-description">
<p>If checked, auto grouping can access manually created groups but not pinned tabs or groups.</p>
</div>
</div>
</div>
</div>
<!-- Popup Script -->
<script src="popup.js" defer></script>
<script src="openTabs.js" defer></script>
<script src="autoGroup.js" defer></script>
<script src="sessions.js" defer></script>
<script src="options.js" defer></script>
</body>
</html>