diff --git a/web/dev/1/scripts/Select.css b/web/dev/1/scripts/Select.css index e834e31..ee24a2b 100644 --- a/web/dev/1/scripts/Select.css +++ b/web/dev/1/scripts/Select.css @@ -5,18 +5,20 @@ .Select { position:relative; display: inline-block; - overflow: hidden; padding-right: 15px; z-index: 100; - border: 1px solid #A6AFB6; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset; + border: 1px solid #303030; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); height: 24px; cursor: pointer; - background-color: white; + color: #e2e2e2; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #767676), color-stop(100%, #545454)); + background-image: -moz-linear-gradient(center top , #767676 0%, #545454 100%); + text-align: left; + border-radius: 4px; } .Select.open { - overflow: visible; padding-right: 0; border: 0; } @@ -24,11 +26,13 @@ .Select ul { list-style: none; z-index: 100; - background-color: white; } .Select.open ul { position: absolute; + top: -30px; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #767676), color-stop(100%, #545454)); + background-image: -moz-linear-gradient(center top , #767676 0%, #545454 100%); border: 1px solid gray; } @@ -59,7 +63,7 @@ .Select.open li.selected:hover, .Select.open li:hover { color:white; - background-color: #535F6D; + background-color: #2b2b2b; } .Select .triangle { @@ -71,8 +75,6 @@ line-height: 24px; padding: 0 2px; z-index: 101; - color: #A6AFB6; - background-color: white; background-image: url("/share/i/sprite.png"); background-position: center -362px; background-repeat: no-repeat; diff --git a/web/dev/1/scripts/fakeStorage.js b/web/dev/1/scripts/fakeStorage.js new file mode 100644 index 0000000..36e1b2d --- /dev/null +++ b/web/dev/1/scripts/fakeStorage.js @@ -0,0 +1,133 @@ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Raindrop. + * + * The Initial Developer of the Original Code is + * Mozilla Messaging, Inc.. + * Portions created by the Initial Developer are Copyright (C) 2009 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * */ + +/*jslint indent: 2 */ +/*global define: false, localStorage: false, location: false, console: false, + window: false */ +"use strict"; + +/** + * This module sets up a localStorage storage provider, to allow dev/testing + * the UI without needing the chrome storage. It is only loaded if the + * page that includes it explicitly loads it, currently done by setting + * the URL fragment ID to #test. + */ + +define(['dispatch'], function (dispatch) { + + var sub = dispatch.sub, + dataStore = (localStorage.chromeTestStore && + JSON.parse(localStorage.chromeTestStore)) || {}, + origin = location.protocol + "//" + location.host, + subs; + + // Helpers that deal with the target window subscriptions. + function targetPub(topic, data) { + dispatch.pub(topic, data); + } + + function saveStore() { + localStorage.chromeTestStore = JSON.stringify(dataStore); + } + + subs = { + panelReady: function () { + targetPub('shareState', { + status: 0, + open: true, + options: { + version: '0.7.2', + title: 'Firefox web browser', + description: 'All about firefox', + medium: null, + source: null, + url: 'http://www.mozilla.com/en-US/firefox/fx/', + canonicalUrl: null, + shortUrl: null, + previews: [{ + http_url: 'http://mozcom-cdn.mozilla.net/img/firefox-100.jpg' + }], + siteName: '', + prefs: { + system: 'dev', + bookmarking: true, + use_accel_key: true + } + } + }); + }, + + storeGet: function (key) { + var value = dataStore[key]; + //JSON wants null. + if (value === undefined) { + value = null; + } + targetPub('storeGetReturn', { + key: key, + value: value + }); + }, + + storeSet: function (data) { + dataStore[data.key] = data.value; + saveStore(); + targetPub('storeNotifyChange', { + key: data.key, + value: data.value + }); + }, + + storeRemove: function (key) { + delete dataStore[key]; + saveStore(); + targetPub('storeNotifyChange', { + key: key, + value: null + }); + } + }; + + // register all events. + window.addEventListener('message', function (evt) { + if (evt.origin === origin) { + var message; + try { + message = JSON.parse(evt.data); + } catch (e) { + console.error('Could not JSON parse: ' + evt.data); + } + + if (message && message.topic) { + if (subs[message.topic]) { + subs[message.topic](message.data); + } else { + // actually quite a few of these, uncomment if you want a play + // by play of topics going through the window. + //console.log("Unhandled topic: " + message.topic, message.data); + } + } + } + }, false); + +}); diff --git a/web/dev/1/scripts/services.js b/web/dev/1/scripts/services.js index 5e6467e..39a5e54 100644 --- a/web/dev/1/scripts/services.js +++ b/web/dev/1/scripts/services.js @@ -105,10 +105,10 @@ function (object) { }, shareTypes: [{ type: 'public', - name: 'public' + name: 'Public timeline' }, { type: 'direct', - name: 'direct message', + name: 'Direct Message', showTo: true, toLabel: 'type in name of recipient' }], @@ -173,7 +173,7 @@ function (object) { name: 'pape_max_auth_age', value: 0 } - }), + }) /*, Commenting out google apps, yahoo and linked in for now 'googleapps.com': new EmailSvcBase('Google Apps', { shareTypes: [{ type: 'direct', @@ -238,7 +238,7 @@ function (object) { 'widgets/AccountPanel': 'widgets/AccountPanelLinkedIn', 'Contacts': 'ContactsLinkedIn' } - }) + }) */ }, domainList: [], diff --git a/web/dev/1/scripts/shareOptions.js b/web/dev/1/scripts/shareOptions.js index f6ec2e0..889865a 100644 --- a/web/dev/1/scripts/shareOptions.js +++ b/web/dev/1/scripts/shareOptions.js @@ -51,16 +51,10 @@ define(['blade/url'], function (url) { } } - options.prefs = options.prefs || {}; - if (!options.title) { options.title = options.url; } - if (!options.prefs.system) { - options.prefs.system = 'prod'; - } - source = options.source; //If the source is larger than ~4KB then it will exceed the GET size diff --git a/web/dev/1/scripts/storage.js b/web/dev/1/scripts/storage.js index 3d801db..9fbc2f8 100644 --- a/web/dev/1/scripts/storage.js +++ b/web/dev/1/scripts/storage.js @@ -30,13 +30,6 @@ define(['dispatch'], function (dispatch) { callbacks = {}, store; - // Temporary workaround to allow separate tab of settings to still have - // access to the chrome storage. Not a good idea to do long term. - if (opener && !opener.closed && opener.require && - (store = opener.require('storage'))) { - return store; - } - store = { get: function (key, callback) { var keyCallbacks; diff --git a/web/dev/1/settings/index.html b/web/dev/1/settings/index.html index 0e25102..8dbccad 100644 --- a/web/dev/1/settings/index.html +++ b/web/dev/1/settings/index.html @@ -1,7 +1,7 @@ - Mozilla F1: Configuration + Share: Configuration @@ -9,168 +9,58 @@ - - + + + -Feedback - -
- - +
+ + +
- - - -
- -
-

My accounts

- - -

Add accounts

- -
- - - - -
- -
-
- +
+
- - -
-
- -
- We care about your privacy, seriously. -
-
-
- -
- - + - + - + diff --git a/web/dev/1/settings/index.js b/web/dev/1/settings/index.js index 2724e85..273606d 100644 --- a/web/dev/1/settings/index.js +++ b/web/dev/1/settings/index.js @@ -27,15 +27,13 @@ "use strict"; define([ "require", "jquery", "blade/fn", "rdapi", "oauth", "blade/jig", - "dispatch", "storage", "accounts", "dotCompare", "blade/url", - "services", "placeholder", "jquery.colorFade", "jquery.textOverflow"], + "dispatch", "storage", "accounts", "blade/url", + "services", "placeholder", "jquery.textOverflow"], function (require, $, fn, rdapi, oauth, jig, - dispatch, storage, accounts, dotCompare, url, + dispatch, storage, accounts, url, services, placeholder) { var store = storage(), - options = url.queryToObject(location.href.split('#')[1] || '') || {}, - existingAccounts = {}, - showNew = options.show === 'new'; + existingAccounts = {}; jig.addFn({ domainType: function (account) { @@ -103,172 +101,31 @@ function (require, $, fn, rdapi, oauth, jig, .append(html) .removeClass('hidden'); } - - //Flash the new items. - if (showNew) { - $(function () { - $("li.newItem").animate({ backgroundColor: '#ffff99' }, 200) - .delay(1000).animate({ backgroundColor: '#fafafa' }, 3000); - }); - } }); } ); $(function () { - //If new items should be shown, refresh the location bar, - //so further reloads of the page do not trigger showNew - if (showNew) { - delete options.show; - location.replace(location.href.split('#')[0] + '#' + url.objectToQuery(options)); - } - - var shortenDom = $('#shortenForm'), - bitlyCheckboxDom = $('#bitlyCheckbox'), - node; - - - //Function placed inside this function to get access to DOM variables. - function getShortenData() { - var data = {}; - - // Clear any error messages from the form. - shortenDom.find('.error').addClass('hidden'); - - $.each(shortenDom[0].elements, function (i, node) { - var trimmed = $(node).val().trim(); - - if (node.getAttribute("placeholder") === trimmed) { - trimmed = ""; - } - - node.value = trimmed; - - if (node.value) { - data[node.name] = node.value; - } - }); - - // Check for error conditions. Must have both API key and login to work. - if (data.login && data.apiKey) { - return data; - } else { - if (data.login && !data.apiKey) { - $('#bitlyApiKeyMissing').removeClass('hidden'); - } else if (data.apiKey && !data.login) { - $('#bitlyLoginMissing').removeClass('hidden'); - } - } - - return null; - } - - function clearShortenData() { - shortenDom.find('[name="login"]').val(''); - shortenDom.find('[name="apiKey"]').val(''); - shortenDom.find('[name="domain"]').val(''); - } - - //Function placed inside this function to get access to DOM variables. - function setShortenData(data) { - $.each(shortenDom[0].elements, function (i, node) { - var value = data[node.getAttribute('name')]; - if (value) { - $(node).val(value); - } - }); - - placeholder(shortenDom[0]); - } - - function showShortenForm() { - bitlyCheckboxDom[0].checked = true; - shortenDom.slideDown('100'); - } - - function hideShortenForm() { - bitlyCheckboxDom[0].checked = false; - shortenDom.slideUp('100', function () { - shortenDom.css({display: 'none'}); - }); - } - - function resetShortenData() { - clearShortenData(); - store.remove('shortenPrefs'); - hideShortenForm(); - } - - // resize wrapper - $(window).bind("load resize", function () { - var h = $(window).height(); - $("#wrapper").css({ "min-height" : (h) }); - }); + $('body') + //Handle button click for services in the settings. + .delegate('#addForm', 'submit', function (evt) { + evt.preventDefault(); - store.get('shortenPrefs', function (shortenPrefs) { - if (shortenPrefs) { - shortenPrefs = JSON.parse(shortenPrefs); - setShortenData(shortenPrefs); - showShortenForm(); - } else { - hideShortenForm(); - } - }); + var node = evt.target, + domain = $('#available').val(), + selectionName; - $('body') - .delegate('#bitlyCheckbox', 'click', function (evt) { - if (bitlyCheckboxDom[0].checked) { - showShortenForm(); - } else { - resetShortenData(); + // If the default option selected which has no domain value is + // used, just return without doing anything. + if (!domain) { + return; } - }) - .delegate('#shortenForm', 'submit', function (evt) { - var data = getShortenData(); - if (data) { - // Confirm that the API key + login name is valid. - $.ajax({ - url: 'http://api.bitly.com/v3/validate', - type: 'GET', - data: { - format: 'json', - login: data.login, - x_login: data.login, - x_apiKey: data.apiKey, - apiKey: data.apiKey - }, - dataType: 'json', - success: function (json) { - if (json.status_code === 200 && json.data.valid) { - store.set('shortenPrefs', JSON.stringify(data)); - } else { - $('#bitlyNotValid').removeClass('hidden'); - store.remove('shortenPrefs'); - } - }, - error: function (xhr, textStatus, errorThrown) { - $('#bitlyNotValid').removeClass('hidden'); - store.remove('shortenPrefs'); - } - }); - } else { - resetShortenData(); - } - evt.preventDefault(); - }) - //Wire up the close button - .delegate('.close', 'click', function (evt) { - window.close(); - }) - //Handle button click for services in the settings. - .delegate('.auth', 'click', function (evt) { - var node = evt.target, - domain = node.getAttribute('data-domain'), - selectionName = services.domains[domain].type; + selectionName = services.domains[domain].type; clearStatus(); + oauth(domain, existingAccounts[domain], function (success) { if (success) { //Make sure to bring the user back to this service if @@ -300,69 +157,5 @@ function (require, $, fn, rdapi, oauth, jig, $(function () { $(".overflow").textOverflow(null, true); }); - - // tabs - // Only show settings if extension can actually handle setting of them. - // Same for advanced. - $('li[data-tab="settings"]').removeClass('hidden'); - $('li[data-tab="advanced"]').removeClass('hidden'); - - $('body') - // Set up tab switching behavior. - .delegate("ul#tabs li", 'click', function (evt) { - var target = $(this), - tabDom = $('#' + target.attr('data-tab')); - - // clear any status that was visible. - clearStatus(); - - // Show tab selected. - target.addClass("selected"); - target.siblings().removeClass("selected"); - - // Show tab contents. - if (tabDom.is(':hidden')) { - tabDom.fadeIn(200); - tabDom.siblings().fadeOut(0); - } - }); - - //Callback handler for JSONP feed response from Google. - window.onFeedLoad = function (x, data) { - var title, link, i, entry; - if (data && data.feed && data.feed.entries) { - for (i = 0; (entry = data.feed.entries[i]); i++) { - if (entry.categories && entry.categories.indexOf('Sharing') !== -1) { - link = entry.link; - title = entry.title; - break; - } - } - } - - if (link) { - $('#newsFooter .headline').removeClass('invisible'); - $('#rssLink').attr('href', link).text(title); - } - }; - - //Fetch the feed. This is low priority, so done at the bottom. - node = document.createElement("script"); - node.charset = "utf-8"; - node.async = true; - node.src = 'https://www.google.com/uds/Gfeeds?v=1.0&callback=onFeedLoad&context=' + - '&output=json&' + - 'q=http%3A%2F%2Fmozillalabs.com%2Fmessaging%2Ffeed%2F'; - $('head')[0].appendChild(node); - - // Make sure this window gets all events, particularly related to storage. - // This can go away if the settings work is done inside the share panel. - // Use a setTimeout because the opener could be reloading, for instance, - // after an account is added. - if (opener && !opener.closed && opener.require) { - setTimeout(function () { - opener.require('dispatch').trackWindow(window); - }, 1000); - } }); }); diff --git a/web/dev/1/settings/style.css b/web/dev/1/settings/style.css index ee3d62e..c297c1e 100644 --- a/web/dev/1/settings/style.css +++ b/web/dev/1/settings/style.css @@ -30,6 +30,7 @@ } body { + margin: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; @@ -38,7 +39,6 @@ body { } .hidden, -#tabs li.hidden, .hbox > *.hidden { display: none; } @@ -125,174 +125,6 @@ a:hover { .error { color: #FF0000; } -/* From the uservoice feedback button */ -#feedback { - position: fixed; - top: 40%; - left: 0; - width: 25px; - height: 98px; - padding: 0; - margin: -45px 0 0; - text-indent: -1000px; - background-image: url("https://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png"); - background-position: 2px 50%; - background-color: red; - border-color: #FF0000 #FF0000 #FF0000 -moz-use-text-color; - border-style: outset outset outset none; - border-width: 1px 1px 1px medium; - z-index: 500; -} -#feedback:hover { - text-decoration: none; - background-color: #0066CC; - border-color: #0066CC #0066CC #0066CC -moz-use-text-color; -} - -strong { - font-weight: bold; -} - -#wrapper { - width: 720px; - margin: 0 auto; - overflow: hidden; - position: relative; -} - -#shortenForm label.text { - line-height: 24px; -} - -#shortenForm input { - width: 220px; - height: 24px; - border-color: #aaa; - border-style: solid; - border-width: 1px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 12px; - padding: 2px 5px; -} - -#shortenForm select { - width: 220px; -} - -/* - grid -*/ - -.c1, .c2, .c3 { - display: inline-block; - float: left; - min-height: 1%; - margin: 0 10px; - position: relative; -} - -.c1 { - width: 220px; -} - -.c2 { - width: 460px; -} - -.c3 { - width: 700px; -} - -.row { - float: left; - margin: 10px 0; -} - -.row.about { - margin: 20px 0; -} - -h1 { - font-size: 18px; - font-weight: normal; - color: #00A0FF; -} - -span.micro { - font-size: 12px; - margin: 5px 0 10px 0; - display: block; - color: #666; -} - -a.micro { - margin: 0 10px; -} - -/* - header -*/ - -#header.row { - margin: 36px 0; -} - -#header.row .c3, -#header.row .c2, -#header.row .c1 { - height: 90px; - line-height: 90px; - text-align: right; -} - -#header.row .logo { - background-image: url("i/f1Logo.png"); - background-repeat: no-repeat; - background-position: 0 -9px; -} - -/* - tabs -*/ - -ul#tabs { - display: block; - margin: 10px 10px 0 10px; -} - -ul#tabs li { - display: inline-block; - padding: 7px 20px; - border-width: 1px 1px 0 1px; - border-color: #ccc; - border-style: solid; - float: left; - margin: 0 5px; - background-color: #fff; - cursor: pointer; - -moz-border-radius: 3px 3px 0 0; - -webkit-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; -} - -ul#tabs li.selected { - background-color: #fafafa; - position: relative; - z-index: 2; -} - -/* - config -*/ - -#config { - border-top: 1px solid #ccc; - margin: -1px 10px 0 10px; - position: relative; - z-index: 1; - background-image: -moz-linear-gradient(top, #fafafa 0%, #fff 20px); -} .icon { width: 16px; @@ -329,90 +161,19 @@ ul#tabs li.selected { background-position: center; } -.icon.rss { - background-position: center -271px; - margin: 0; -} - -#done { - padding: 0 10px; -} - -.panel { - width: 100%; - margin: 20px 0; -} - -#config .about { - color: #444; - text-align: center; -} - -#config .username { +.username { color: #aaa; } -#config .new { - color: #ff5959; - font-style: italic; -} - -#config ul { - margin: 10px 0 20px; - border: 1px solid #ccc; - background-color: #fafafa; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; -} - -#config ul li { - width: 100%; - padding: 10px 20px; - border-bottom: 1px solid #ccc; -} - -#config ul li .accountType { - line-height: 24px; -} - -.accountType .multipleSignOut { - float: right; - margin-right: 10px; - color: #AAAAAA; -} - -#config ul li:last-child { - border-bottom: none; - -moz-border-radius: 0 0 5px 5px; - -webkit-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; -} - -#settings .key { - margin-right: 10px; - padding: 0 3px 0 5px; - -moz-border-radius: 4px; - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(0, 0, 0, 0.3); - background: -moz-linear-gradient(#f8f8f8, #dddee0) repeat scroll 0 0 #ecedef; - color: #434343; - font-weight: bold; - text-align: center; - text-shadow: 0 1px 1px white; - -moz-user-select: none; -} - -#newsFooter { - padding: 0 10px; - margin: 10px 0; - position: absolute; - bottom: 0; - width: 720px; +#addForm { + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #AAAAAA; + text-align: right; } -#newsFooter .privacy { - margin: 0 0 0 10px; - color: #444; +#manage li { + margin-bottom: 10px; } /* diff --git a/web/dev/1/share/panel/index.html b/web/dev/1/share/panel/index.html index 801aeb3..bbba330 100644 --- a/web/dev/1/share/panel/index.html +++ b/web/dev/1/share/panel/index.html @@ -1,37 +1,41 @@ - F1: Popup + Share - + + -