experiments in a post-browser web
can't remember if these changes actually work or not
+36
-118
+35
-117
lib/main.js
+35
-117
lib/main.js
···
1
-
/*
2
-
3
-
The new app tab feature in Firefox is great. I use it a lot... which has shown starkly how apps and tabs have completely different use-cases and usage patterns. Often I will check my Gmail app tab because I see the glowing notification that a new email has arrived, do something (or nothing), and then pop back to where I was browsing - in one of those 78 tabs I have open. Well, not "pop" really.
4
-
5
-
The windowing model in operating systems allows me to do this with ease. But app tabs do not:
6
-
7
-
* If I opened no new tabs while using Gmail, I can still see the last tab I was at, and click on it. But I'm force to use the mouse.
8
-
* Out of sheer muscle memory and mouse-averseness, sometimes I can traverse tabs via the next/previous-tab keyboard shortcuts to get back to where I was. Sometimes it's a *lot* of tabs, so either I'll hold the arrow key down, speeding past the tab I wanted, or I'll just hit that arrow key a bunch of times in quick succession. Both options are sub-optimal.
9
-
* Or I have to expend mental energy to search in the awesomebar and switch to that tab, which often looks like this: "hm, type 'bug' and then try to remember some words in the bug summary, but those words match a bunch of other bugs, and i don't know the bug number, and also I'm on an attachment page because I'm reviewing a patch on the bug, so the summary won't be in the page title..." and on and on.
10
-
* Then there's link opening. Links opened in app tabs are put at the beginning of the tab set, and the tab strip is animatedly scrolled there. Boom, already lost where I was before checking my email. We tried an experiment where they open at the end of the set of open tabs, but I found that to have serious "out of sight, out of mind" problems. That experiment was rolled back. Both approaches cause excess amounts of whizzing animations, either when you want to "go around the horn" to get to the tabs you just opened from app tabs, or when you want to go to them and then get back to where you were.
11
-
* And the biggest problem in my opinion: The user is not in control of where these links are opened. Part of me thinks that I actually might work best in a one-tab-group-per-app-tab world... but that's a vision for another day (and blog post and add-on!).
12
-
13
-
14
-
So I've tried to build a hybrid solution: Instead of making you go to your app tabs, your app tabs can come to you. Peek allows you to open your app tabs in a floating panel that opens on top of wherever you are in your tabs. Links open to the right of whatever your current active tab is, and in the background, so that when you're done peeking, you are exactly where you left off.
15
-
16
-
To use Peek, first create some app tabs. Then you can peek at them using the keyboard shortcut "ALT+SHIFT+1-9" where the number corresponds with the order your app tabs are in. To stop peeking, hit escape (or switch apps or anything else that takes focus away from the panel).
17
-
18
-
Features:
19
-
- be able to interact with your apps and go exactly back to where you left off browsing.
20
-
- links opened from app tabs are in context of... well, at least something! not at beginning or end of tabstrip, which gives you at least more control over where they end up.
21
-
22
-
*/
23
-
24
-
/*
25
-
TODO
26
-
- add a UI launcher somehow (drop button?)
27
-
- remove pinned tabs altogether!
28
-
*/
29
-
30
-
const {Cc, Ci, Cu, Cm} = require('chrome');
31
-
const { Hotkey } = require('hotkeys');
32
-
const { Panel } = require('panel-custom-frame');
33
-
const Data = require('self').data;
34
-
const Observers = require('observer-service');
35
-
const Prefs = require('preferences-service');
36
-
const Tabs = require('tabs');
37
-
const Timers = require('timer');
38
-
const Windows = require('windows').browserWindows;
39
-
const WinUtils = require("window-utils");
1
+
//const {Cc, Ci, Cu, Cm} = require('chrome')
2
+
const { Hotkey } = require('hotkeys')
3
+
const { Panel } = require('panel')
4
+
const Data = require('self').data
5
+
const Prefs = require('preferences-service')
6
+
const Tabs = require('tabs')
40
7
41
-
const TAB_PREF = 'browser.tabs.loadDivertedInBackground';
42
-
const COMBO = 'alt-shift-';
43
-
44
-
// 5 minutes
45
-
const INTERVAL = 1000 * 60 * 5;
8
+
const TAB_PREF = 'browser.tabs.loadDivertedInBackground'
9
+
const COMBO = 'alt-shift-'
46
10
47
11
let inited,
48
12
lastPrefVal,
49
-
cache = [],
50
13
windowHeight,
51
-
windowWidth;
14
+
windowWidth
52
15
53
-
function getPanel() {
16
+
let hotkey = Hotkey({
17
+
combo: 'accel-shift-o',
18
+
onPress: function() {
19
+
getPanel(Data.url('panel.html')).show()
20
+
}
21
+
})
22
+
23
+
function getPanel(url) {
54
24
let panel = Panel({
55
-
contentURL: 'about:blank',
25
+
contentURL: url || 'about:blank',
26
+
height: 600,
27
+
width: 800,
28
+
/*
56
29
height: getPanelDimension(windowHeight),
57
30
width: getPanelDimension(windowWidth),
31
+
*/
58
32
contentScriptFile: Data.url('panel.js'),
59
33
contentScriptWhen: 'ready',
60
34
onShow: function() {
61
-
lastPrefVal = Prefs.get(TAB_PREF);
62
-
if (!lastPrefVal)
63
-
Prefs.set(TAB_PREF, true);
35
+
lastPrefVal = Prefs.get(TAB_PREF)
36
+
if (lastPrefVal === false)
37
+
Prefs.set(TAB_PREF, true)
64
38
},
65
39
onHide: function() {
66
-
if (lastPrefVal != Prefs.get(TAB_PREF))
67
-
Prefs.set(TAB_PREF, lastPrefVal);
40
+
if (lastPrefVal !== undefined && lastPrefVal != Prefs.get(TAB_PREF))
41
+
Prefs.set(TAB_PREF, lastPrefVal)
42
+
panel.destroy()
68
43
}
69
-
});
44
+
})
70
45
return panel;
71
46
}
72
47
73
48
function getPanelDimension(amount) Math.round(amount * 0.9)
74
49
75
-
// Build and cache hotkey+panels for each app tab
76
-
function setup() {
77
-
// destroy existing hotkey+panel combos
78
-
cache.forEach(function(hotkey) {
79
-
hotkey.destroy();
80
-
});
81
-
cache = [];
82
-
83
-
for (var i = 0; i < 10; i++) {
84
-
var jetpackTab = Windows.activeWindow.tabs[i];
85
-
if (jetpackTab && jetpackTab.isPinned) {
86
-
let index = jetpackTab.index;
87
-
let hotkeyNum = index == 9 ? 0 : (index + 1);
88
-
let hotkey = Hotkey({
89
-
// WTF - setting this to typo'd 'hotkeynum' doesn't throw!
90
-
combo: (COMBO + hotkeyNum),
91
-
onPress: function() {
92
-
console.log('onPress(): index ', index);
93
-
let panel = getPanel();
94
-
//let oldFrame = panel.frame;
95
-
//console.log('onPress(): oldFrame ', frame);
96
-
let tabbrowser = WinUtils.activeBrowserWindow.gBrowser;
97
-
let frame = tabbrowser.getBrowserAtIndex(index);
98
-
console.log('onPress(): frame ', frame.currentURI.spec);
99
-
panel.frame = frame;
100
-
console.log('onPress(): new frame uri ', panel.frame.currentURI.spec);
101
-
// need to support switching while panel is open
102
-
panel.on('hide', function() {
103
-
panel.frame = null;
104
-
panel.destroy();
105
-
});
106
-
panel.show();
107
-
console.log('onPress(): done');
108
-
}
109
-
});
110
-
111
-
cache[i] = hotkey;
112
-
}
113
-
}
114
-
}
115
-
50
+
/*
116
51
// Window resize event handler
117
52
function onResize(msg) {
118
53
windowHeight = msg.height;
···
120
55
121
56
// Initializing on the first received resize event ensures
122
57
// that it occurs for both running and startup installs.
123
-
if (!inited) {
124
-
setup();
58
+
if (!inited)
125
59
inited = true;
126
-
}
127
60
}
128
61
129
62
// When a tab activates, attach our content script
···
140
73
});
141
74
}
142
75
76
+
// INITIALIZE
143
77
// Handle current tab activation manually in case we're installed
144
78
// in a running instance. This gets us initial window size which
145
79
// triggers initial filling of cache.
146
80
onTabActivate(Tabs.activeTab);
147
81
148
-
// Listen for tab switching
82
+
// Listen for tab switching so we always have a resize handler
83
+
// TODO: might be a window-level way of doing this nowadays
149
84
Tabs.on('activate', onTabActivate);
150
-
151
-
let delegate = {
152
-
onTrack: function (window) {
153
-
if (window.document.documentElement.getAttribute('windowtype') == 'navigator:browser') {
154
-
let container = window.gBrowser.tabContainer;
155
-
container.addEventListener("TabPinned", setup, false);
156
-
container.addEventListener("TabUnpinned", setup, false);
157
-
}
158
-
},
159
-
onUntrack: function (window) {
160
-
if (window.document.documentElement.getAttribute('windowtype') == 'navigator:browser') {
161
-
let container = window.gBrowser.tabContainer;
162
-
container.removeEventListener("TabPinned", setup, false);
163
-
container.removeEventListener("TabUnpinned", setup, false);
164
-
}
165
-
}
166
-
};
167
-
new WinUtils.WindowTracker(delegate);
85
+
*/