pramjeet / peek-a-tab Goto Github PK

I can already move up and down the list of tabs with the arrow keys. It would be great if I could press Del and/or Backspace to close the current tab.

Thanks (again) for the extension.

if url matches a pattern, then extract some content to include in tab name.

For instance, I use a ticket tracking system, but the tab only displays "HPSM Incident Detail"
for example the url is something like
https://mycompany.com/ITSM/Inc_Detail.aspx?ID=IM5086824

so the request is that either :

• example

if the url contains "Inc_Detail.aspx?ID=",
then the Peek a Tab dropdown tab list displays
"HPSM Incident Details for IM5086824"

Or

• example
  if the tab title = "Incident Detail"
  then the Peek a Tab dropdown tab list displays
  "HPSM Incident Detail for IM5086824"

I would love to see the option for users to customize the CSS, similar to the way QuickTabs implements it (which they did at my suggestion). For example, I used the Chrome Inspector to customize your CSS as shown in the screenshot. The code is below (your CSS is included; you'll need to do a diff to see what's changed).

Key differences:

• The text of the page titles is wrapped, and the height of the
• element is adjusted to display two lines of text.
• I made the tab borders a light gray color; yours are transparent, and I find borders helpful.
• I added a gradient and drop shadow to the tabs, just because I like 'em.
• I added a light green background-color to the tab hover state so it's very easy to see which tab you're hovering on.
• I changed the font to Lucida Sans because I find it a little "cleaner."
• I increased the font size slightly and added a line-height to the page titles.
• I increased the size of the favicons and gave them a larger top margin so they're roughly centered vertically.
• And probably a few other changes.

===============

html,
body {
margin: 0;
font-family: lucida sans-serif;
overflow: hidden;
height: 100%;
}

#app {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
}

#options-header {
position: fixed;
top: 0;
height: 35px;
width: 100%;
background: white;
/* border-top: 1px solid #efefef; */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
z-index: 2;
display: flex;
}

#search-div {
flex: 1;
height: 80%;
box-sizing: border-box;
display: block;
margin: 3px 8px;
position: relative;
float: left;
}

#search-icon {
width: 20px;
top: 3px;
left: 5px;
position: absolute;
}

#search-input {
outline: none;
font-size: 12px;
font-family: 'Rubik', sans-serif;
border: 1px solid #eee;
width: 100%;
height: 100%;
padding: 0 10px 0 30px;
box-sizing: border-box;
display: block;
border-radius: 2px;
}

::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-weight: 300;
color: #dadada;
}

#search-input:focus {
border-color: #1f00ff;
box-shadow: 0 0 2px #0010ff;
}

#options {
float: right;
padding: 3px;
}

.option {
position: relative;
width: 26px;
height: 26px;
margin-right: 10px;
cursor: pointer;
border: 1px solid #eee;
border-radius: 2px;
}

.option .option-icon {
width: 100%;
}

.option-body {
display: none;
position: absolute;
width: 250px;
right: 0;
top: 110%;
background: #fff;
color: #404040;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
text-align: left;
border: 1px solid #d0d0d0;
border-radius: 3px;
}

.option-body:before {
bottom: 100%;
right: 3px;
border: 8px solid transparent;
border-bottom-color: #fff;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 20;
}

.option-body:after {
bottom: 100%;
right: 2px;
border: 9px solid transparent;
border-bottom-color: #afafaf;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 10;
}

.option-choice {
border-bottom: 1px solid #efefef;
padding: 10px;
}

.option-choice-image {
width: 35px;
height: auto;
float: left;
margin-right: 5px;
}

.option-choice-text {
margin: 0 0 0 40px;
font-size: 14px;
}

.option-choice:hover .option-choice-text {
color: #175fb9;
}

.option-hint-text {
margin: 0;
text-align: left;
}

.option-hint-button {
margin: 10px 0 0;
border: none;
background: none;
color: #175fb9;
font-size: 12px;
text-transform: uppercase;
}

#notification {
position: absolute;
width: 250px;
min-height: 60px;
right: 20px;
top: 36px;
background: #3cbd4d;
color: #fff;
padding: 15px 20px 15px 15px;
text-align: left;
z-index: 3;
font-size: 14px;
transition: .1s;
opacity: 0;
transform: translateX(100%);
box-shadow: 0 0 2px rgba(0, 0, 0, .24);
overflow: hidden;
box-sizing: border-box;
}

#notification.visible {
opacity: 1;
transform: translateX(0);
}

#notification-text {
margin: 0;
}

#notification-close-bttn {
position: absolute;
top: 2px;
right: 2px;
height: 20px;
padding: 3px;
background-color: #e05454;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
}

#tabs-list {
position: absolute;
top: 35px;
bottom: 0;
width: 100%;
overflow-y: scroll;
list-style: none;
padding: 0;
margin: 0;
background: #fafafa;
}

.window-text {
position: relative;
margin: 10px;
font-weight: 700;
}

.no-result-text {
margin-top: 10px;
position: absolute;
color: #b3b3b3;
}

.tab {
position: relative;
border-radius: 3px;
height: 47px;
border: 1px solid #aaa;
color: rgb(117, 117, 117);
box-sizing: border-box;
cursor: pointer;
vertical-align: middle;
overflow: hidden;
padding: 6px 7px;
background: #ffffff;
margin: 1px;
/* border-bottom: 1px solid #aaa; */
aa; */
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
box-shadow: 2px 2px 5px #aaa;
}

.tab.visible {
display: block;
}

.tab:hover {
border-color: #b0dbfb;
background: #E6EE9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
color: #2e7fb9;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
}

.tab.active {
/border-color: #2e7fb9;/
background: rgba(46, 127, 185, 0.04);
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
color: #2e7fb9;
}

.icon {
width: 26px;
height: 26px;
float: left;
margin: 0 10px 0 0;
/* background: #e0e0e0; /
/ border: 2px solid #f3f3f3; /
border-radius: 3px;
overflow: visible;
padding: 0;
box-sizing: border-box;
/ vertical-align: middle; */
margin: 4px 10px 8px 0;
}

.title {
font-size: 13px;
margin: 0 0;
display: block;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
line-height: 18px;
}

.highlight {
background: #ffd64d;
color: white;
border-radius: 5px;
padding: 2px;
}

.close-icon {
position: absolute;
top: 6px;
right: 5px;
height: 20px;
padding: 3px;
background-color: #e05454;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
display: none;
}

.tab:hover .close-icon {
display: block;
}

.tab.active .close-icon {
display: block;
}

#announcement-container {
position: absolute;
width: 100%;
bottom: 0;
padding: 0;
background: #d3eae0;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
transform: translateY(100%);
transition: 0.3s;
}

#announcement_header {
height: 40px;
border-bottom: 1px solid #cacaca;
width: 100%;
display: flex;
align-items: center;
}

#announcement-title {
margin: 0;
flex: 1;
padding: 10px 10px 10px 15px;
}

#announcement-close-icon {
width: 15px;
background: #e05454;
border-radius: 50%;
margin-right: 10px;
padding: 2px;
cursor: pointer;
}

#announcement-body {
padding: 10px;
}

#announcement-list {
margin: 0;
padding-left: 20px;
}

#announcement-list li {
font-size: 13px;
margin-bottom: 6px;
color: #00733d;
}

#announcement-container.visible {
transform: translateY(0)

First of all, love your app!

Either the new Chrome update rendered your extension unable to open up for me, or it may be your new updated version of the extension. Either way, if I try to click or alt+space, the popup doesn't show up anymore.

I've used some time trying to debug the problem, and turns out, if I simply change the title of the popup window from Tabs you can peek at to something else, or even delete/add a character, it magically works?!

popup.js

popupWindow = window.open(
browser.extension.getURL("app.html"),
"Tabs you can peek at",
"alwaysOnTop=yes,width=" + width + ",height=" + (win.height - 10) + ",left=" + window.screenLeft + ",top=" + (window.screenTop - 70)
);

Would appreciate if this gets fixed asap as I want to use the original extension instead of having a temp fix of my own which won't get updated. Or maybe I'm the only one with the problem?

I often don't use my browser full screen. I would not mind having the peek a tab menu open at all times.

Thanks for this great extension!

It would be nice if we could open the first tab on the list by just pressing Enter, without having to first press ↓ to select it. What do you think?

It would be nice to also search recently closed tabs - maybe below the search results grayed out a bit?

I want to active the plugin by Command + E ,how can I make it ? thanks .

Not sure if it's because of a new Chrome version, but the app is unusable now. When you use Alt-space the Peek-a-tab window opens and closes immediately.

Love the extension! Would it be possible to reorganize the tabs from within the peek-a-tab window? Like drag a tab into another window or drag tab to create a new window?

Just noticed in the latest Chrome update that they've added a new feature that's very similar to this extension:

I'm still going to use this extension as it's larger in height, highlights search keywords, and separates by windows :) But the Chrome version is a bit faster to open so it might be useful in some cases ^^

If a website title contains HTML code in its title, that code will get executed (as shown in the image below). I'm just opening this issue to not forget about it -- no rush :)

Hello, i'm wondering what licence the code is distributed with?

It would be wonderful if I could select multiple tabs with Shift/Ctrl-click, and close them or move them to a new window all at once.

P.S. Thank you very much for the extension, I really like how simple and effective it is.