spec/fixtures/twitterstatus.response in onebox-1.5.25 vs spec/fixtures/twitterstatus.response in onebox-1.5.26

- old
+ new

@@ -1,134 +1,182 @@ <!DOCTYPE html> -<!--[if IE 8]><html class="lt-ie10 ie8" lang="en"><![endif]--> -<!--[if IE 9]><html class="lt-ie10 ie9" lang="en"><![endif]--> -<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> +<!--[if IE 8]><html class="lt-ie10 ie8" lang="en" data-scribe-reduced-action-queue="true"><![endif]--> +<!--[if IE 9]><html class="lt-ie10 ie9" lang="en" data-scribe-reduced-action-queue="true"><![endif]--> +<!--[if gt IE 9]><!--><html lang="en" data-scribe-reduced-action-queue="true"><!--<![endif]--> <head> + + + + + + + <meta charset="utf-8"> - <title>Twitter / vyki_e: I&#39;m a sucker for pledges. ...</title> + <noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2Fvyki_e%2Fstatus%2F363116819147538433"></noscript> + <script id="swift_action_queue" nonce="kXeUFvDltXI8tIgGyO2TIg=="> + (function(){function m(a){a||(a=window.event);if(!a)return!1;a.timestamp=(new Date).getTime();!a.target&&a.srcElement&&(a.target=a.srcElement);if(document.documentElement.getAttribute("data-scribe-reduced-action-queue")){var b=a.target;while(b&&b!=document +.body){if(b.tagName=="A")return;b=b.parentNode}}r("all",s(a));if(!q(a)){r("direct",a);return!0}document.addEventListener||(a=s(a));a.preventDefault=a.stopPropagation=a.stopImmediatePropagation=function(){};if(i){f.push(a);r("captured",a)}else r("ignored",a +);return!1}function n($){p();for(var a=0,b;b=f[a];a++){var d=$(b.target),e=d.closest("a")[0];if(b.type=="click"&&e){var g=$.data(e,"events"),i=g&&g.click,j=!e.hostname.match(c)||!e.href.match(/#$/);if(!i&&j){window.location=e.href;continue}}d.trigger($.event +.fix(b))}window.swiftActionQueue.wasFlushed=!0}function o(){for(var a in j){if(a=="all")continue;var b=j[a];for(var c=0;c<b.length;c++)console.log("actionQueue",u(b[c]))}}function p(){clearTimeout(g);for(var a=0,b;b=e[a];a++)document["on"+b]=null}function q +(a){if(!a.target)return!1;var b=a.target,e=(b.tagName||"").toLowerCase();if(a.metaKey)return!1;if(a.shiftKey&&e=="a")return!1;if(b.hostname&&!b.hostname.match(c))return!1;if(a.type.match(d)&&w(b))return!1;if(e=="label"){var f=b.getAttribute("for");if(f){var g= +document.getElementById(f);if(g&&v(g))return!1}else for(var i=0,j;j=b.childNodes[i];i++)if(v(j))return!1}return!0}function r(a,b){b.bucket=a;j[a].push(b)}function s(a){var b={};for(var c in a)b[c]=a[c];return b}function t(a){while(a&&a!=document.body){if(a +.tagName=="A")return a;a=a.parentNode}}function u(b){var c=[];b.bucket&&c.push("["+b.bucket+"]");c.push(b.type);var d=b.target,e=t(d),f="",g,i,j=b.timestamp&&b.timestamp-a;if(b.type==="click"&&e){g=e.className.trim().replace(/\s+/g,".");i=e.id.trim();f=/[^#]$/ +.test(e.href)?" ("+e.href+")":"";d='"'+e.innerText.replace(/\n+/g," ").trim()+'"'}else{g=d.className.trim().replace(/\s+/g,".");i=d.id.trim();d=d.tagName.toLowerCase();b.keyCode&&(d=String.fromCharCode(b.keyCode)+" : "+d)}c.push(d+f+(i&&"#"+i)+(!i&&g?"."+g +:""));j&&c.push(j);return c.join(" ")}function v(a){var b=(a.tagName||"").toLowerCase();return b=="input"&&a.getAttribute("type")=="checkbox"}function w(a){var b=(a.tagName||"").toLowerCase();return b=="textarea"||b=="input"&&a.getAttribute("type")=="text"|| +a.getAttribute("contenteditable")=="true"}var a=(new Date).getTime(),b=1e4,c=/^([^\.]+\.)*twitter\.com$/,d=/^key/,e=["click","keydown","keypress","keyup"],f=[],g=null,i=!0,j={captured:[],ignored:[],direct:[],all:[]};for(var k=0,l;l=e[k];k++)document["on"+l +]=m;g=setTimeout(function(){i=!1},b);window.swiftActionQueue={buckets:j,flush:n,logActions:o,wasFlushed:!1}})(); + </script> + <script id="composition_state" nonce="kXeUFvDltXI8tIgGyO2TIg=="> + (function(){function a(a){a.target.setAttribute("data-in-composition","true")}function b(a){a.target.removeAttribute("data-in-composition")}if(document.addEventListener){document.addEventListener("compositionstart",a,!1);document.addEventListener("compositionend" +,b,!1)}})(); + </script> + + <link rel="stylesheet" href="https://abs.twimg.com/a/1442456431/css/t1/twitter_core.bundle.css"> + + + <title>Vyki Englert on Twitter: &quot;I&#39;m a sucker for pledges. @Peers Pledge #sharingeconomy http://t.co/T4Sc47KAzh&quot;</title> + + + <meta name="msapplication-TileImage" content="//abs.twimg.com/favicons/win8-tile-144.png"/> <meta name="msapplication-TileColor" content="#00aced"/> + +<link rel="mask-icon" sizes="any" href="https://abs.twimg.com/a/1442456431/img/t1/favicon.svg" color="#55acee"> + <link href="//abs.twimg.com/favicons/favicon.ico" rel="shortcut icon" type="image/x-icon"> +<link rel="manifest" href="/manifest.json"> + <meta name="swift-page-name" id="swift-page-name" content="permalink"> <link rel="canonical" href="https://twitter.com/vyki_e/status/363116819147538433"> - <link rel="alternate" type="application/json+oembed" href="https://api.twitter.com/1/statuses/oembed.json?id=363116819147538433" title="Twitter / vyki_e: I&#39;m a sucker for pledges. ..."> - <link rel="alternate" type="text/xml+oembed" href="https://api.twitter.com/1/statuses/oembed.xml?id=363116819147538433" title="Twitter / vyki_e: I&#39;m a sucker for pledges. ..."> + <link rel="alternate" type="application/json+oembed" href="https://api.twitter.com/1/statuses/oembed.json?id=363116819147538433" title="Vyki Englert on Twitter: &quot;I&#39;m a sucker for pledges. @Peers Pledge #sharingeconomy http://t.co/T4Sc47KAzh&quot;"> + <link rel="alternate" type="text/xml+oembed" href="https://api.twitter.com/1/statuses/oembed.xml?id=363116819147538433" title="Vyki Englert on Twitter: &quot;I&#39;m a sucker for pledges. @Peers Pledge #sharingeconomy http://t.co/T4Sc47KAzh&quot;"> -<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter"> - <script id="swift_action_queue"> - (function(){function f(a){a=a||window.event;if(!a)return;!a.target&&a.srcElement&&(a.target=a.srcElement);if(!j(a))return;if(!document.addEventListener){var b={};for(var c in a)b[c]=a[c];a=b}a.preventDefault=a.stopPropagation=a.stopImmediatePropagation=function( -){};d.push(a);return!1}function g($){i();for(var b=0,c;c=d[b];b++){var e=$(c.target);if(c.type=="click"&&c.target.tagName.toLowerCase()=="a"){var f=$.data(e.get(0),"events"),g=f&&f.click,j=!c.target.hostname.match(a)||!c.target.href.match(/#$/);if(!g&&j){window -.location=c.target.href;continue}}e.trigger(c)}window.swiftActionQueue.wasFlushed=!0}function i(){e&&clearTimeout(e);for(var a=0;a<c.length;a++)document["on"+c[a]]=null}function j(c){var d=c.target.tagName.toLowerCase();if(d=="label")if(c.target.getAttribute -("for")){var e=document.getElementById(c.target.getAttribute("for"));if(e.getAttribute("type")=="checkbox")return!1}else for(var f=0;f<c.target.childNodes.length;f++)if((c.target.childNodes[f].tagName||"").toLowerCase()=="input"&&c.target.childNodes[f].getAttribute -("type")=="checkbox")return!1;if(d=="textarea"||d=="input"&&c.target.getAttribute("type")=="text"||c.target.getAttribute("contenteditable")=="true")if(c.type.match(b))return!1;return c.metaKey?!1:c.clientX&&c.shiftKey&&d=="a"?!1:c.target&&c.target.hostname&&! -c.target.hostname.match(a)?!1:!0}var a=/^([^\.]+\.)*twitter.com$/,b=/^key/,c=["click","keydown","keypress","keyup"],d=[],e=null;for(var k=0;k<c.length;k++)document["on"+c[k]]=f;setTimeout(i,1e4);window.swiftActionQueue={flush:g,wasFlushed:!1}})(); - </script> - <script id="composition_state"> - (function(){function a(a){a.target.setAttribute("data-in-composition","true")}function b(a){a.target.removeAttribute("data-in-composition")}if(document.addEventListener){document.addEventListener("compositionstart",a,!1);document.addEventListener("compositionend" -,b,!1)}})(); - </script> +<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter"> - <link rel="stylesheet" href="https://abs.twimg.com/a/1383847355/t1/css/t1_core.bundle.css" type="text/css"> + <link rel="stylesheet" href="https://abs.twimg.com/a/1442456431/css/t1/twitter_more_1.bundle.css"> + <link rel="stylesheet" href="https://abs.twimg.com/a/1442456431/css/t1/twitter_more_2.bundle.css"> - <link rel="stylesheet" href="https://abs.twimg.com/a/1383847355/t1/css/t1_more.bundle.css" type="text/css"> - <style id="user-style-vyki_e"> a, a:hover, a:focus, - a:active, - - .u-linkPseudo:hover a, - .u-linkPseudo:focus a, - .u-linkPseudo:active a { - color: #038543; + a:active { + color: #000000; } - .u-textUserColor { - color: #038543 !important; + .u-textUserColor, + .u-textUserColorHover:hover, + .u-textUserColorHover:focus { + color: #000000 !important; } .u-borderUserColor, .u-borderUserColorHover:hover, .u-borderUserColorHover:focus { - border-color: #038543 !important; + border-color: #000000 !important; } .u-bgUserColor, .u-bgUserColorHover:hover, .u-bgUserColorHover:focus { - background-color: #038543 !important; + background-color: #000000 !important; } + + .u-dropdownUserColor > li:hover, + .u-dropdownUserColor > li:focus, + .u-dropdownUserColor > li > button:hover, + .u-dropdownUserColor > li > button:focus { + color: #fff !important; + background-color: #000000 !important; + } + .u-boxShadowInsetUserColorHover:hover, .u-boxShadowInsetUserColorHover:focus { - -webkit-box-shadow: inset 0 0 6px 3px #038543 !important; - box-shadow: inset 0 0 6px 3px #038543 !important; + box-shadow: inset 0 0 0 5px #000000 !important; } .u-textUserColorLight { - color: #9ACEB3 !important; + color: #999999 !important; } .u-borderUserColorLight, - .u-borderUserColorLightFocus:focus { - border-color: #9ACEB3 !important; + .u-borderUserColorLightFocus:focus, + .u-borderUserColorLightHover:hover, + .u-borderUserColorLightHover:focus { + border-color: #999999 !important; } .u-bgUserColorLight { - background-color: #9ACEB3 !importat; + background-color: #999999 !important; } .u-boxShadowUserColorLighterFocus:focus { - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(3,133,67,0.25) !important; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(3,133,67,0.25) !important; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(0,0,0,0.25) !important; } .u-textUserColorLightest { - color: #E5F2EC !important; + color: #E5E5E5 !important; } .u-borderUserColorLightest { - border-color: #E5F2EC !important; + border-color: #E5E5E5 !important; } .u-bgUserColorLightest { - background-color: #E5F2EC !important; + background-color: #E5E5E5 !important; } + .u-textUserColorLighter { + color: #BFBFBF !important; + } + + .u-borderUserColorLighter { + border-color: #BFBFBF !important; + } + + .u-bgUserColorLighter { + background-color: #BFBFBF !important; + } + + .u-bgUserColorDarkHover:hover { - background-color: #026A35 !important; + background-color: #000000 !important; } + .u-borderUserColorDark { + border-color: #000000 !important; + } + .u-bgUserColorDarkerActive:active { - background-color: #014F28 !important; + background-color: #000000 !important; } @@ -144,10 +192,11 @@ a, .btn-link, .btn-link:focus, +.icon-btn, .pretty-link b, .pretty-link:hover s, @@ -160,23 +209,32 @@ .account-group:hover .fullname, .account-group:focus .fullname, .account-summary:focus .fullname, +.message .message-text a, +.stats a strong, +.plain-btn:hover, +.plain-btn:focus, +.dropdown.open .user-dropdown.plain-btn, +.open > .plain-btn, +#global-actions .new:before, +.module .list-link:hover, +.module .list-link:focus, + +.UserCompletion-step:hover, + .stats a:hover, .stats a:hover strong, .stats a:focus, .stats a:focus strong, .profile-modal-header .fullname a:hover, .profile-modal-header .username a:hover, .profile-modal-header .fullname a:focus, .profile-modal-header .username a:focus, -.story-article:hover .metadata, -.story-article .metadata a:focus, - .find-friends-sources li:hover .source, @@ -187,34 +245,28 @@ .stream-item .view-all-supplements:hover, .stream-item .view-all-supplements:focus, .tweet .time a:hover, .tweet .time a:focus, -.tweet-actions a, .tweet .details.with-icn b, +.tweet .details.with-icn .Icon, +.tweet .tweet-geo-text a:hover, -.stream-item:hover .original-tweet .expand-action-wrapper, -.stream-item .original-tweet.focus .expand-action-wrapper, -.opened-tweet.original-tweet .expand-action-wrapper, - .stream-item:hover .original-tweet .details b, .stream-item .original-tweet.focus .details b, .stream-item.open .original-tweet .details b, .simple-tweet:hover .details b, .simple-tweet.focus .details b, .simple-tweet.open .details b, -.simple-tweet:hover .details .expand-action-wrapper, -.simple-tweet.focus .details .expand-action-wrapper, -.simple-tweet.open .details .collapse-action-wrapper, .simple-tweet:hover .details .simple-details-link, .simple-tweet.focus .details .simple-details-link, .client-and-actions a:hover, .client-and-actions a:focus, -.dismiss-promoted:hover b, +.dismiss-btn:hover b, .tweet .context .pretty-link:hover s, .tweet .context .pretty-link:hover b, .tweet .context .pretty-link:focus s, .tweet .context .pretty-link:focus b, @@ -224,65 +276,226 @@ .list-membership-container .create-a-list, .list-membership-container .create-a-list:hover, -.story-header:hover .view-tweets, .card .list-details a:hover, .card .list-details a:focus, .card .card-body:hover .attribution, .card .card-body .attribution:focus, -.events-card .card-body:hover .attribution, -.events-card .card-body .attribution:focus, .new-tweets-bar, .onebox .soccer ul.ticker a:hover, .onebox .soccer ul.ticker a:focus, -.discover-item-actions a, +.remove-background-btn, -.disco-stream-item.disco_exp_actions_on_btm .more-tweet-actions .btn-link, -.disco-stream-item.disco_exp_actions_on_btm_without_stats .more-tweet-actions .btn-link, +.stream-item-activity-notification .latest-tweet .tweet-row a:hover, +.stream-item-activity-notification .latest-tweet .tweet-row a:focus, +.stream-item-activity-notification .latest-tweet .tweet-row a:hover b, +.stream-item-activity-notification .latest-tweet .tweet-row a:focus b { + color: #000000; +} -.remove-background-btn, + #global-actions > li > a { + border-bottom-color: #000000; + } + #global-actions > li:hover > a, + #global-actions > li > a:focus, + .nav.right-actions > li > a:hover, + .nav.right-actions > li > button:hover, + .nav.right-actions > li > a:focus, + .nav.right-actions > li > button:focus { + color: #000000; + } + /* Surpress the new connect glow if in experiment. */ + #global-actions .people.new:before { + content: none; + } -.stream-item-activity-me .latest-tweet .tweet-row a:hover, -.stream-item-activity-me .latest-tweet .tweet-row a:focus, -.stream-item-activity-me .latest-tweet .tweet-row a:hover b, -.stream-item-activity-me .latest-tweet .tweet-row a:focus b { - color: #038543; + /* hover state for photo select button*/ + .photo-selector:hover .btn, + .icon-btn:hover, + .icon-btn:active, + .icon-btn.active, + .icon-btn.enabled { + border-color: #000000; + border-color: rgba(0,0,0,.5); + color: #000000; + } + + /* hover state for photo select button*/ + .photo-selector:hover .btn, + .icon-btn:hover { + background-image: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#19000000'); /* IE8-9 */ + } + + .icon-btn.disabled, + .icon-btn.disabled:hover, + .icon-btn[disabled], + .icon-btn[aria-disabled=true] { + color: #000000; + } + + /* tweet-btn can have primary-btn class as well so the following rules ensure that the correct background color is applied */ + .tweet-btn, + .tweet-btn:focus { + background-color: #000000; + background: rgba(0,0,0,.8); + } + + .tweet-btn:hover, + .tweet-btn:active, + .tweet-btn.active { + background-color: #000000; + } + + .tweet-btn.btn.disabled, + .tweet-btn.btn.disabled:hover, + .tweet-btn.btn[disabled], + .tweet-btn.btn[aria-disabled=true] { + background: #000000; + } + + .btn:focus, + .btn.focus, + .Button:focus { + box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px rgba(0, 0, 0, 0.5); + } + + .selected-stream-item:focus { + box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); + } + + /* highlighting when navigate through timeline stream table view with j & k. */ + .js-navigable-stream.stream-table-view .selected-stream-item[tabindex="-1"]:focus { + outline: 3px solid rgba(0, 0, 0, 0.5) !important; + } + + /* box-shadow does not work with table tr element */ + .js-navigable-stream.stream-table-view .selected-stream-item:focus { + box-shadow: none; + } + + /** + * 1. Bring actionable tweet to top when active to ensure border + * highlighting wraps entire tweet. Value must be at least at if not + * higher than the z-index value of ProfileHeading to ensure first + * tweet in timeline receives border on all four sides. + * NOTE: z-index should be 2 to avoid conflicts with .ProfileCanopy and .ProfileCard-avatarLink + */ + + .js-stream-item.is-selected:focus .ProfileCard, + .QuoteTweet:hover, + .QuoteTweet:focus, + .QuoteTweet:active, + .activity-user-profile-content:hover, + .activity-user-profile-content:focus, + .activity-user-profile-content:active { + border-color: rgba(0, 0, 0, 0.5); + z-index: 2; /* 1 */ + } + + .global-dm-nav.new.with-count .dm-new { + background: #fff; + } + + .global-dm-nav.new.with-count .dm-new .count-inner { + background: #000000; + } + + .global-nav .people .count .count-inner { + background: #000000; + } + + .dropdown-menu li > a:hover, + .dropdown-menu li > a:focus, + .dropdown-menu .dropdown-link:hover, + .dropdown-menu .dropdown-link:focus, + .dropdown-menu .dropdown-link.is-focused, + .dropdown-menu li:hover .dropdown-link, + .dropdown-menu li:focus .dropdown-link, + .dropdown-menu .typeahead-recent-search-item.selected, + .dropdown-menu .typeahead-saved-search-item.selected, + .dropdown-menu .selected a, + .dropdown-menu .dropdown-link.selected { + background-color: #000000 !important; + } + +/* give tweet boxes 10% of the users link color as background */ +.home-tweet-box, +.RetweetDialog-commentBox, +.WebToast-box--altColor, +.content-main .conversations-enabled .expansion-container .inline-reply-tweetbox { + background-color: #E5E5E5; } +.conversations-enabled .inline-reply-caret .caret-inner { + border-bottom-color: #E5E5E5; +} +.top-timeline-tweetbox .timeline-tweet-box .tweet-form.condensed .tweet-box { + color: #000000; +} +/* give tweet box containers an outline using the users link color */ +.home-tweet-box, +.top-timeline-tweetbox .timeline-tweet-box { + border-color: #BFBFBF !important; +} +/* give tweet boxes an outline using the users link color */ +.tweet-box[contenteditable="true"] { + border-color: rgba(0,0,0,0.25); +} +input:focus, +textarea:focus, +div[contenteditable="true"]:focus, +div[contenteditable="true"].fake-focus { + border-color: #666666; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); +} +.currently-dragging.modal-enabled .modal .tweet-box, +.currently-dragging:not(.modal-enabled) .tweet-content .tweet-box, +.tweet-box[contenteditable="true"]:focus { + border-color: #999999; + box-shadow: none; +} s, .pretty-link:hover s, .pretty-link:focus s, -.stream-item-activity-me .latest-tweet .tweet-row a:hover s, -.stream-item-activity-me .latest-tweet .tweet-row a:focus s { - color: #67B58E; +.stream-item-activity-notification .latest-tweet .tweet-row a:hover s, +.stream-item-activity-notification .latest-tweet .tweet-row a:focus s { + color: #666666; } .vellip, .vellip:before, .vellip:after, .conversation-module > li:after, -.conversation-module > li:before { - background-color: #67B58E; +.conversation-module > li:before, +.ThreadedConversation-tweet ~ .ThreadedConversation-tweet:before, +.ThreadedConversation-tweet:after, +.ThreadedConversation-viewOther:before, +.ThreadedConversation-unavailableTweet:before, +.ThreadedConversation-unavailableTweet:after { + background-color: #666666; } @@ -305,217 +518,205 @@ .timelines-navigation .profile-nav-icon:hover, .timelines-navigation .profile-nav-link:focus .profile-nav-icon, .sm-top-tweet, -.metadata a.tweet-geo-text:hover .sm-geo, - - -.discover-item .js-action-card-search:hover .sm-search, -.discover-item .js-action-card-search:focus .sm-search { - background-color: #038543; +.metadata a.tweet-geo-text:hover .sm-geo { + background-color: #000000; } - - -.tweet-action-icons .tweet .tweet-actions .sm-reply, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-reply, -.tweet-action-icons .tweet .tweet-actions .sm-rt, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-rt, -.tweet-action-icons .tweet .tweet-actions .sm-fav, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-fav, -.tweet-action-icons .tweet .tweet-actions .sm-trash, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-trash, -.tweet-action-icons .tweet .tweet-actions .sm-more, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-more { - background-color: #67B58E; +.enhanced-mini-profile .mini-profile .profile-summary { + background-image: url(https://abs.twimg.com/a/1442456431/img/t1/grey_header_web.jpg); } -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-reply, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-rt, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-fav, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-trash, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-more { - background-color: #67B58E; +.wrapper-profile .profile-card.profile-header .profile-header-inner { + background-image: url(https://abs.twimg.com/a/1442456431/img/t1/grey_header_web.jpg); } -.tweet-action-icons .stream .tweet .tweet-actions .sm-reply:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-reply, -.tweet-action-icons .stream .tweet .tweet-actions .sm-rt:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-rt, -.tweet-action-icons .stream .tweet .tweet-actions .sm-fav:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-fav, -.tweet-action-icons .stream .tweet .tweet-actions .sm-trash:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-trash, -.tweet-action-icons .stream .tweet .tweet-actions .sm-more:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-more { - background-color: #038543; -} + #global-tweet-dialog .modal-header { + border-bottom: solid 1px rgba(0, 0, 0, .25); + } + #global-tweet-dialog .modal-tweet-form-container { + background-color: #000000; + background: rgba(0, 0, 0, .1); + } -.wrapper.black { - background: url(https://abs.twimg.com/a/1383847355/t1/img/wash-black-30.png); -} -.wrapper.white { - background: url(https://abs.twimg.com/a/1383847355/t1/img/wash-white-30.png); -} + .inline-reply-tweetbox { + background-color: #E5E5E5; + } - </style> -<style id="user-style-vyki_e-bg-img" class="js-user-style-bg-img"> - body.user-style-vyki_e { - background-image: url(https://abs.twimg.com/images/themes/theme18/bg.gif); - background-position: left 40px; - background-attachment: fixed; - background-repeat: repeat; - background-repeat: no-repeat; +<style id="user-style-techAPJ-header-img" class="js-user-style-header-img"> - background-color: #ACDED6; - } + body.user-style-techAPJ .enhanced-mini-profile .mini-profile .profile-summary { + background-image: url(https://abs.twimg.com/a/1442456431/img/t1/grey_header_web.jpg); + } + body.user-style-techAPJ .wrapper-profile .profile-card.profile-header .profile-header-inner { + background-image: url(https://abs.twimg.com/a/1442456431/img/t1/grey_header_web.jpg); + } + body.user-style-techAPJ .profile-canopy .bg-img { + background-image: url(https://abs.twimg.com/a/1442456431/img/t1/grey_header_web_retina.jpg); + } + </style> + <meta property="og:type" content="article"> + <meta property="og:url" content="https://twitter.com/vyki_e/status/363116819147538433"> + <meta property="og:title" content="Vyki Englert on Twitter"> + <meta property="og:image" content="https://pbs.twimg.com/profile_images/568244395007168512/qQVXa2Ql_400x400.jpeg"> + <meta property="og:description" content="“I&#39;m a sucker for pledges. @Peers Pledge #sharingeconomy http://t.co/T4Sc47KAzh”"> + <meta property="og:site_name" content="Twitter"> + <meta property="fb:app_id" content="2231777543"> </head> - <body class="t1 logged-in user-style-vyki_e" + <body class="three-col logged-in user-style-vyki_e" data-fouc-class-names="swift-loading" dir="ltr"> - <script id="swift_loading_indicator"> + <script id="swift_loading_indicator" nonce="kXeUFvDltXI8tIgGyO2TIg=="> document.body.className=document.body.className+" "+document.body.getAttribute("data-fouc-class-names"); </script> <div id="doc" class="route-permalink"> <div class="topbar js-topbar"> - <div id="banners" class="js-banners"> - </div> + + + <div class="ProfilePage-editingOverlay"></div> + + <div class="global-nav" data-section-term="top_nav"> <div class="global-nav-inner"> <div class="container"> +<h1 class="Icon Icon--bird bird-topbar-etched" style="display: inline-block; width: 24px; height: 21px;"> + <span class="visuallyhidden">Twitter</span> +</h1> - <h1 class=" icon bird-topbar-etched" style="display: inline-block; width: 24px; height: 21px;"> - <span class="visuallyhidden">Twitter</span> - </h1> + <div role="navigation" style="display: inline-block;"><ul class="nav js-global-actions" id="global-actions"><li id="global-nav-home" class="home" data-global-action="home"> + <a class="js-nav js-tooltip js-dynamic-tooltip" data-placement="bottom" href="/" data-component-term="home_nav" data-nav="home"> + <span class="Icon Icon--home Icon--large"></span> + <span class="text">Home</span> + </a> + </li><li class="people notifications" data-global-action="connect"> + <a class="js-nav js-tooltip js-dynamic-tooltip" data-placement="bottom" href="/i/notifications" data-component-term="connect_nav" data-nav="connect"> + <span class="Icon Icon--notifications Icon--large"></span> + <span class="text">Notifications</span> + <span class="count"> + <span class="count-inner">0</span> + </span> + </a> + </li><li class="dm-nav"> + <a role="button" href="#" class="js-tooltip js-dynamic-tooltip global-dm-nav" data-placement="bottom"> + <span class="Icon Icon--dm Icon--large"></span> + <span class="text">Messages</span> + <span class="dm-new"><span class="count-inner"></span></span> + </a> + </li></ul> + </div> - <div role="navigation" style="display: inline-block;"><ul class="nav js-global-actions" id="global-actions" ><li id="global-nav-home" class="home" data-global-action="home"> <a class="js-nav js-tooltip" href="/" data-component-term="home_nav" data-nav="home" title="Home"> <span class="new-wrapper"><i class="nav-home"></i><i class="nav-new"></i></span> <span class="text">Home</span> </a> </li> <li class="people" data-global-action="connect"> <a class="js-nav js-tooltip" href="/i/connect" data-component-term="connect_nav" data-nav="connect" title="Connect"> <span class="new-wrapper"><i class="nav-people"></i><i class="nav-new"></i></span> <span class="text">Connect</span> </a> </li> <li class="topics" data-global-action="discover"> <a class="js-nav js-tooltip" href="/i/discover" data-component-term="discover_nav" data-nav="discover" title="Discover"> <span class="new-wrapper"><i class="nav-topics"></i><i class="nav-new"></i></span> <span class="text">Discover</span> </a> </li> <li class="profile" data-global-action="profile"> <a class="js-nav js-tooltip" href="/vyki_e" data-component-term="profile_nav" data-nav="profile" title="Me"> <span class="new-wrapper"><i class="nav-me"></i><i class="nav-new"></i></span> <span class="text">Me</span> </a> </li> </ul></div> - - - <div class="pull-right" style="display: inline-block;"> <div role="search"> - <form class="form-search js-search-form" action="/search" id="global-nav-search"> + <div class="pull-right" style="display: inline-block;"><div role="search"> + <form class="t1-form form-search js-search-form" action="/search" id="global-nav-search"> <label class="visuallyhidden" for="search-query">Search query</label> - <input class="search-input" type="text" id="search-query" placeholder="Search" name="q" autocomplete="off" spellcheck="false"> + <input class="search-input" type="text" id="search-query" placeholder="Search Twitter" name="q" autocomplete="off" spellcheck="false"> <span class="search-icon js-search-action"> - <button type="submit" class="icon nav-search"> - <span class="visuallyhidden"> - - Search - </span> + <button type="submit" class="Icon Icon--search nav-search"> + <span class="visuallyhidden">Search Twitter</span> </button> </span> - <input disabled="disabled" class="search-input search-hinting-input" type="text" id="search-query-hint" autocomplete="off" spellcheck="false"> - <div role="menu" aria-hidden="true" class="dropdown-menu typeahead "> + <div role="listbox" class="dropdown-menu typeahead"> <div aria-hidden="true" class="dropdown-caret"> <div class="caret-outer"></div> <div class="caret-inner"></div> </div> <div role="presentation" class="dropdown-inner js-typeahead-results"> <div role="presentation" class="typeahead-recent-searches"> - <h4 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent Searches</h4><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> <ul role="presentation" class="typeahead-items recent-searches-list"> <li role="presentation" class="typeahead-item typeahead-recent-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> </li> </ul> </div> <div role="presentation" class="typeahead-saved-searches"> - <h4 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved Searches</h4> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> <ul role="presentation" class="typeahead-items saved-searches-list"> <li role="presentation" class="typeahead-item typeahead-saved-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> </li> </ul> </div> <ul role="presentation" class="typeahead-items typeahead-topics"> <li role="presentation" class="typeahead-item typeahead-topic-item"> - <a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> - <span class="icon generic-search"></span> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> </a> </li> </ul> <ul role="presentation" class="typeahead-items typeahead-accounts social-context js-typeahead-accounts"> <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - <a role="menuitem" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> <img class="avatar size32" alt=""> <span class="typeahead-user-item-info"> <span class="fullname"></span> - <span class="js-verified hidden"><span class="icon verified"><span class="visuallyhidden">Verified account</span></span></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> <span class="username"><s>@</s><b></b></span> </span> <span class="typeahead-social-context"></span> </a> </li> - <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> </ul> <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> - <li role="presenation" class="typeahead-item typeahead-trend-locations-item"><a role="menuitem" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> </ul> - <ul role="presentation" class="typeahead-items typeahead-context-list"> - - <li role="presentation" class="typeahead-item typeahead-context-item"><a role="menuitem" class="js-nav" href="" data-ds="context_helper" data-search-query="" tabindex="-1"></a></li> -</ul> </div> </div> </form> </div> - - <i class="topbar-divider"></i> - <div class="dm-nav"> - <button type="button" class="global-dm-nav js-tooltip" data-placement="bottom" title="Direct messages"> - <i class="global-dm-envelope icon"></i> - <span class="dm-new"></span> - </button> - </div> - <i class="topbar-divider"></i> <ul class="nav"> <li class="me dropdown session js-session" data-global-action="t1me" id="user-dropdown"> <a href="/settings/account" class="js-tooltip dropdown-toggle js-dropdown-toggle" id="user-dropdown-toggle" title="Settings and help" data-placement="bottom"> <span class="new-wrapper"><span class="icon nav-session"><span class="visuallyhidden">Settings and help</span></span><span class="icon nav-new"></span></span> <span class="caret"></span> </a> <div class="dropdown-menu"> +<ul class="nav right-actions"><li class="me dropdown session js-session" data-global-action="t1me" id="user-dropdown"> + <a href="/settings/account" class="btn js-tooltip settings dropdown-toggle js-dropdown-toggle" id="user-dropdown-toggle" title="Profile and settings" data-placement="bottom"><img class="avatar size32" src="https://pbs.twimg.com/profile_images/432947308213202944/n_KtAeb0_normal.png" alt="Profile and settings" data-user-id="1961102174"></a> + <div class="dropdown-menu"> <div class="dropdown-caret"> <span class="caret-outer"></span> <span class="caret-inner"></span> </div> <ul> <li class="current-user" data-name="profile"> -<a href="/settings/profile" - class="account-summary account-summary-small" - data-nav="edit_profile"> - <div class="content"> - <div class="account-group js-mini-current-user" data-user-id="1087064150" data-screen-name="vyki_e"> - <img class="avatar size32" src="https://pbs.twimg.com/profile_images/3518892092/39b969d32a10b2437563e246708c8f9d_normal.jpeg" alt="" data-user-id="1087064150"> - <b class="fullname">Vyki Englert</b> - <span class="screen-name hidden">@vyki_e</span> - <small class="metadata"> - Edit profile +<a href="/techAPJ" + class="account-summary account-summary-small js-nav" + data-nav="view_profile"><div class="content"><div class="account-group js-mini-current-user" data-user-id="1961102174" data-screen-name="techAPJ"><b class="fullname">Arpit Jalan</b><span class="screen-name hidden" dir="ltr">@techAPJ</span><small class="metadata">View profile</small></div></div></a> - </small> - </div> - </div> -</a> </li> <li class="dropdown-divider"></li> - <li data-name="lists"><a href="/vyki_e/lists" data-nav="all_lists">Lists</a></li> + <li data-name="lists"><a href="/techAPJ/lists" data-nav="all_lists">Lists</a></li> <li class="dropdown-divider"></li> @@ -525,135 +726,167 @@ <li class="js-keyboard-shortcut-trigger" data-nav="shortcuts"> <button type="button" class="dropdown-link">Keyboard shortcuts</button> </li> + <li><a href="https://ads.twitter.com/start?ref=gl-tw-tw-twitter-ads" target="_blank" data-nav="ads">Twitter Ads</a></li> + <li><a class="user-dropdown-analytics" href="https://analytics.twitter.com/" target="_blank" data-nav="user_dropdown_analytics">Analytics</a></li> + + <li class="dropdown-divider"></li> <li><a href="/settings/account" data-nav="settings" class="js-nav">Settings</a></li> <li class="js-signout-button" id="signout-button" data-nav="logout"> - <button type="button" class="dropdown-link">Sign out</button> - <form class="dropdown-link-form signout-form" id="signout-form" action="/logout" method="POST"> - <input type="hidden" value="c14730383bfd2c98a5e4d26fe3c24e45dbd6de86" name="authenticity_token" class="authenticity_token"> + <button type="button" class="dropdown-link">Log out</button> + <form class="t1-form dropdown-link-form signout-form" id="signout-form" action="/logout" method="POST"> + <input type="hidden" value="b240e1022b16313221f9d48f641836d6a95b5eea" name="authenticity_token" class="authenticity_token"> <input type="hidden" name="reliability_event" class="js-reliability-event"> <input type="hidden" name="scribe_log"> </form> </li> </ul> </div> - </li> </ul> <i class="topbar-divider"></i> <div role="complementary" aria-labelledby="global-new-tweet-button" class="well topbar-tweet-btn"> <button id="global-new-tweet-button" type="button" class="btn btn-tweet js-global-new-tweet js-tooltip" data-placement="bottom" data-component-term="new_tweet_button" title="Compose new Tweet"> <i class="nav-tweet"><span class="visuallyhidden">Compose new Tweet</span></i> </button> </div> </div> + </li><li role="complementary" aria-labelledby="global-new-tweet-button" class="topbar-tweet-btn"> + <button id="global-new-tweet-button" type="button" class="js-global-new-tweet js-tooltip btn primary-btn tweet-btn js-dynamic-tooltip" data-placement="bottom" data-component-term="new_tweet_button"> + <span class="Icon Icon--tweet Icon--large"></span> + <span class="text">Tweet</span> + </button> + </li></ul></div> - <button type="button" id="close-all-button" class="close-all-tweets js-close-all-tweets js-tooltip" title="Close all open Tweets"> - <span class="icon nav-breaker"><span class="visuallyhidden">Close all open Tweets</span></button> - </button> </div> </div> </div> - </div> + <div id="page-outer"> - <div id="page-container" class="wrapper wrapper-permalink white"> + <div id="page-container" class="AppContent wrapper wrapper-permalink"> + + <style id="user-style-vyki_e"> a, a:hover, a:focus, - a:active, - - .u-linkPseudo:hover a, - .u-linkPseudo:focus a, - .u-linkPseudo:active a { - color: #038543; + a:active { + color: #4E99D1; } - .u-textUserColor { - color: #038543 !important; + .u-textUserColor, + .u-textUserColorHover:hover, + .u-textUserColorHover:focus { + color: #4E99D1 !important; } .u-borderUserColor, .u-borderUserColorHover:hover, .u-borderUserColorHover:focus { - border-color: #038543 !important; + border-color: #4E99D1 !important; } .u-bgUserColor, .u-bgUserColorHover:hover, .u-bgUserColorHover:focus { - background-color: #038543 !important; + background-color: #4E99D1 !important; } + + .u-dropdownUserColor > li:hover, + .u-dropdownUserColor > li:focus, + .u-dropdownUserColor > li > button:hover, + .u-dropdownUserColor > li > button:focus { + color: #fff !important; + background-color: #4E99D1 !important; + } + .u-boxShadowInsetUserColorHover:hover, .u-boxShadowInsetUserColorHover:focus { - -webkit-box-shadow: inset 0 0 6px 3px #038543 !important; - box-shadow: inset 0 0 6px 3px #038543 !important; + box-shadow: inset 0 0 0 5px #4E99D1 !important; } .u-textUserColorLight { - color: #9ACEB3 !important; + color: #B8D6EC !important; } .u-borderUserColorLight, - .u-borderUserColorLightFocus:focus { - border-color: #9ACEB3 !important; + .u-borderUserColorLightFocus:focus, + .u-borderUserColorLightHover:hover, + .u-borderUserColorLightHover:focus { + border-color: #B8D6EC !important; } .u-bgUserColorLight { - background-color: #9ACEB3 !importat; + background-color: #B8D6EC !important; } .u-boxShadowUserColorLighterFocus:focus { - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(3,133,67,0.25) !important; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(3,133,67,0.25) !important; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(78,153,209,0.25) !important; } .u-textUserColorLightest { - color: #E5F2EC !important; + color: #EDF4FA !important; } .u-borderUserColorLightest { - border-color: #E5F2EC !important; + border-color: #EDF4FA !important; } .u-bgUserColorLightest { - background-color: #E5F2EC !important; + background-color: #EDF4FA !important; } + .u-textUserColorLighter { + color: #D2E5F3 !important; + } + + .u-borderUserColorLighter { + border-color: #D2E5F3 !important; + } + + .u-bgUserColorLighter { + background-color: #D2E5F3 !important; + } + + .u-bgUserColorDarkHover:hover { - background-color: #026A35 !important; + background-color: #3E7AA7 !important; } + .u-borderUserColorDark { + border-color: #3E7AA7 !important; + } + .u-bgUserColorDarkerActive:active { - background-color: #014F28 !important; + background-color: #2E5B7D !important; } @@ -669,10 +902,11 @@ a, .btn-link, .btn-link:focus, +.icon-btn, .pretty-link b, .pretty-link:hover s, @@ -685,23 +919,32 @@ .account-group:hover .fullname, .account-group:focus .fullname, .account-summary:focus .fullname, +.message .message-text a, +.stats a strong, +.plain-btn:hover, +.plain-btn:focus, +.dropdown.open .user-dropdown.plain-btn, +.open > .plain-btn, +#global-actions .new:before, +.module .list-link:hover, +.module .list-link:focus, + +.UserCompletion-step:hover, + .stats a:hover, .stats a:hover strong, .stats a:focus, .stats a:focus strong, .profile-modal-header .fullname a:hover, .profile-modal-header .username a:hover, .profile-modal-header .fullname a:focus, .profile-modal-header .username a:focus, -.story-article:hover .metadata, -.story-article .metadata a:focus, - .find-friends-sources li:hover .source, @@ -712,34 +955,28 @@ .stream-item .view-all-supplements:hover, .stream-item .view-all-supplements:focus, .tweet .time a:hover, .tweet .time a:focus, -.tweet-actions a, .tweet .details.with-icn b, +.tweet .details.with-icn .Icon, +.tweet .tweet-geo-text a:hover, -.stream-item:hover .original-tweet .expand-action-wrapper, -.stream-item .original-tweet.focus .expand-action-wrapper, -.opened-tweet.original-tweet .expand-action-wrapper, - .stream-item:hover .original-tweet .details b, .stream-item .original-tweet.focus .details b, .stream-item.open .original-tweet .details b, .simple-tweet:hover .details b, .simple-tweet.focus .details b, .simple-tweet.open .details b, -.simple-tweet:hover .details .expand-action-wrapper, -.simple-tweet.focus .details .expand-action-wrapper, -.simple-tweet.open .details .collapse-action-wrapper, .simple-tweet:hover .details .simple-details-link, .simple-tweet.focus .details .simple-details-link, .client-and-actions a:hover, .client-and-actions a:focus, -.dismiss-promoted:hover b, +.dismiss-btn:hover b, .tweet .context .pretty-link:hover s, .tweet .context .pretty-link:hover b, .tweet .context .pretty-link:focus s, .tweet .context .pretty-link:focus b, @@ -749,65 +986,222 @@ .list-membership-container .create-a-list, .list-membership-container .create-a-list:hover, -.story-header:hover .view-tweets, .card .list-details a:hover, .card .list-details a:focus, .card .card-body:hover .attribution, .card .card-body .attribution:focus, -.events-card .card-body:hover .attribution, -.events-card .card-body .attribution:focus, .new-tweets-bar, .onebox .soccer ul.ticker a:hover, .onebox .soccer ul.ticker a:focus, -.discover-item-actions a, +.remove-background-btn, -.disco-stream-item.disco_exp_actions_on_btm .more-tweet-actions .btn-link, -.disco-stream-item.disco_exp_actions_on_btm_without_stats .more-tweet-actions .btn-link, +.stream-item-activity-notification .latest-tweet .tweet-row a:hover, +.stream-item-activity-notification .latest-tweet .tweet-row a:focus, +.stream-item-activity-notification .latest-tweet .tweet-row a:hover b, +.stream-item-activity-notification .latest-tweet .tweet-row a:focus b { + color: #4E99D1; +} -.remove-background-btn, + #global-actions > li > a { + border-bottom-color: #4E99D1; + } + #global-actions > li:hover > a, + #global-actions > li > a:focus, + .nav.right-actions > li > a:hover, + .nav.right-actions > li > button:hover, + .nav.right-actions > li > a:focus, + .nav.right-actions > li > button:focus { + color: #4E99D1; + } -.stream-item-activity-me .latest-tweet .tweet-row a:hover, -.stream-item-activity-me .latest-tweet .tweet-row a:focus, -.stream-item-activity-me .latest-tweet .tweet-row a:hover b, -.stream-item-activity-me .latest-tweet .tweet-row a:focus b { - color: #038543; + /* hover state for photo select button*/ + .photo-selector:hover .btn, + .icon-btn:hover, + .icon-btn:active, + .icon-btn.active, + .icon-btn.enabled { + border-color: #4E99D1; + border-color: rgba(78,153,209,.5); + color: #4E99D1; + } + + /* hover state for photo select button*/ + .photo-selector:hover .btn, + .icon-btn:hover { + background-image: linear-gradient(rgba(255,255,255,0), rgba(78,153,209,.1)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#194E99D1'); /* IE8-9 */ + } + + .icon-btn.disabled, + .icon-btn.disabled:hover, + .icon-btn[disabled], + .icon-btn[aria-disabled=true] { + color: #4E99D1; + } + + /* tweet-btn can have primary-btn class as well so the following rules ensure that the correct background color is applied */ + .tweet-btn, + .tweet-btn:focus { + background-color: #4E99D1; + background: rgba(78,153,209,.8); + } + + .tweet-btn:hover, + .tweet-btn:active, + .tweet-btn.active { + background-color: #4E99D1; + } + + .tweet-btn.btn.disabled, + .tweet-btn.btn.disabled:hover, + .tweet-btn.btn[disabled], + .tweet-btn.btn[aria-disabled=true] { + background: #4E99D1; + } + + .btn:focus, + .btn.focus, + .Button:focus { + box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px rgba(78, 153, 209, 0.5); + } + + .selected-stream-item:focus { + box-shadow: 0 0 0 3px rgba(78, 153, 209, 0.5); + } + + /* highlighting when navigate through timeline stream table view with j & k. */ + .js-navigable-stream.stream-table-view .selected-stream-item[tabindex="-1"]:focus { + outline: 3px solid rgba(78, 153, 209, 0.5) !important; + } + + /* box-shadow does not work with table tr element */ + .js-navigable-stream.stream-table-view .selected-stream-item:focus { + box-shadow: none; + } + + /** + * 1. Bring actionable tweet to top when active to ensure border + * highlighting wraps entire tweet. Value must be at least at if not + * higher than the z-index value of ProfileHeading to ensure first + * tweet in timeline receives border on all four sides. + * NOTE: z-index should be 2 to avoid conflicts with .ProfileCanopy and .ProfileCard-avatarLink + */ + + .js-stream-item.is-selected:focus .ProfileCard, + .QuoteTweet:hover, + .QuoteTweet:focus, + .QuoteTweet:active, + .activity-user-profile-content:hover, + .activity-user-profile-content:focus, + .activity-user-profile-content:active { + border-color: rgba(78, 153, 209, 0.5); + z-index: 2; /* 1 */ + } + + .global-dm-nav.new.with-count .dm-new { + background: #fff; + } + + .global-dm-nav.new.with-count .dm-new .count-inner { + background: #4E99D1; + } + + .global-nav .people .count .count-inner { + background: #4E99D1; + } + + .dropdown-menu li > a:hover, + .dropdown-menu li > a:focus, + .dropdown-menu .dropdown-link:hover, + .dropdown-menu .dropdown-link:focus, + .dropdown-menu .dropdown-link.is-focused, + .dropdown-menu li:hover .dropdown-link, + .dropdown-menu li:focus .dropdown-link, + .dropdown-menu .typeahead-recent-search-item.selected, + .dropdown-menu .typeahead-saved-search-item.selected, + .dropdown-menu .selected a, + .dropdown-menu .dropdown-link.selected { + background-color: #4E99D1 !important; + } + +/* give tweet boxes 10% of the users link color as background */ +.home-tweet-box, +.RetweetDialog-commentBox, +.WebToast-box--altColor, +.content-main .conversations-enabled .expansion-container .inline-reply-tweetbox { + background-color: #EDF4FA; } +.conversations-enabled .inline-reply-caret .caret-inner { + border-bottom-color: #EDF4FA; +} +.top-timeline-tweetbox .timeline-tweet-box .tweet-form.condensed .tweet-box { + color: #4E99D1; +} +/* give tweet box containers an outline using the users link color */ +.home-tweet-box, +.top-timeline-tweetbox .timeline-tweet-box { + border-color: #D2E5F3 !important; +} +/* give tweet boxes an outline using the users link color */ +.tweet-box[contenteditable="true"] { + border-color: rgba(78,153,209,0.25); +} +input:focus, +textarea:focus, +div[contenteditable="true"]:focus, +div[contenteditable="true"].fake-focus { + border-color: #94C1E3; + box-shadow: inset 0 0 0 1px rgba(78, 153, 209, 0.7); +} +.currently-dragging.modal-enabled .modal .tweet-box, +.currently-dragging:not(.modal-enabled) .tweet-content .tweet-box, +.tweet-box[contenteditable="true"]:focus { + border-color: #B8D6EC; + box-shadow: none; +} s, .pretty-link:hover s, .pretty-link:focus s, -.stream-item-activity-me .latest-tweet .tweet-row a:hover s, -.stream-item-activity-me .latest-tweet .tweet-row a:focus s { - color: #67B58E; +.stream-item-activity-notification .latest-tweet .tweet-row a:hover s, +.stream-item-activity-notification .latest-tweet .tweet-row a:focus s { + color: #94C1E3; } .vellip, .vellip:before, .vellip:after, .conversation-module > li:after, -.conversation-module > li:before { - background-color: #67B58E; +.conversation-module > li:before, +.ThreadedConversation-tweet ~ .ThreadedConversation-tweet:before, +.ThreadedConversation-tweet:after, +.ThreadedConversation-viewOther:before, +.ThreadedConversation-unavailableTweet:before, +.ThreadedConversation-unavailableTweet:after { + background-color: #94C1E3; } @@ -830,92 +1224,85 @@ .timelines-navigation .profile-nav-icon:hover, .timelines-navigation .profile-nav-link:focus .profile-nav-icon, .sm-top-tweet, -.metadata a.tweet-geo-text:hover .sm-geo, - - -.discover-item .js-action-card-search:hover .sm-search, -.discover-item .js-action-card-search:focus .sm-search { - background-color: #038543; +.metadata a.tweet-geo-text:hover .sm-geo { + background-color: #4E99D1; } - - -.tweet-action-icons .tweet .tweet-actions .sm-reply, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-reply, -.tweet-action-icons .tweet .tweet-actions .sm-rt, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-rt, -.tweet-action-icons .tweet .tweet-actions .sm-fav, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-fav, -.tweet-action-icons .tweet .tweet-actions .sm-trash, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-trash, -.tweet-action-icons .tweet .tweet-actions .sm-more, .tweet-action-icons .tweet.opened-tweet .tweet-actions .sm-more { - background-color: #67B58E; +.enhanced-mini-profile .mini-profile .profile-summary { + background-image: url(https://pbs.twimg.com/profile_banners/1087064150/1424315468/mobile); } -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-reply, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-rt, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-fav, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-trash, -.persistent-tweet-actions.tweet-action-icons .tweet:hover .tweet-actions .sm-more { - background-color: #67B58E; +.wrapper-profile .profile-card.profile-header .profile-header-inner { + background-image: url(https://pbs.twimg.com/profile_banners/1087064150/1424315468/web); } -.tweet-action-icons .stream .tweet .tweet-actions .sm-reply:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-reply, -.tweet-action-icons .stream .tweet .tweet-actions .sm-rt:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-rt, -.tweet-action-icons .stream .tweet .tweet-actions .sm-fav:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-fav, -.tweet-action-icons .stream .tweet .tweet-actions .sm-trash:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-trash, -.tweet-action-icons .stream .tweet .tweet-actions .sm-more:hover, .tweet-action-icons .stream .tweet .tweet-actions a:focus .sm-more { - background-color: #038543; -} + #global-tweet-dialog .modal-header { + border-bottom: solid 1px rgba(78, 153, 209, .25); + } + #global-tweet-dialog .modal-tweet-form-container { + background-color: #4E99D1; + background: rgba(78, 153, 209, .1); + } -.wrapper.black { - background: url(https://abs.twimg.com/a/1383847355/t1/img/wash-black-30.png); -} -.wrapper.white { - background: url(https://abs.twimg.com/a/1383847355/t1/img/wash-white-30.png); -} + .inline-reply-tweetbox { + background-color: #EDF4FA; + } - </style> <style id="user-style-vyki_e-bg-img" class="js-user-style-bg-img"> body.user-style-vyki_e { background-image: url(https://abs.twimg.com/images/themes/theme18/bg.gif); - background-position: left 40px; + background-position: left 46px; background-attachment: fixed; background-repeat: repeat; background-repeat: no-repeat; background-color: #ACDED6; } +</style> + +<style id="user-style-vyki_e-header-img" class="js-user-style-header-img"> + body.user-style-vyki_e .enhanced-mini-profile .mini-profile .profile-summary { - background-image: url(https://abs.twimg.com/a/1383847355/t1/img/grey_header_web.jpg); + background-image: url(https://pbs.twimg.com/profile_banners/1087064150/1424315468/web); } body.user-style-vyki_e .wrapper-profile .profile-card.profile-header .profile-header-inner { - background-image: url(https://abs.twimg.com/a/1383847355/t1/img/grey_header_web.jpg); + background-image: url(https://pbs.twimg.com/profile_banners/1087064150/1424315468/web); } + .DashboardProfileCard-bg { + background-image: url(https://pbs.twimg.com/profile_banners/1087064150/1424315468/600x200); + } + body.user-style-vyki_e .profile-canopy .bg-img { - background-image: url(https://abs.twimg.com/a/1383847355/t1/img/grey_header_web_retina.jpg); + background-image: url(https://pbs.twimg.com/profile_banners/1087064150/1424315468/web_retina); } </style> -<div role="main" class="permalink stream-uncapped"> +<div class="permalink-container"> + <div role="main" class="permalink light-inline-actions stream-uncapped standard-tweets "> + + <div class="permalink-inner permalink-tweet-container"> <div class="tweet permalink-tweet js-actionable-user js-actionable-tweet js-original-tweet - my-tweet opened-tweet + opened-tweet @@ -928,457 +1315,561 @@ - logged-in preexpanded" data-associated-tweet-id="363116819147538433" -data-feedback-key="stream_status_363116819147538433" -data-tweet-id="363116819147538433" -data-item-id="363116819147538433" - data-screen-name="vyki_e" data-name="Vyki Englert" data-user-id="1087064150" + logged-in + preexpanded" data-associated-tweet-id="363116819147538433" +data-tweet-id="363116819147538433" +data-disclosure-type="" +data-item-id="363116819147538433" +data-permalink-path="/vyki_e/status/363116819147538433" + data-screen-name="vyki_e" data-name="Vyki Englert" data-user-id="1087064150" - data-mentions="peers" - data-you-follow="false" - data-you-block="false"> - <i class="dogear"></i> + data-mentions="peers" - <div class="content clearfix"> - <div class="permalink-header"> - <a class="btn js-thats-you edit-profile-btn js-nav" href="/settings/profile">Edit your profile</a> + data-you-follow="true" + data-follows-you="true" + data-you-block="false" - <a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" href="/vyki_e" data-user-id="1087064150"> - <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/3518892092/39b969d32a10b2437563e246708c8f9d_normal.jpeg" alt=""> - <strong class="fullname js-action-profile-name show-popup-with-id">Vyki Englert</strong> - <span>&rlm;</span><span class="username js-action-profile-name"><s>@</s><b>vyki_e</b></span> - </a> - <small class="time"> - <a href="/vyki_e/status/363116819147538433" class="tweet-timestamp js-permalink js-nav js-tooltip" title="6:59 PM - 1 Aug 13" ><span class="_timestamp js-short-timestamp " data-time="1375408770" data-long-form="true">1 Aug</span></a> -</small> +> - </div> - </div> - <p class="js-tweet-text tweet-text">I&#39;m a sucker for pledges. <a href="/peers" class="twitter-atreply pretty-link" dir="ltr" ><s>@</s><b>Peers</b></a> Pledge <a href="/search?q=%23sharingeconomy&amp;src=hash" data-query-source="hashtag_click" class="twitter-hashtag pretty-link js-nav" dir="ltr" ><s>#</s><b>sharingeconomy</b></a> <a href="http://t.co/T4Sc47KAzh" rel="nofollow" dir="ltr" data-expanded-url="http://www.peers.org/action/peers-pledgea/" class="twitter-timeline-link" target="_blank" title="http://www.peers.org/action/peers-pledgea/" ><span class="tco-ellipsis"></span><span class="invisible">http://www.</span><span class="js-display-url">peers.org/action/peers-p</span><span class="invisible">ledgea/</span><span class="tco-ellipsis"><span class="invisible">&nbsp;</span>…</span></a></p> + <div class="content clearfix"> + <div class="permalink-header"> - <div class="stream-item-footer"> + <div class="follow-bar"> + <div class="user-actions btn-group following not-muting can-dm including " data-user-id="1087064150" + data-screen-name="vyki_e" data-name="Vyki Englert" data-protected="false"> -<div class="context"> -</div> +<div class="dropdown "> + <button type="button" class="user-dropdown dropdown-toggle js-dropdown-toggle js-link js-tooltip btn plain-btn" title="More user actions"> + <span class="user-dropdown-icon Icon Icon--cog Icon--medium"><span class="visuallyhidden">User Actions</span></span> + </button> + <div class="dropdown-menu"> + <div class="dropdown-caret"> + <span class="caret-outer"></span> + <span class="caret-inner"></span> + </div> + <ul> + <li class="mention-text pretty-link not-blocked"><button type="button" class="dropdown-link">Tweet to <span class="u-dir" dir="ltr">@vyki_e</span></button></li> + <li class="dm-text"><button type="button" class="dropdown-link">Send a Direct Message</button></li> + <li class="list-text pretty-link not-blocked"><button type="button" class="dropdown-link">Add or remove from lists&hellip;</button></li> + <li class="dropdown-divider not-blocked"></li> + <li class="mute-user-item pretty-link"><button type="button" class="dropdown-link">Mute</button></li> + <li class="unmute-user-item pretty-link"><button type="button" class="dropdown-link">Unmute</button></li> - - - - -<ul class="tweet-actions js-actions"> - <li class="action-reply-container"> - <a role="button" class="with-icn js-action-reply js-tooltip" data-modal="tweet-reply" href="#"> - <span class="icon sm-reply"></span> - <b>Reply</b> - </a> - </li> - <li class="action-rt-container js-toggle-state js-toggle-rt"> - <a role="button" class="with-icn retweet cannot-retweet js-tooltip" data-modal="tweet-retweet" href="#"> - <span class="icon sm-rt"></span> - <b>Retweet</b> - </a> - <a role="button" class="with-icn undo-retweet js-tooltip" data-modal="tweet-retweet" href="#"> - <span class="icon sm-rt"></span> - <b>Retweeted</b> - </a> - </li> - <li class="action-del-container"> - <a role="button" class="with-icn js-action-del js-tooltip" href="#"> - <span class="icon sm-trash"></span> - <b>Delete</b> - </a> - </li> - <li class="action-fav-container js-toggle-state js-toggle-fav"> - <a role="button" class="with-icn favorite js-tooltip" href="#"> - <span class="icon sm-fav"></span> - <b>Favorite</b> - </a> - <a role="button" class="with-icn unfavorite js-tooltip" href="#"> - <span class="icon sm-fav"></span> - <b>Favorited</b> - </a> - </li> - - <li class="more-tweet-actions"> - <div class="action-more-container"> - <div class="dropdown"> - <button type="button" class="btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip"> - <span class="icon sm-more"></span> - <b>More</b> - </button> - <div class="dropdown-menu"> - <div class="dropdown-caret"> - <div class="caret-outer"></div> - <div class="caret-inner"></div> + <li class="block-text pretty-link not-blocked"><button type="button" class="dropdown-link">Block</button></li> + <li class="unblock-text pretty-link"><button type="button" class="dropdown-link">Unblock</button></li> + <li class="report-text pretty-link"><button type="button" class="dropdown-link">Report</button></li> + <li class="hide-suggestion-text"><button type="button" class="dropdown-link">Hide this suggestion</button></li> + <li class="dropdown-divider is-following"></li> + <li class="retweet-on-text"><button type="button" class="dropdown-link">Turn on Retweets</button></li> + <li class="retweet-off-text"><button type="button" class="dropdown-link">Turn off Retweets</button></li> + <li class="device-notifications-on-text"><button type="button" class="dropdown-link">Turn on mobile notifications</button></li> + <li class="device-notifications-off-text"><button type="button" class="dropdown-link">Turn off mobile notifications</button></li> + <li class="dropdown-divider is-embeddable"></li> + <li class="embed-profile"><button type="button" class="dropdown-link">Embed this Profile</button></li> + </ul> </div> - <ul> - <li class="share-via-email js-share-via-email js-actionShareViaEmail" data-nav="share_tweet"> - <button type="button" class="dropdown-link">Share via email</button> - </li> - <li class="embed-link js-embed-tweet js-actionEmbedTweet" data-nav="embed_tweet"> - <button type="button" class="dropdown-link">Embed Tweet</button> - </li> - </ul> </div> - </div> - </div> -</li> + <button class="user-actions-follow-button js-follow-btn follow-button btn" type="button"> + <span class="button-text follow-text"> + <span class="Icon Icon--follow"></span> Follow + </span> + <span class="button-text following-text"> + Following -</ul> + </span> + <span class="button-text unfollow-text"> + Unfollow - </div> + </span> + <span class="button-text blocked-text">Blocked</span> + <span class="button-text unblock-text">Unblock</span> + <span class="button-text pending-text">Pending</span> + <span class="button-text cancel-text">Cancel</span> +</button> - <div class="permalink-footer"> - -<div class="expanded-content js-tweet-details-dropdown"> </div> - - <div class="js-tweet-details-fixer tweet-details-fixer"> - - - - - - <div class="entities-media-container js-media-container" style="min-height:0px"> </div> - <div class="js-machine-translated-tweet-container"></div> - <div class="js-tweet-stats-container tweet-stats-container "></div> - <div class="client-and-actions"> - <span class="metadata"> - <span title="6:59 PM - 1 Aug 13">6:59 PM - 1 Aug 13</span> + <a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" href="/vyki_e" data-user-id="1087064150"> + <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/568244395007168512/qQVXa2Ql_bigger.jpeg" alt=""> + <strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part>Vyki Englert</strong> + <span>&rlm;</span><span class="username js-action-profile-name" data-aria-label-part><s>@</s><b>vyki_e</b></span> + </a> + <small class="time"> + <a href="/vyki_e/status/363116819147538433" class="tweet-timestamp js-permalink js-nav js-tooltip" title="7:29 AM - 2 Aug 2013" ><span class="_timestamp js-short-timestamp " data-aria-label-part="last" data-time="1375408770" data-time-ms="1375408770000" data-long-form="true">2 Aug 2013</span></a> +</small> + </div> + </div> - </span> - </div> -</div> + <p class="TweetTextSize TweetTextSize--28px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">I&#39;m a sucker for pledges. <a href="/peers" class="twitter-atreply pretty-link js-nav" dir="ltr" ><s>@</s><b>Peers</b></a> Pledge <a href="/hashtag/sharingeconomy?src=hash" data-query-source="hashtag_click" class="twitter-hashtag pretty-link js-nav" dir="ltr" ><s>#</s><b>sharingeconomy</b></a> <a href="http://t.co/T4Sc47KAzh" rel="nofollow" dir="ltr" data-expanded-url="http://www.peers.org/action/peers-pledgea/" class="twitter-timeline-link" target="_blank" title="http://www.peers.org/action/peers-pledgea/" ><span class="tco-ellipsis"></span><span class="invisible">http://www.</span><span class="js-display-url">peers.org/action/peers-p</span><span class="invisible">ledgea/</span><span class="tco-ellipsis"><span class="invisible">&nbsp;</span>…</span></a></p> -<div class="proxy-tweet-container"> + <div class="js-tweet-details-fixer tweet-details-fixer"> + <div class="entities-media-container js-media-container" style="min-height:0px"> + </div> + <div class="js-machine-translated-tweet-container"></div> + <div class="js-tweet-stats-container tweet-stats-container "> + </div> - <div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-profile-popup-actionable js-original-tweet - my-tweet opened-tweet + <div class="client-and-actions"> + <span class="metadata"> + <span>7:29 AM - 2 Aug 2013</span> + </span> +</div> +</div> + <div class="stream-item-footer"> + <div class="ProfileTweet-actionCountList u-hiddenVisually"> + <span class="ProfileTweet-action--reply u-hiddenVisually"></span> + <span class="ProfileTweet-action--retweet u-hiddenVisually"> + <span class="ProfileTweet-actionCount" aria-hidden="true" data-tweet-stat-count="0"> + <span class="ProfileTweet-actionCountForAria" >0 retweets</span> + </span> + </span> + <span class="ProfileTweet-action--favorite u-hiddenVisually"> + <span class="ProfileTweet-actionCount" aria-hidden="true" data-tweet-stat-count="0"> + <span class="ProfileTweet-actionCountForAria" >0 favorites</span> + </span> + </span> + </div> -" -data-feedback-key="stream_status_363116819147538433" -data-tweet-id="363116819147538433" + <div class="ProfileTweet-actionList js-actions " role="group" aria-label="Tweet actions"> + <div class="ProfileTweet-action ProfileTweet-action--reply"> + <button class="ProfileTweet-actionButton u-textUserColorHover js-actionButton js-actionReply" + data-modal="ProfileTweet-reply" + type="button"> + <div class="IconContainer js-tooltip" title="Reply"> + <span class="Icon Icon--reply"></span> + <span class="u-hiddenVisually">Reply</span> + </div> + </button> + </div> -data-item-id="363116819147538433" + <div class="ProfileTweet-action ProfileTweet-action--retweet js-toggleState js-toggleRt"> + <button class="ProfileTweet-actionButton js-actionButton js-actionRetweet" - data-screen-name="vyki_e" data-name="Vyki Englert" data-user-id="1087064150" + data-modal="ProfileTweet-retweet" + type="button"> + <div class="IconContainer js-tooltip" title="Retweet"> + <span class="Icon Icon--retweet"></span> + <span class="u-hiddenVisually">Retweet</span> + </div> + <div class="IconTextContainer"> + <span class="ProfileTweet-actionCount ProfileTweet-actionCount--isZero"> + <span class="ProfileTweet-actionCountForPresentation" aria-hidden="true"></span> + </span> + </div> + </button><button class="ProfileTweet-actionButtonUndo js-actionButton js-actionRetweet" data-modal="ProfileTweet-retweet" type="button"> + <div class="IconContainer js-tooltip" title="Undo retweet"> + <span class="Icon Icon--retweet"></span> + <span class="u-hiddenVisually">Retweeted</span> + </div> + <div class="IconTextContainer"> + <span class="ProfileTweet-actionCount ProfileTweet-actionCount--isZero"> + <span class="ProfileTweet-actionCountForPresentation" aria-hidden="true"></span> + </span> + </div> + </button> + </div> + <div class="ProfileTweet-action ProfileTweet-action--favorite js-toggleState "> + <button class="ProfileTweet-actionButton js-actionButton js-actionFavorite" type="button"> + <div class="IconContainer js-tooltip" title="Favorite"> + <span class="Icon Icon--favorite"></span> + <span class="u-hiddenVisually">Favorite</span> + </div> + <div class="IconTextContainer"> + <span class="ProfileTweet-actionCount ProfileTweet-actionCount--isZero"> + <span class="ProfileTweet-actionCountForPresentation" aria-hidden="true"></span> + </span> + </div> + </button><button class="ProfileTweet-actionButtonUndo u-linkClean js-actionButton js-actionFavorite" type="button"> + <div class="IconContainer js-tooltip" title="Undo favorite"> + <span class="Icon Icon--favorite"></span> + <span class="u-hiddenVisually">Favorited</span> + </div> + <div class="IconTextContainer"> + <span class="ProfileTweet-actionCount ProfileTweet-actionCount--isZero"> + <span class="ProfileTweet-actionCountForPresentation" aria-hidden="true"></span> + </span> + </div> + </button> + </div> + <div class="ProfileTweet-action ProfileTweet-action--more js-more-ProfileTweet-actions"> + <div class="dropdown"> + <button class="ProfileTweet-actionButton u-textUserColorHover dropdown-toggle js-dropdown-toggle" type="button"> + <div class="IconContainer js-tooltip" title="More"> + <span class="Icon Icon--dots"></span> + <span class="u-hiddenVisually">More</span> + </div> + </button> + <div class="dropdown-menu"> + <div class="dropdown-caret"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> + </div> + <ul> + <li class="share-via-dm js-actionShareViaDM" data-nav="share_tweet_dm"> + <button type="button" class="dropdown-link">Share via Direct Message</button> + </li> + <li class="copy-link-to-tweet js-actionCopyLinkToTweet"> + <button type="button" class="dropdown-link">Copy link to Tweet</button> + </li> + <li class="embed-link js-actionEmbedTweet" data-nav="embed_tweet"> + <button type="button" class="dropdown-link">Embed Tweet</button> + </li> + <li class="mute-user-item pretty-link"><button type="button" class="dropdown-link">Mute</button></li> + <li class="unmute-user-item pretty-link"><button type="button" class="dropdown-link">Unmute</button></li> + <li class="block-link js-actionBlock" data-nav="block"> + <button type="button" class="dropdown-link">Block</button> + </li> + <li class="unblock-link js-actionUnblock" data-nav="unblock"> + <button type="button" class="dropdown-link">Unblock</button> + </li> + <li class="report-link js-actionReport" data-nav="report"> + <button type="button" class="dropdown-link"> - data-mentions="peers" + Report + </button> + </li> + </ul> +</div> +</div> + </div> + </div> + </div> - data-you-follow="false" - data-you-block="false"> + <div class="permalink-footer"> - <span class="icon dogear"></span> + <div class="expanded-content js-tweet-details-dropdown"> + </div> - <div class="content"> - - - - - - <div class="stream-item-header"> - <a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" href="/vyki_e" data-user-id="1087064150"> - <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/3518892092/39b969d32a10b2437563e246708c8f9d_normal.jpeg" alt=""> - <strong class="fullname js-action-profile-name show-popup-with-id">Vyki Englert</strong> - <span>&rlm;</span><span class="username js-action-profile-name"><s>@</s><b>vyki_e</b></span> - - </a> - - <small class="time"> - <a href="/vyki_e/status/363116819147538433" class="tweet-timestamp js-permalink js-nav js-tooltip" title="6:59 PM - 1 Aug 13" ><span class="_timestamp js-short-timestamp " data-time="1375408770" data-long-form="true">1 Aug</span></a> -</small> - </div> + </div> + </div> - <p class="js-tweet-text tweet-text">I&#39;m a sucker for pledges. <a href="/peers" class="twitter-atreply pretty-link" dir="ltr" ><s>@</s><b>Peers</b></a> Pledge <a href="/search?q=%23sharingeconomy&amp;src=hash" data-query-source="hashtag_click" class="twitter-hashtag pretty-link js-nav" dir="ltr" ><s>#</s><b>sharingeconomy</b></a> <a href="http://t.co/T4Sc47KAzh" rel="nofollow" dir="ltr" data-expanded-url="http://www.peers.org/action/peers-pledgea/" class="twitter-timeline-link" target="_blank" title="http://www.peers.org/action/peers-pledgea/" ><span class="tco-ellipsis"></span><span class="invisible">http://www.</span><span class="js-display-url">peers.org/action/peers-p</span><span class="invisible">ledgea/</span><span class="tco-ellipsis"><span class="invisible">&nbsp;</span>…</span></a></p> + <div class="inline-reply-tweetbox swift"> + <form class="t1-form tweet-form + condensed + " + method="post" + target="tweet-post-iframe" + data-default-text="@vyki_e @peers " + data-condensed-text="Reply to @vyki_e @peers " + action="//upload.twitter.com/i/tweet/create_with_media.iframe" + enctype="multipart/form-data"> - <div class="stream-item-footer"> + <input type="hidden" value="" name="use_tweet_ui_metrics"> + <img class="inline-reply-user-image avatar size32" src="https://pbs.twimg.com/profile_images/432947308213202944/n_KtAeb0_normal.png" alt=""> + <span class="inline-reply-caret"> + <span class="caret-inner"></span> + </span> + <div class="tweet-content"> + <span class="icon add-photo-icon hidden"></span> + <span class="icon nav-tweet hidden"></span> + <span class="tweet-drag-help tweet-drag-photo-here hidden">Drag photo here</span> + <span class="visuallyhidden" id="tweet-box-reply-to-363116819147538433-label">Tweet text</span> -<div class="context"> -</div> + <div aria-labelledby="tweet-box-reply-to-363116819147538433-label" name="tweet" id="tweet-box-reply-to-363116819147538433" class="tweet-box rich-editor" contenteditable="true" spellcheck="true" role="textbox" + aria-multiline="true" data-placeholder-default="What's happening?" data-placeholder-poll-composer-on="Ask a question...">Reply to @vyki_e @peers&nbsp;</div> - -<ul class="tweet-actions js-actions"> - <li class="action-reply-container"> - <a role="button" class="with-icn js-action-reply js-tooltip" data-modal="tweet-reply" href="#"> - <span class="icon sm-reply"></span> - <b>Reply</b> - </a> - </li> - <li class="action-rt-container js-toggle-state js-toggle-rt"> - <a role="button" class="with-icn retweet cannot-retweet js-tooltip" data-modal="tweet-retweet" href="#"> - <span class="icon sm-rt"></span> - <b>Retweet</b> - </a> - <a role="button" class="with-icn undo-retweet js-tooltip" data-modal="tweet-retweet" href="#"> - <span class="icon sm-rt"></span> - <b>Retweeted</b> - </a> - </li> - <li class="action-del-container"> - <a role="button" class="with-icn js-action-del js-tooltip" href="#"> - <span class="icon sm-trash"></span> - <b>Delete</b> - </a> - </li> - <li class="action-fav-container js-toggle-state js-toggle-fav"> - <a role="button" class="with-icn favorite js-tooltip" href="#"> - <span class="icon sm-fav"></span> - <b>Favorite</b> - </a> - <a role="button" class="with-icn unfavorite js-tooltip" href="#"> - <span class="icon sm-fav"></span> - <b>Favorited</b> - </a> - </li> - - <li class="more-tweet-actions"> - <div class="action-more-container"> - <div class="dropdown"> - <button type="button" class="btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip"> - <span class="icon sm-more"></span> - <b>More</b> - </button> - <div class="dropdown-menu"> - <div class="dropdown-caret"> +<div role="listbox" class="dropdown-menu typeahead"> + <div aria-hidden="true" class="dropdown-caret"> <div class="caret-outer"></div> <div class="caret-inner"></div> </div> - <ul> - <li class="share-via-email js-share-via-email js-actionShareViaEmail" data-nav="share_tweet"> - <button type="button" class="dropdown-link">Share via email</button> - </li> - <li class="embed-link js-embed-tweet js-actionEmbedTweet" data-nav="embed_tweet"> - <button type="button" class="dropdown-link">Embed Tweet</button> - </li> + <div role="presentation" class="dropdown-inner js-typeahead-results"> + <div role="presentation" class="typeahead-recent-searches"> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <ul role="presentation" class="typeahead-items recent-searches-list"> + + <li role="presentation" class="typeahead-item typeahead-recent-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> + </li> </ul> </div> - </div> - </div> -</li> + <div role="presentation" class="typeahead-saved-searches"> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> + <ul role="presentation" class="typeahead-items saved-searches-list"> + <li role="presentation" class="typeahead-item typeahead-saved-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> + </li> + </ul> +</div> + <ul role="presentation" class="typeahead-items typeahead-topics"> + <li role="presentation" class="typeahead-item typeahead-topic-item"> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> + </a> + </li> </ul> -<a class="details with-icn js-details" href="/vyki_e/status/363116819147538433"> - <span class="details-icon js-icon-container"> - </span> - <b> - <span class="expand-stream-item js-view-details"> - <span class="expand-action-wrapper"> - Expand - </span> - </span> - <span class="collapse-stream-item js-hide-details"> - Collapse - </span> - </b> -</a> +<ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - </div> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> +</ul> + <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> +</ul> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> -<div class="expanded-content js-tweet-details-dropdown"> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> </div> - - - - - </div> + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> </div> - - - </div> - </div> - </div> - </div> + <textarea aria-hidden="true" class="tweet-box-shadow" name="status"></textarea> - <div class="inline-reply-tweetbox swift"> - <form class="tweet-form condensed " - method="post" - target="tweet-post-iframe" - data-default-text="@peers " - data-condensed-text="Reply to @peers " - action="//upload.twitter.com/i/tweet/create_with_media.iframe" - enctype="multipart/form-data"> - <input type="hidden" name="post_authenticity_token" class="auth-token"> - <input type="hidden" name="iframe_callback" class="iframe-callback"> - <input type="hidden" name="in_reply_to_status_id" class="in-reply-to-status-id"> - <input type="hidden" name="impression_id" class="impression-id"> - <input type="hidden" name="earned" class="earned"> - - <img class="inline-reply-user-image avatar size32" src="https://pbs.twimg.com/profile_images/3518892092/39b969d32a10b2437563e246708c8f9d_normal.jpeg" alt=""> - <span class="inline-reply-caret"> - <span class="caret-inner"></span> + <div class="thumbnail-container"> + <div class="previews"></div> + <div class="preview template"> + <button type="button" class="preview-overlay dismiss js-dismiss" tabindex="-1"> + <span class="icon dismiss-white"> + <span class="visuallyhidden"> + Dismiss + </span> </span> +</button> - <div class="tweet-content"> - <i class="add-photo-icon hidden"></i> + <button type="button" class="preview-overlay edit js-edit" tabindex="-1"> + Trim +</button> +<div class="preview-overlay duration-badge"></div> - <i class="nav-tweet hidden"></i> - <span class="tweet-drag-help tweet-drag-photo-here hidden">Drag photo here</span> - <span class="tweet-drag-help tweet-or-drag-photo-here hidden">Or drag photo here</span> - <label class="visuallyhidden" for="tweet-box-reply-to-363116819147538433" id="tweet-box-reply-to-363116819147538433-label">Tweet text</label> + <div class="play-button"> + <div class="Icon Icon--mediafill"></div> + <div class="Icon Icon--mediaplay"><span class="u-hiddenVisually">Play</span></div> + </div> + <span class="filename"></span> + </div> + <div class="preview-message"> + <button type="button" class="start-tagging js-open-user-select no-users u-borderUserColorLight u-textUserColor" disabled> + <span class="Icon Icon--me Icon--smallest"></span> + <span class="tagged-users"> + Who's in these photos? + </span> + </button> + </div> + </div> + <div class="photo-tagging-container user-select-container hidden"> + <div class="tagging-dropdown dropdown-menu"> + <div class="dropdown-caret center"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> + </div> + <div class="photo-tagging-controls user-select-controls"> + <label class="t1-label"> + <span class="Icon Icon--search nav-search"></span> + <span class="u-hiddenVisually">Users in this photo</span> + <input class="js-initial-focus" type="text" placeholder="Search and tag up to 10 people"> + </label> + </div> + <div class="typeahead-container"> - <div aria-labelledby="tweet-box-reply-to-363116819147538433-label" id="tweet-box-reply-to-363116819147538433" class="tweet-box rich-editor u-textUserColor u-borderUserColorLight u-borderUserColorLightFocus u-boxShadowUserColorLighterFocus" contenteditable="true" spellcheck="true" role="textbox" - aria-multiline="true">Reply to @peers</div> - <div class="rich-normalizer"></div> - - - -<div role="menu" aria-hidden="true" class="dropdown-menu typeahead "> +<div role="listbox" class="dropdown-menu typeahead"> <div aria-hidden="true" class="dropdown-caret"> <div class="caret-outer"></div> <div class="caret-inner"></div> </div> <div role="presentation" class="dropdown-inner js-typeahead-results"> <div role="presentation" class="typeahead-recent-searches"> - <h4 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent Searches</h4><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> <ul role="presentation" class="typeahead-items recent-searches-list"> <li role="presentation" class="typeahead-item typeahead-recent-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> </li> </ul> </div> <div role="presentation" class="typeahead-saved-searches"> - <h4 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved Searches</h4> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> <ul role="presentation" class="typeahead-items saved-searches-list"> <li role="presentation" class="typeahead-item typeahead-saved-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> </li> </ul> </div> <ul role="presentation" class="typeahead-items typeahead-topics"> <li role="presentation" class="typeahead-item typeahead-topic-item"> - <a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> - <span class="icon generic-search"></span> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> </a> </li> </ul> @@ -1387,114 +1878,175 @@ <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - <a role="menuitem" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> - <img class="avatar size24" alt=""> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> <span class="typeahead-user-item-info"> <span class="fullname"></span> - <span class="js-verified hidden"><span class="icon verified"><span class="visuallyhidden">Verified account</span></span></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> <span class="username"><s>@</s><b></b></span> </span> </a> </li> - <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> </ul> <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> - <li role="presenation" class="typeahead-item typeahead-trend-locations-item"><a role="menuitem" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> </ul> - <ul role="presentation" class="typeahead-items typeahead-context-list"> - - <li role="presentation" class="typeahead-item typeahead-context-item"><a role="menuitem" class="js-nav" href="" data-ds="context_helper" data-search-query="" tabindex="-1"></a></li> -</ul> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users </div> -</div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> - <textarea class="tweet-box-shadow" name="status"></textarea> + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - <div class="thumbnail-container"> - <div class="preview"> - <button type="button" class="dismiss js-dismiss" tabindex="-1"> - <i class="dismiss-white"> - <span class="visuallyhidden"> - Dismiss - </span> - </i> -</button> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> - <span class="filename"></span> + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> + </div> +</div> + + </div> + </div> </div> - <div class="preview-message">Image will appear as a link</div> + + + <div class="CardComposer"> </div> </div> - <div class="toolbar js-toolbar"> + <div class="toolbar"> <div class="tweet-box-extras"> - <div class="photo-selector"> - <button aria-hidden="true" class="btn" type="button" tabindex="-1"> - <i class="tweet-camera"></i> - </button> - <div class="image-selector"> - <input type="hidden" name="media_data_empty" class="file-data"> - <label> - <span class="visuallyhidden">Add Photo</span> - <input type="file" name="media_empty" class="file-input js-tooltip" tabindex="-1" title="Add Photo"> - </label> - <div class="swf-container"></div> - </div> - </div> + <span class="TweetBox-mediaPicker"><div class="photo-selector"> + <button aria-hidden="true" class="btn icon-btn " type="button" tabindex="-1" data-original-title="Add Photo"> + <span class="tweet-camera Icon Icon--camera"></span> + <span class="text add-photo-label u-hideMediumViewport"> + Add photo + </span> + </button> + <div class="image-selector"> + <input type="hidden" name="media_data_empty" class="file-data"> + <div class="multi-photo-data-container hidden"> + </div> + <label class="t1-label"> + <span class="visuallyhidden"> + Add photo + </span> + <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png" + class="file-input " data-original-title="Add photo"> + </label> + <div class="swf-container"></div> + </div> +</div> +</span> - - <div class="geo-picker"> - <button class="btn geo-picker-btn js-tooltip" type="button" tabindex="-1" title="Add location"> - <i class="tweet-geo"><span class="visuallyhidden">Add location</span></i> <span class="caret"></span> - </button> + <div class="geo-picker"> + <button class="btn js-geo-search-trigger geo-picker-btn icon-btn " type="button"> + <span class="Icon Icon--geo"></span> + <span class="text geo-status"> + Add location + </span> + </button> <span class="dropdown-container"></span> - <span class="geo-status"></span> <input type="hidden" name="place_id"> </div> + + + <div class="TweetBoxUploadProgress"> + Uploading + <div class="TweetBoxUploadProgress-bar"> + <div class="TweetBoxUploadProgress-barPosition"></div> + </div> +</div> </div> <div class="tweet-button"> <span class="spinner"></span> <span class="tweet-counter">140</span> - <button class="btn primary-btn tweet-action disabled js-tweet-btn" type="button"> + <button class="btn primary-btn tweet-action disabled tweet-btn js-tweet-btn" type="button" disabled> <span class="button-text tweeting-text"> + <span class="Icon Icon--tweet"></span> Tweet </span> <span class="button-text messaging-text"> + <span class="Icon Icon--dm Icon--small"></span> Send message </span> </button> + </div> </div> </form> </div> <div class="replies-to hidden permalink-inner permalink-replies" data-component-context="replies"> <div class="tweets-wrapper"> - <div id="descendants"> - <div class="stream-container " + <div id="descendants" class="ThreadedDescendants"> + <div class="stream-container " + data-max-position="" data-min-position="" + > - data-cursor="" + <div class="stream-item js-new-items-bar-container"> +</div> + <div class="stream permalink-stream"> + <ol class="stream-items js-navigable-stream" id="stream-items-id"> - > - <div class="stream permalink-stream"> - <ol class="stream-items js-navigable-stream" id="stream-items-id"> @@ -1502,22 +2054,24 @@ -</ol> + + + </ol> <div class="stream-footer "> <div class='timeline-end '> <div class="stream-end"> - <div class="stream-end-inner "> - <i class="bird-etched"></i> + <div class="stream-end-inner"> + <span class="Icon Icon--large Icon--logo"></span> <p class="empty-text"> + </p> - <p><button type='button' class='btn-link back-to-top hidden'>Back to top &uarr;</button></p> </div> </div> @@ -1532,70 +2086,90 @@ <div class="stream-fail-container"> <div class="js-stream-whale-end stream-whale-end stream-placeholder centered-placeholder"> <div class="stream-end-inner"> <h2 class="title">Loading seems to be taking a while.</h2> <p> - Twitter may be over capacity or experiencing a momentary hiccup. <a href="#" class="try-again-after-whale">Try again</a> or visit <a target="_blank" href="http://status.twitter.com">Twitter Status</a> for more information. + Twitter may be over capacity or experiencing a momentary hiccup. <a role="button" href="#" class="try-again-after-whale">Try again</a> or visit <a target="_blank" href="http://status.twitter.com">Twitter Status</a> for more information. </p> </div> </div> </div> <ol class="hidden-replies-container"></ol> - <div class="stream-autoplay-marker"> - <i class="arrow"></i> - <span class="text"></span> - </div> </div> </div> </div> </div> </div> + </div> + + <div class="stream-container suggested-tweet-stream-container dismissible-container u-hidden"> + <div class="stream suggested-tweet-stream permalink-replies"> + <h3 class="promoted-heading">Suggested by Twitter</h3> + <ol class="stream-items suggested-tweet-stream-items js-navigable-stream" id="suggested-stream-items-id"> + </ol> + </div> + </div> + <div class="Trends module trends hidden + Trends--wide + "> + <div class="trends-inner"> + <div class="flex-module trends-container "> + <div class="flex-module-header"> + + <h3><span class="trend-location js-trend-location">false</span></h3> + </div> + <div class="flex-module-inner"> + <ul class="trend-items js-trends"> + </ul> + </div> </div> + </div> +</div> - <div id="related-tweets-container" class="content-main"></div> -<div class="permalink-footer"> - <div class="module site-footer slim-site-footer"> + <div class="permalink-footer"> + <div class="Footer module roaming-module + Footer--slim + "> <div class="flex-module"> <div class="flex-module-inner js-items-container"> - <ul class="clearfix"> - <li class="copyright">&copy; 2013 Twitter</li> - <li><a href="/about">About</a></li> - <li><a href="//support.twitter.com">Help</a></li> - <li><a href="//support.twitter.com/articles/20170451">Ads</a></li> + <ul class="u-cf"> + <li class="Footer-item Footer-copyright copyright">&copy; 2015 Twitter</li> + <li class="Footer-item"><a class="Footer-link" href="/about">About</a></li> + <li class="Footer-item"><a class="Footer-link" href="//support.twitter.com">Help</a></li> + <li class="Footer-item"><a class="Footer-link" href="/tos">Terms</a></li> + <li class="Footer-item"><a class="Footer-link" href="/privacy">Privacy</a></li> + <li class="Footer-item"><a class="Footer-link" href="//support.twitter.com/articles/20170514">Cookies</a></li> + <li class="Footer-item"><a class="Footer-link" href="//support.twitter.com/articles/20170451">Ads info</a></li> </ul> </div> </div> </div> -</div> -<div id="sensitive_flag_dialog" class="modal-container"> + </div> + <div id="sensitive_flag_dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal modal-small draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Flag this media</h3> </div> <div class="modal-body"> <p class="sensitive-title">This has already been marked as containing sensitive content.</p> - <label class="checkbox" for="sensitive-settings-checkbox"> - <input type="checkbox" id="sensitive-settings-checkbox" value="settings"> - Change my settings to warn me before displaying media that may contain sensitive content. - </label> - <label class="checkbox" for="sensitive-illegal-checkbox"> + <label class="t1-label checkbox" for="sensitive-illegal-checkbox"> <input type="checkbox" id="sensitive-illegal-checkbox" value="illegal"> Flag this as containing potentially illegal content. </label> </div> <div class="modal-footer"> @@ -1610,363 +2184,643 @@ </div> <div class="modal-overlay"></div> </div> +</div> + </div> </div> </div> <div class="alert-messages hidden" id="message-drawer"> <div class="message "> <div class="message-inside"> <span class="message-text"></span> - <a class="dismiss" href="#">&times;</a> + <a role="button" class="Icon Icon--close Icon--medium dismiss" href="#"> + <span class="visuallyhidden">Dismiss</span> + </a> </div> </div> </div> - <div class="gallery-overlay"></div> -<div class="gallery-container"> - <div class="gallery-close-target"></div> - <div class="swift-media-gallery"> - <div class="modal-header"> - <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + + +<div class="PermalinkOverlay" id="permalink-overlay"> + <button class="PermalinkOverlay-back PermalinkOverlay-button u-posFixed u-hidden" type="button"> + <span class="Icon Icon--caretLeft Icon--large"></span> + <span class="u-hiddenVisually">Back</span> + </button> + <button class="PermalinkOverlay-close PermalinkOverlay-button u-posFixed js-close" type="button"> + <span class="Icon Icon--close Icon--large"></span> + <span class="u-hiddenVisually">Close</span> + </button> + <div class="PermalinkOverlay-modal"> + <div class="PermalinkOverlay-spinnerContainer"> + <div class="PermalinkOverlay-spinner"></div> + </div> + <div class="PermalinkOverlay-content"> + <div class="PermalinkOverlay-body"></div> + </div> + </div> +</div> + + +<div class="gallery-overlay"></div> +<div class="Gallery"> + <div class="Gallery-closeTarget"></div> + <div class="Gallery-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--large"> + <span class="visuallyhidden">Close</span> + </span> </button> - <a class="gridview grid-action" href="#"> - <span class="icon grid-icon"> - <span class="visuallyhidden"></span> + <div class="Gallery-media"></div> + <div class="GalleryNav GalleryNav--prev"> + <span class="GalleryNav-handle GalleryNav-handle--prev"> + <span class="Icon Icon--caretLeft Icon--large"> + <span class="u-hiddenVisually"> + Previous </span> - </a> - <h2 class="modal-title"></h2> + </span> + </span> </div> - <div class="gallery-media"></div> - <div class="gallery-nav nav-prev"> - <span class="nav-prev-handle"></span> + <div class="GalleryNav GalleryNav--next"> + <span class="GalleryNav-handle GalleryNav-handle--next"> + <span class="Icon Icon--caretRight Icon--large"> + <span class="u-hiddenVisually"> + Next + </span> + </span> + </span> </div> - <div class="gallery-nav nav-next"> - <span class="nav-next-handle"></span> - </div> - <div class="tweet-inverted gallery-tweet"></div> + <div class="GalleryTweet"></div> </div> </div> <div class="modal-overlay"></div> + <div id="profile-hover-container"></div> - <div id="dm_dialog" class="modal-container dm-conversation-list"> + <div id="dm_dialog" class="DMDialog modal-container" style="display: none;"> <div class="close-modal-background-target"></div> - <div class="modal draggable twttr-dialog dm-dialog"> - <div id="dm_dialog_conversation_list" class="modal-content"> + <div class="modal is-autoPosition"> + <div class="DMActivity DMAddParticipants js-ariaDocument"> + <div class="DMActivity-header"> + <a href="/messages" role="button" class="DMActivity-back u-textUserColorHover"> + <span class="Icon Icon--caretLeft"></span><span class="Icon Icon--logo"></span> + <span class="u-hiddenVisually">Back to inbox</span> + </a> - <div class="twttr-dialog-header modal-header"> - <h3>Direct messages</h3> - <div class="dm-toolbar"> - <div class="mark-read js-mark-read"> - <button type="button" class="btn mark-all-read js-mark-all-read js-tooltip " title="Mark all as read"> - <i class="dm-mark-all-read"></i> - </button> - <button type="button" class="btn dm-new-button dm-header-new js-initial-focus ">New message</button> - </div> - <div class="mark-read-confirm js-mark-read-confirm"> - <button type="button" class="btn js-prompt-cancel ">Cancel</button> - <button type="button" class="btn caution-btn js-prompt-ok js-initial-focus ">Mark all as read</button> - </div> + <div class="DMActivity-title js-ariaTitle"> + Add People + </div> - </div> + <div class="DMActivity-toolbar"> - <div class="twttr-dialog-inside"> - <div class="twttr-dialog-body clearfix"> - <div class="dm-error js-dm-error"> - <a href="#" class="js-dismiss"> - <i class="close"></i> - </a> - <span class="dm-error-text"></span> + <button type="button" class="DMActivity-close js-close u-textUserColorHover"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Close</span> + </button> + </div> + </div> + + <div class="DMActivity-notice"> + <div class="DMNotice DMNotice--error DMErrorBar" style="display: none;"> + <div class="DMNotice-message"> <div class="DMErrorBar-text"></div> </div> - <div class="twttr-dialog-content"> - <div class="dm-threads js-dm-threads js-modal-scrollable js-twttr-dialog-not-draggable"> - <ul class="dm-thread-list js-dm-thread-list"> - <div class="dm-placeholder-empty dm-no-messages"> - <p><strong>You don't have any messages yet.</strong></p> - <p>Direct messages are 140 characters, private, and can be sent to any user who follows you on Twitter.</p> + <div class="DMNotice-actions u-emptyHide"></div> + <button type="button" class="DMNotice-dismiss"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Dismiss</span> + </button> </div> - </ul> - </div> + + + </div> + + <div class="DMActivity-container js-ariaBody "> + <div class="DMAddParticipants-spinner"> + <div class="DMSpinner"></div> + </div> + <div class="DMAddParticipants-content DMDialogTypeahead"> + <div class="TokenizedMultiselect-inputContainer"> + <textarea class="TokenizedMultiselect-input twttr-directmessage-input js-initial-focus" rows="1" type="text" placeholder="Enter a name"></textarea> </div> + <div class="DMTypeaheadSuggestionsContainer u-scrollY"></div> + </div> - <div class="twttr-dialog-footer"> - Tip: you can send a message to anyone who follows you. <a href="http://support.twitter.com/groups/31-twitter-basics/topics/109-tweets-messages/articles/14606-what-is-a-direct-message-dm" target="_blank" class="learn-more">Learn more</a> + </div> + + <div class="DMActivity-footer u-emptyHide"> <div class="DMButtonBar"> + <button type="button" class="btn primary-btn DMAddParticipants-done">Done</button> + </div> </div> +</div> + <div class="DMActivity DMCompose js-ariaDocument"> + <div class="DMActivity-header"> + <a href="/messages" role="button" class="DMActivity-back u-textUserColorHover"> + <span class="Icon Icon--caretLeft"></span><span class="Icon Icon--logo"></span> + <span class="u-hiddenVisually">Back to inbox</span> + </a> + + <div class="DMActivity-title js-ariaTitle"> + New Message + </div> + + <div class="DMActivity-toolbar"> + + <button type="button" class="DMActivity-close js-close u-textUserColorHover"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Close</span> + </button> + </div> </div> + + <div class="DMActivity-notice"> + <div class="DMNotice DMNotice--error DMErrorBar" style="display: none;"> + <div class="DMNotice-message"> <div class="DMErrorBar-text"></div> </div> - <div id="dm_dialog_conversation" class="modal-content"> + <div class="DMNotice-actions u-emptyHide"></div> + <button type="button" class="DMNotice-dismiss"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Dismiss</span> + </button> +</div> - <div class="twttr-dialog-header modal-header"> - <h3><a class="js-dm-header-title" href="#">Direct messages</a> › with <span class="dm_dialog_real_name"></span></h3> + </div> + <div class="DMActivity-container js-ariaBody "> + <div class="DMDialogTypeahead"> + <div class="TokenizedMultiselect-inputContainer"> + <textarea class="TokenizedMultiselect-input twttr-directmessage-input js-initial-focus dm-to-input" rows="1" type="text" placeholder="Enter a name"></textarea> + </div> + <div class="DMTypeaheadSuggestionsContainer u-scrollY"></div> + </div> - <div class="twttr-dialog-inside"> - <div class="twttr-dialog-body clearfix"> - <div class="dm-error js-dm-error"> - <a href="#" class="js-dismiss"> - <i class="close"></i> - </a> - <span class="dm-error-text"></span> + </div> + + <div class="DMActivity-footer u-emptyHide"> <div class="DMButtonBar"> + <button type="button" class="btn primary-btn dm-initiate-conversation">Next</button> + </div> </div> - <div class="twttr-dialog-content"> - </div> - <form class="dm-tweetbox tweet-form"> - <div class="tweet-content"> - <label class="visuallyhidden" for="tweet-box-dm-conversation" id="tweet-box-dm-conversation-label">Tweet text</label> - <div id="tweet-box-dm-conversation" aria-labelledby="tweet-box-dm-conversation-label" class="tweet-box rich-editor" contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true"><br></div> - <div class="rich-normalizer"></div> +</div> + + <div class="DMActivity DMConversation js-ariaDocument"> + <div class="DMActivity-header"> + <a href="/messages" role="button" class="DMActivity-back u-textUserColorHover"> + <span class="Icon Icon--caretLeft"></span><span class="Icon Icon--logo"></span> + <span class="u-hiddenVisually">Back to inbox</span> + </a> + + <div class="DMActivity-title js-ariaTitle"> + <div class="DMUpdateAvatar" aria-haspopup="true" data-has-custom-avatar="false"> +<div class="DMPopover DMPopover--center"> + <button class="DMPopover-button" aria-haspopup="true"> + <span class="u-hiddenVisually">Update group photo.</span> + <div class="DMUpdateAvatar-avatar"></div> + + </button> + <div class="DMPopover-content Caret Caret--top Caret--stroked "> + </div> - <div class="tweet-button"> - <span class="spinner"></span> - <span class="tweet-counter">140</span> - <button class="btn tweet-action primary-btn disabled" type="submit"> - <span class="button-text messaging-text"> - Send message - </span> - </button> +</div></div> + <div class="DMUpdateName u-textTruncate"> + <div class="DMUpdateName-name DMConversation-name u-textTruncate"></div> + <div class="DMUpdateName-controls"> + <span class="DMUpdateName-spinner DMSpinner"></span> + <div class="DMUpdateName-form input-group u-hidden"> + <input type="text" class="DMUpdateName-input" aria-label="Edit group name" /> + <button class="DMUpdateName-confirm u-textUserColorLight"> + <span class="Icon Icon--check"></span> + <span class="u-hiddenVisually">Save group name</span> + </button> + </div> </div> - <div class="dm-delete-confirm js-dm-delete-confirm"> - <p>Are you sure you want to delete this message?</p> -<button type="button" class="btn js-prompt-cancel">Cancel</button> -<button type="button" class="btn caution-btn js-prompt-ok js-initial-focus" data-message-id="">Delete message</button> +</div> + </div> + + <div class="DMActivity-toolbar"> + <span class="DMConversationActions dm-conversation-actions u-posRelative u-textLeft"> +<div class="DMPopover DMPopover--left"> + <button class="DMPopover-button" aria-haspopup="true"> + <span class="Icon Icon--dots"></span> + <span class="u-hiddenVisually">More</span> + + </button> + <div class="DMPopover-content Caret Caret--top Caret--stroked "> + <div class="DMConversationActions-content"> + <ul class="DMPopoverMenu u-dropdownUserColor js-focus-on-open" tabindex="-1" role="menu" data-conversation-id="" data-is-oto=""> + <li class="js-actionToggleNotifications"> + <button type="button" class="DMPopoverMenu-button js-actionEnableNotifications ">Turn on notifications</button> + <button type="button" class="DMPopoverMenu-button js-actionDisableNotifications u-hidden">Turn off notifications</button> + </li> + <li class="js-actionDeleteConversation"> + <button type="button" class="DMPopoverMenu-button">Delete conversation</button> + </li> + <li class="js-actionReportConversation"> + <button type="button" class="DMPopoverMenu-button">Flag</button> + </li> +</ul> + </div> + </div> -</form> +</div></span> + + <button type="button" class="DMActivity-close js-close u-textUserColorHover"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Close</span> + </button> </div> </div> + + <div class="DMActivity-notice"> + <div class="DMNotice DMNotice--error DMErrorBar" style="display: none;"> + <div class="DMNotice-message"> <div class="DMErrorBar-text"></div> </div> - <div id="dm_dialog_new" class="modal-content"> + <div class="DMNotice-actions u-emptyHide"></div> + <button type="button" class="DMNotice-dismiss"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Dismiss</span> + </button> +</div> - <div class="twttr-dialog-header modal-header"> - <h3><a href="#">Direct messages</a> › New</h3> - </div> + <div class="DMNotice DMDeleteMessage" style="display: none;"> + <div class="DMNotice-message"> Are you sure you want to delete this message? +</div> + <div class="DMNotice-actions u-emptyHide"> <button type="button" class="DMDeleteMessage-cancel btn">Cancel</button> + <button type="button" class="DMDeleteMessage-confirm caution-btn js-initial-focus btn">Delete</button> +</div> +</div> + <div class="DMNotice DMDeleteConversation" style="display: none;"> + <div class="DMNotice-message"> <span class="DMDeleteConversation-oneToOneMessage"> + This will remove the conversation from your inbox. + </span> + <span class="DMDeleteConversation-groupMessage"> + This will remove the conversation from your inbox and you will not be able to participate. + </span> +</div> + <div class="DMNotice-actions u-emptyHide"> <button type="button" class="DMDeleteConversation-cancel btn">Cancel</button> + <button type="button" class="DMDeleteConversation-confirm caution-btn js-initial-focus btn">Delete</button> +</div> +</div> - <div class="twttr-dialog-inside"> - <div class="twttr-dialog-body clearfix"> - <div class="dm-dialog-content"> - <div class="dm-to"> - <input class="dm-to-input twttr-directmessage-input js-initial-focus" type="text"> - <img class="avatar size24 selected-profile" src="https://twimg0-a.akamaihd.net/sticky/default_profile_images/default_profile_6_mini.png" data-default-img="https://twimg0-a.akamaihd.net/sticky/default_profile_images/default_profile_6_mini.png" alt=""> + <div class="DMNotice DMReportMessage" style="display: none;"> + <div class="DMNotice-message"> You are about to delete this message. +</div> + <div class="DMNotice-actions u-emptyHide"> <button type="button" class="DMReportMessage-cancel btn">Cancel</button> + <button type="button" class="DMReportMessage-spam btn">Flag as spam</button> + <button type="button" class="DMReportMessage-abuse btn">Mark as abusive</button> +</div> +</div> + <div class="DMNotice DMReportConversation" style="display: none;"> + <div class="DMNotice-message"> <span class="DMReportConversation-oneToOneMessage"> + This conversation will be deleted and this account cannot message you until you message them again. + </span> + <span class="DMReportConversation-groupMessage"> + The conversation will be deleted and you will not be able to participate in this group. + </span> +</div> + <div class="DMNotice-actions u-emptyHide"> <button type="button" class="DMReportConversation-cancel btn">Cancel</button> + <button type="button" class="DMReportConversation-spam btn">Flag as spam</button> + <button type="button" class="DMReportConversation-abuse btn">Mark as abusive</button> +</div> +</div> -<div role="menu" aria-hidden="true" class="dropdown-menu typeahead "> - <div aria-hidden="true" class="dropdown-caret"> - <div class="caret-outer"></div> - <div class="caret-inner"></div> </div> - <div role="presentation" class="dropdown-inner js-typeahead-results"> - <div role="presentation" class="typeahead-recent-searches"> - <h4 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent Searches</h4><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> - <ul role="presentation" class="typeahead-items recent-searches-list"> - <li role="presentation" class="typeahead-item typeahead-recent-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"><span class="icon generic-search"></span></a> - </li> - </ul> -</div> + <div class="DMActivity-container js-ariaBody DMConversation-container"> + <div class="DMConversation-newMessagesPillContainer u-table"> + <div class="DMConversation-newMessagesPill is-hidden"> + <span class="Icon Icon--arrowDown"></span> New messages + </div> + </div> + <div class="DMConversation-scrollContainer js-modal-scrollable js-twttr-dialog-not-draggable"> + <span class="DMConversation-spinner DMSpinner"></span> + <div class="DMConversation-content dm-convo js-dm-conversation"></div> + </div> - <div role="presentation" class="typeahead-saved-searches"> - <h4 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved Searches</h4> - <ul role="presentation" class="typeahead-items saved-searches-list"> + </div> - <li role="presentation" class="typeahead-item typeahead-saved-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"><span class="icon generic-search"></span></a> - </li> - </ul> + <div class="DMActivity-footer u-emptyHide"> <div class="DMConversation-composer u-bgUserColorLightest"> + <form class="DMComposer tweet-form" target="dm-post-iframe" action="//upload.twitter.com/i/media/upload.iframe" method="post" enctype="multipart/form-data"> + <input type="hidden" name="authenticity_token" class="auth-token"> + + <div class="DMComposer-container u-borderUserColorLighter"> + <div class="DMComposer-attachment"> + <div class="DMComposer-tweet"> + <div class="modal-tweet"></div> +<button class="DMComposer-discardTweet"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Remove Tweet attachment</span> +</button> + + </div> + + <div class="DMComposer-media"> + <div class="thumbnail-container"> + <div class="previews"></div> + <div class="preview template"> + <button type="button" class="preview-overlay dismiss js-dismiss" tabindex="-1"> + <span class="icon dismiss-white"> + <span class="visuallyhidden"> + Dismiss + </span> + </span> +</button> + + <span class="filename"></span> + </div> </div> - <ul role="presentation" class="typeahead-items typeahead-topics"> + </div> + </div> - <li role="presentation" class="typeahead-item typeahead-topic-item"> - <a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> - <span class="icon generic-search"></span> - </a> - </li> -</ul> + <div class="DMComposer-editor tweet-box rich-editor js-initial-focus is-showPlaceholder " data-default-placeholder="Start a new message" data-attachment-placeholder="Add a comment..." id="tweet-box-dm-conversation" aria-label="Direct message text" contenteditable="true" spellcheck="true" role="textbox" aria-multiline="false"></div> + </div> + <div class="DMComposer-mediaPicker"> + <div class="photo-selector"> + <button aria-hidden="true" class="btn icon-btn js-tooltip" type="button" tabindex="-1" data-original-title="Add Photo"> + <span class="tweet-camera Icon Icon--camera"></span> + <span class="text add-photo-label u-hideMediumViewport u-hiddenVisually"> + Add photo + </span> + </button> + <div class="image-selector"> + <input type="hidden" name="media_data_empty" class="file-data"> + <div class="multi-photo-data-container hidden"> + </div> + <label class="t1-label"> + <span class="visuallyhidden"> + Add photo + </span> + <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png" + class="file-input js-tooltip" data-original-title="Add photo"> + </label> + <div class="swf-container"></div> + </div> +</div> + </div> + <div class="DMComposer-send"> + <button class="btn tweet-action primary-btn messaging tweet-btn disabled" type="button"> + <span class="button-text messaging-text">Send</span> + </button> + </div> +</form> -<ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + </div> - <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + <div class="DMConversation-readonly"> + <div class="twttr-dialog-footer"> + You can no longer send messages to this person. <a href="https://support.twitter.com/articles/14606#faq" target="_blank" class="learn-more">Learn more</a> + </div> + </div> +</div> +</div> - <a role="menuitem" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> - <img class="avatar size24" alt=""> - <span class="typeahead-user-item-info"> - <span class="fullname"></span> - <span class="js-verified hidden"><span class="icon verified"><span class="visuallyhidden">Verified account</span></span></span> - <span class="username"><s>@</s><b></b></span> - </span> - </a> - </li> - <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> -</ul> + <div class="DMActivity DMActivity--open DMInbox js-ariaDocument"> + <div class="DMActivity-header"> - <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> + <div class="DMActivity-title js-ariaTitle"> + Direct Messages + </div> - <li role="presenation" class="typeahead-item typeahead-trend-locations-item"><a role="menuitem" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> -</ul> - <ul role="presentation" class="typeahead-items typeahead-context-list"> + <div class="DMActivity-toolbar"> + <button type="button" class="DMInbox-toolbar btn mark-all-read js-tooltip small" title="Mark all as read"> + <span class="Icon Icon--markAllRead"></span> + <span class="u-hiddenVisually">Mark all as read</span> + </button> + <button type="button" class="DMInbox-toolbar DMComposeButton btn primary-btn dm-new-button js-initial-focus small"> + <span class="Icon Icon--dmCompose"></span> + <span class="u-hideMediumViewport">New message</span> + </button> - <li role="presentation" class="typeahead-item typeahead-context-item"><a role="menuitem" class="js-nav" href="" data-ds="context_helper" data-search-query="" tabindex="-1"></a></li> -</ul> + <button type="button" class="DMActivity-close js-close u-textUserColorHover"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Close</span> + </button> + </div> </div> + + <div class="DMActivity-notice"> + <div class="DMNotice DMNotice--error DMErrorBar" style="display: none;"> + <div class="DMNotice-message"> <div class="DMErrorBar-text"></div> </div> + <div class="DMNotice-actions u-emptyHide"></div> + <button type="button" class="DMNotice-dismiss"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Dismiss</span> + </button> +</div> - </div> + <div class="DMNotice DMNotice--explicitDismiss DMNotificationsPermissionRequest" style="display: none;"> + <div class="DMNotice-message"> Would you like to receive notifications for new messages? +</div> + <div class="DMNotice-actions u-emptyHide"> <button type="button" class="DMNotificationsPermissionRequest-later btn js-prompt-later">Maybe later</button> + <button type="button" class="DMNotificationsPermissionRequest-accept btn js-prompt-accept">Enable notifications</button> +</div> +</div> - <div class="dm-convo-placeholder"> - <div class="dm-error js-dm-error"> - <a href="#" class="js-dismiss"> - <i class="close"></i> - </a> - <span class="dm-error-text"></span> + + </div> + + <div class="DMActivity-container js-ariaBody "> + <div class="DMInbox-content u-scrollY"> + <ul class="DMInbox-conversations"></ul> + <div class="DMInbox-spinner"> + <div class="DMSpinner"></div> + </div> + <div class="DMInbox-empty"> + <div class="DMEmptyState"> + <h2 class="DMEmptyState-header"> + Talk privately + </h2> + + <div class="DMEmptyState-details"> + <p><strong>You don't have any messages yet.</strong></p> + </div> + + <div class="DMEmptyState-cta"> + <button type="button" class="DMComposeButton btn primary-btn dm-new-button"> + <span class="Icon Icon--dm Icon--small"></span> + Send a Direct Message + </button> + </div> </div> - </div> </div> + </div> - <form class="dm-tweetbox tweet-form"> - <div class="tweet-content"> - <label class="visuallyhidden" for="tweet-box-dm-new-conversation" id="tweet-box-dm-new-conversation-label">Tweet text</label> - <div id="tweet-box-dm-new-conversation" aria-labelledby="tweet-box-dm-new-conversation-label" class="tweet-box rich-editor" contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true"><br></div> - <div class="rich-normalizer"></div> </div> - <div class="tweet-button"> - <span class="spinner"></span> - <span class="tweet-counter">140</span> - <button class="btn tweet-action primary-btn disabled" type="submit"> - <span class="button-text messaging-text"> - Send message - </span> + + <div class="DMActivity-footer u-emptyHide"></div> +</div> + + <div class="DMActivity DMViewParticipants js-ariaDocument"> + <div class="DMActivity-header"> + <a href="/messages" role="button" class="DMActivity-back u-textUserColorHover"> + <span class="Icon Icon--caretLeft"></span><span class="Icon Icon--logo"></span> + <span class="u-hiddenVisually">Back to inbox</span> + </a> + + <div class="DMActivity-title js-ariaTitle"> + In this group + + </div> + + <div class="DMActivity-toolbar"> + + <button type="button" class="DMActivity-close js-close u-textUserColorHover"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Close</span> + </button> + </div> + </div> + + <div class="DMActivity-notice"> + <div class="DMNotice DMNotice--error DMErrorBar" style="display: none;"> + <div class="DMNotice-message"> <div class="DMErrorBar-text"></div> +</div> + <div class="DMNotice-actions u-emptyHide"></div> + <button type="button" class="DMNotice-dismiss"> + <span class="Icon Icon--close"></span> + <span class="u-hiddenVisually">Dismiss</span> </button> +</div> + + </div> - <div class="dm-delete-confirm js-dm-delete-confirm"> - <p>Are you sure you want to delete this message?</p> -<button type="button" class="btn js-prompt-cancel">Cancel</button> -<button type="button" class="btn caution-btn js-prompt-ok js-initial-focus" data-message-id="">Delete message</button> + <div class="DMActivity-container js-ariaBody "> + <div class="DMViewParticipants-spinner DMSpinner"></div> + <div class="DMViewParticipants-content u-scrollY"></div> + </div> -</form> + + <div class="DMActivity-footer u-emptyHide"> <div class="DMButtonBar"> + <button class="DMViewParticipants-done btn primary-btn js-initial-focus">Done</button> </div> +</div> +</div> + </div> </div> - <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> +<div class="modal-container dm-media-container"> + <div class="close-modal-background-target"></div> + <div class="modal draggable dm-media"> + <div class="modal-header"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> + <h2 class="modal-title">Photo</h2> + </div> + <div class="dm-media-preview"></div> </div> </div> + + <div id="global-tweet-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> - <div class="modal-header"> <h3 class="modal-title"></h3> </div> + <div class="tweet-loading"> + <div class="spinner-bigger"></div> +</div> + <div class="modal-body modal-tweet"></div> + <div class="modal-tweet-form-container"> + <form class="t1-form tweet-form - <div class="modal-body"> - <form class="tweet-form " + " method="post" target="tweet-post-iframe" action="//upload.twitter.com/i/tweet/create_with_media.iframe" enctype="multipart/form-data"> - <input type="hidden" name="post_authenticity_token" class="auth-token"> - <input type="hidden" name="iframe_callback" class="iframe-callback"> - <input type="hidden" name="in_reply_to_status_id" class="in-reply-to-status-id"> - <input type="hidden" name="impression_id" class="impression-id"> - <input type="hidden" name="earned" class="earned"> - <img class="inline-reply-user-image avatar size32" src="https://pbs.twimg.com/profile_images/3518892092/39b969d32a10b2437563e246708c8f9d_normal.jpeg" alt=""> + <input type="hidden" value="" name="use_tweet_ui_metrics"> + <img class="inline-reply-user-image avatar size32" src="https://pbs.twimg.com/profile_images/432947308213202944/n_KtAeb0_normal.png" alt=""> <span class="inline-reply-caret"> <span class="caret-inner"></span> </span> <div class="tweet-content"> - <i class="add-photo-icon hidden"></i> + <span class="icon add-photo-icon hidden"></span> - <i class="nav-tweet hidden"></i> + <span class="icon nav-tweet hidden"></span> <span class="tweet-drag-help tweet-drag-photo-here hidden">Drag photo here</span> - <span class="tweet-drag-help tweet-or-drag-photo-here hidden">Or drag photo here</span> - <label class="visuallyhidden" for="tweet-box-global" id="tweet-box-global-label">Tweet text</label> + <span class="visuallyhidden" id="tweet-box-global-label">Tweet text</span> - <div aria-labelledby="tweet-box-global-label" id="tweet-box-global" class="tweet-box rich-editor " contenteditable="true" spellcheck="true" role="textbox" - aria-multiline="true"></div> - <div class="rich-normalizer"></div> + <div aria-labelledby="tweet-box-global-label" name="tweet" id="tweet-box-global" class="tweet-box rich-editor" contenteditable="true" spellcheck="true" role="textbox" + aria-multiline="true" data-placeholder-default="What's happening?" data-placeholder-poll-composer-on="Ask a question..."></div> -<div role="menu" aria-hidden="true" class="dropdown-menu typeahead "> +<div role="listbox" class="dropdown-menu typeahead"> <div aria-hidden="true" class="dropdown-caret"> <div class="caret-outer"></div> <div class="caret-inner"></div> </div> <div role="presentation" class="dropdown-inner js-typeahead-results"> <div role="presentation" class="typeahead-recent-searches"> - <h4 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent Searches</h4><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> <ul role="presentation" class="typeahead-items recent-searches-list"> <li role="presentation" class="typeahead-item typeahead-recent-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> </li> </ul> </div> <div role="presentation" class="typeahead-saved-searches"> - <h4 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved Searches</h4> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> <ul role="presentation" class="typeahead-items saved-searches-list"> <li role="presentation" class="typeahead-item typeahead-saved-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> </li> </ul> </div> <ul role="presentation" class="typeahead-items typeahead-topics"> <li role="presentation" class="typeahead-item typeahead-topic-item"> - <a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> - <span class="icon generic-search"></span> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> </a> </li> </ul> @@ -1975,162 +2829,388 @@ <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - <a role="menuitem" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> - <img class="avatar size24" alt=""> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> <span class="typeahead-user-item-info"> <span class="fullname"></span> - <span class="js-verified hidden"><span class="icon verified"><span class="visuallyhidden">Verified account</span></span></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> <span class="username"><s>@</s><b></b></span> </span> </a> </li> - <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> </ul> <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> - <li role="presenation" class="typeahead-item typeahead-trend-locations-item"><a role="menuitem" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> </ul> - <ul role="presentation" class="typeahead-items typeahead-context-list"> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> - <li role="presentation" class="typeahead-item typeahead-context-item"><a role="menuitem" class="js-nav" href="" data-ds="context_helper" data-search-query="" tabindex="-1"></a></li> -</ul> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> + + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> </div> </div> - <textarea class="tweet-box-shadow" name="status"></textarea> + <textarea aria-hidden="true" class="tweet-box-shadow" name="status"></textarea> <div class="thumbnail-container"> - <div class="preview"> - <button type="button" class="dismiss js-dismiss" tabindex="-1"> - <i class="dismiss-white"> + <div class="previews"></div> + <div class="preview template"> + <button type="button" class="preview-overlay dismiss js-dismiss" tabindex="-1"> + <span class="icon dismiss-white"> <span class="visuallyhidden"> Dismiss </span> - </i> + </span> </button> + <button type="button" class="preview-overlay edit js-edit" tabindex="-1"> + Trim +</button> +<div class="preview-overlay duration-badge"></div> + + <div class="play-button"> + <div class="Icon Icon--mediafill"></div> + <div class="Icon Icon--mediaplay"><span class="u-hiddenVisually">Play</span></div> + </div> <span class="filename"></span> </div> - <div class="preview-message">Image will appear as a link</div> + <div class="preview-message"> + <button type="button" class="start-tagging js-open-user-select no-users u-borderUserColorLight u-textUserColor" disabled> + <span class="Icon Icon--me Icon--smallest"></span> + <span class="tagged-users"> + Who's in these photos? + </span> + </button> + </div> </div> + <div class="photo-tagging-container user-select-container hidden"> + <div class="tagging-dropdown dropdown-menu"> + <div class="dropdown-caret center"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> + </div> + <div class="photo-tagging-controls user-select-controls"> + <label class="t1-label"> + <span class="Icon Icon--search nav-search"></span> + <span class="u-hiddenVisually">Users in this photo</span> + <input class="js-initial-focus" type="text" placeholder="Search and tag up to 10 people"> + </label> + </div> + <div class="typeahead-container"> + + +<div role="listbox" class="dropdown-menu typeahead"> + <div aria-hidden="true" class="dropdown-caret"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> </div> + <div role="presentation" class="dropdown-inner js-typeahead-results"> + <div role="presentation" class="typeahead-recent-searches"> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <ul role="presentation" class="typeahead-items recent-searches-list"> - <div class="toolbar js-toolbar"> - <div class="tweet-box-extras"> + <li role="presentation" class="typeahead-item typeahead-recent-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> + </li> + </ul> +</div> - <div class="photo-selector"> - <button aria-hidden="true" class="btn" type="button" tabindex="-1"> - <i class="tweet-camera"></i> - </button> - <div class="image-selector"> - <input type="hidden" name="media_data_empty" class="file-data"> - <label> - <span class="visuallyhidden">Add Photo</span> - <input type="file" name="media_empty" class="file-input js-tooltip" tabindex="-1" title="Add Photo"> - </label> - <div class="swf-container"></div> + <div role="presentation" class="typeahead-saved-searches"> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> + <ul role="presentation" class="typeahead-items saved-searches-list"> + + <li role="presentation" class="typeahead-item typeahead-saved-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> + </li> + </ul> +</div> + + <ul role="presentation" class="typeahead-items typeahead-topics"> + + <li role="presentation" class="typeahead-item typeahead-topic-item"> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> + </a> + </li> +</ul> + + + + + +<ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> +</ul> + + <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> + + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> +</ul> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> + + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> + </div> +</div> + + </div> </div> </div> - <div class="geo-picker"> - <button class="btn geo-picker-btn js-tooltip" type="button" tabindex="-1" title="Add location"> - <i class="tweet-geo"><span class="visuallyhidden">Add location</span></i> <span class="caret"></span> - </button> + <div class="CardComposer"> + </div> + + </div> + + <div class="toolbar"> + <div class="tweet-box-extras"> + + <span class="TweetBox-mediaPicker"><div class="photo-selector"> + <button aria-hidden="true" class="btn icon-btn " type="button" tabindex="-1" data-original-title="Add Photo"> + <span class="tweet-camera Icon Icon--camera"></span> + <span class="text add-photo-label u-hideMediumViewport"> + Add photo + </span> + </button> + <div class="image-selector"> + <input type="hidden" name="media_data_empty" class="file-data"> + <div class="multi-photo-data-container hidden"> + </div> + <label class="t1-label"> + <span class="visuallyhidden"> + Add photo + </span> + <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png" + class="file-input " data-original-title="Add photo"> + </label> + <div class="swf-container"></div> + </div> +</div> +</span> + + <div class="geo-picker"> + <button class="btn js-geo-search-trigger geo-picker-btn icon-btn " type="button"> + <span class="Icon Icon--geo"></span> + <span class="text geo-status"> + Add location + </span> + </button> <span class="dropdown-container"></span> - <span class="geo-status"></span> <input type="hidden" name="place_id"> </div> + + + <div class="TweetBoxUploadProgress"> + Uploading + <div class="TweetBoxUploadProgress-bar"> + <div class="TweetBoxUploadProgress-barPosition"></div> + </div> +</div> </div> <div class="tweet-button"> <span class="spinner"></span> <span class="tweet-counter">140</span> - <button class="btn primary-btn tweet-action disabled js-tweet-btn" type="button"> + <button class="btn primary-btn tweet-action disabled tweet-btn js-tweet-btn" type="button" disabled> <span class="button-text tweeting-text"> + <span class="Icon Icon--tweet"></span> Tweet </span> <span class="button-text messaging-text"> + <span class="Icon Icon--dm Icon--small"></span> Send message </span> </button> + </div> </div> </form> - </div> - - <div class="modal-footer modal-tweet"></div> + </div> </div> </div> </div> <div id="goto-user-dialog" class="modal-container"> <div class="modal modal-small draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Go to a person's profile</h3> </div> <div class="modal-body"> <div class="modal-inner"> - <form class="goto-user-form"> - <input class="input-block username-input" type="text" placeholder="Start typing a name to jump to a profile"> + <form class="t1-form goto-user-form"> + <input class="input-block username-input" type="text" placeholder="Start typing a name to jump to a profile" aria-label="User"> -<div role="menu" aria-hidden="true" class="dropdown-menu typeahead "> +<div role="listbox" class="dropdown-menu typeahead"> <div aria-hidden="true" class="dropdown-caret"> <div class="caret-outer"></div> <div class="caret-inner"></div> </div> <div role="presentation" class="dropdown-inner js-typeahead-results"> <div role="presentation" class="typeahead-recent-searches"> - <h4 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent Searches</h4><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> <ul role="presentation" class="typeahead-items recent-searches-list"> <li role="presentation" class="typeahead-item typeahead-recent-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> </li> </ul> </div> <div role="presentation" class="typeahead-saved-searches"> - <h4 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved Searches</h4> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> <ul role="presentation" class="typeahead-items saved-searches-list"> <li role="presentation" class="typeahead-item typeahead-saved-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> </li> </ul> </div> <ul role="presentation" class="typeahead-items typeahead-topics"> <li role="presentation" class="typeahead-item typeahead-topic-item"> - <a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> - <span class="icon generic-search"></span> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> </a> </li> </ul> @@ -2139,30 +3219,80 @@ <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - <a role="menuitem" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> - <img class="avatar size24" alt=""> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> <span class="typeahead-user-item-info"> <span class="fullname"></span> - <span class="js-verified hidden"><span class="icon verified"><span class="visuallyhidden">Verified account</span></span></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> <span class="username"><s>@</s><b></b></span> </span> </a> </li> - <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> </ul> <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> - <li role="presenation" class="typeahead-item typeahead-trend-locations-item"><a role="menuitem" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> </ul> - <ul role="presentation" class="typeahead-items typeahead-context-list"> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> - <li role="presentation" class="typeahead-item typeahead-context-item"><a role="menuitem" class="js-nav" href="" data-ds="context_helper" data-search-query="" tabindex="-1"></a></li> -</ul> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> + + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> </div> </div> </form> </div> @@ -2171,293 +3301,258 @@ </div> </div> </div> - <div id="retweet-tweet-dialog" class="modal-container"> + <div id="retweet-tweet-dialog" class="RetweetDialog modal-container"> <div class="close-modal-background-target"></div> - <div class="modal draggable"> + <div class="RetweetDialog-modal modal draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Retweet this to your followers?</h3> </div> - <div class="modal-body modal-tweet"></div> - <div class="modal-footer"> - <button class="btn cancel-action js-close">Cancel</button> - <button class="btn primary-btn retweet-action">Retweet</button> - </div> + <form class="t1-form tweet-form condensed RetweetDialog-tweetForm isWithoutComment" data-condensed-text="Add a comment..."> + <div class="RetweetDialog-commentBox"> + <div class="tweet-content"> + <div aria-labelledby="-label" id="" class="tweet-box rich-editor" + contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true"></div> + </div> + + + +<div role="listbox" class="dropdown-menu typeahead"> + <div aria-hidden="true" class="dropdown-caret"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> + </div> + <div role="presentation" class="dropdown-inner js-typeahead-results"> + <div role="presentation" class="typeahead-recent-searches"> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <ul role="presentation" class="typeahead-items recent-searches-list"> + + <li role="presentation" class="typeahead-item typeahead-recent-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> + </li> + </ul> +</div> + + <div role="presentation" class="typeahead-saved-searches"> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> + <ul role="presentation" class="typeahead-items saved-searches-list"> + + <li role="presentation" class="typeahead-item typeahead-saved-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> + </li> + </ul> +</div> + + <ul role="presentation" class="typeahead-items typeahead-topics"> + + <li role="presentation" class="typeahead-item typeahead-topic-item"> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> + </a> + </li> +</ul> + + + + + +<ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> +</ul> + + <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> + + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> +</ul> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> + + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> + </div> +</div> + + </div> + + <div class="RetweetDialog-footer u-cf"> + <div class="tweet-loading"> + <div class="spinner-bigger"></div> +</div> + + <div class="RetweetDialog-tweet modal-body modal-tweet tweet"></div> + <div class="tweet-button"> + <span class="spinner"></span> + <span class="RetweetDialog-counter tweet-counter">140</span> + <button class="btn primary-btn retweet-action" type="button"> + <span class="RetweetDialog-retweetActionLabel"> + <span class="Icon Icon--retweet"></span> + Retweet + </span> + <span class="RetweetDialog-tweetActionLabel"> + <span class="Icon Icon--tweet"></span> + Tweet + </span> + </button> + </div> + </div> + </form> </div> </div> </div> + <div id="delete-tweet-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Are you sure you want to delete this Tweet?</h3> </div> + <div class="tweet-loading"> + <div class="spinner-bigger"></div> +</div> + <div class="modal-body modal-tweet"></div> <div class="modal-footer"> <button class="btn cancel-action js-close">Cancel</button> <button class="btn primary-btn delete-action">Delete</button> </div> </div> </div> </div> - - -<div id="keyboard-shortcut-dialog" class="modal-container"> + <div id="quick-promote-dialog" class="QuickPromoteDialog modal-container"> <div class="close-modal-background-target"></div> - <div class="modal modal-large draggable"> + <div class="modal draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--large"> + <span class="visuallyhidden">Close</span> + </span> </button> - - <div class="modal-header"> - <h3 class="modal-title">Keyboard shortcuts</h3> + <h3 class="modal-title">Promote this Tweet</h3> </div> - - <div class="modal-body"> - - <div class="keyboard-shortcuts clearfix" id="keyboard-shortcut-menu"> - <p class="visuallyhidden"> - Note: To use these shortcuts, users of screen readers may need to toggle off the virtual navigation. - </p> - <table class="modal-table" summary="Shortcuts for common actions."> - <thead> - <tr> - <th colspan="2">Actions</th> - </tr> - </thead> - <tbody> - <tr> - <td class="shortcut"> - <b class="sc-key">n</b> - </td> - <td class="shortcut-label">New Tweet</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">f</b> - </td> - <td class="shortcut-label">Favorite</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">r</b> - </td> - <td class="shortcut-label">Reply</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">t</b> - </td> - <td class="shortcut-label">Retweet</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">m</b> - </td> - <td class="shortcut-label">Direct message</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">b</b> - </td> - <td class="shortcut-label">Block User</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">u</b> - </td> - <td class="shortcut-label">Unblock User</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">Enter</b> - </td> - <td class="shortcut-label">Open Tweet details</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">l</b> - </td> - <td class="shortcut-label">Close all open Tweets</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">/</b> - </td> - <td class="shortcut-label">Search</td> - </tr> - </tbody> - </table> - <table class="modal-table" summary="Shortcuts for navigating between items in timelines."> - <thead> - <tr> - <th colspan="2">Navigation</th> - </tr> - </thead> - <tbody> - <tr> - <td class="shortcut"> - <b class="sc-key">?</b> - </td> - <td class="shortcut-label">This menu</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">j</b> - </td> - <td class="shortcut-label">Next Tweet</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">k</b> - </td> - <td class="shortcut-label">Previous Tweet</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">Space</b> - </td> - <td class="shortcut-label">Page down</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">.</b> - </td> - <td class="shortcut-label">Load new Tweets</td> - </tr> - </tbody> - </table> - <table class="modal-table" summary="Shortcuts for navigating to different timelines or pages."> - <thead> - <tr> - <th colspan="2">Timelines</th> - </tr> - </thead> - <tbody> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">h</b> - </td> - <td class="shortcut-label">Home</td> - </tr> - - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">c</b> - </td> - <td class="shortcut-label">Connect</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">a</b> - </td> - <td class="shortcut-label">Activity</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">r</b> - </td> - <td class="shortcut-label">Mentions</td> - </tr> - - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">d</b> - </td> - <td class="shortcut-label">Discover</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">p</b> - </td> - <td class="shortcut-label">Profile</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">f</b> - </td> - <td class="shortcut-label">Favorites</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">l</b> - </td> - <td class="shortcut-label">Lists</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">m</b> - </td> - <td class="shortcut-label">Messages</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">s</b> - </td> - <td class="shortcut-label">Settings</td> - </tr> - <tr> - <td class="shortcut"> - <b class="sc-key">g</b> <b class="sc-key">u</b> - </td> - <td class="shortcut-label">Go to user...</td> - </tr> - </tbody> - </table> + <div class="quick-promote-view-container"> + <div class="media"> + <iframe + class="quick-promote-iframe js-initial-focus" + scrolling="no" + frameborder="0" + src=""> + </iframe> + </div> </div> </div> </div> </div> </div> - - <div id="block-user-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> - <h3 class="modal-title">Are you sure you want to block this user?</h3> + <h3 class="modal-title">Block</h3> </div> + <div class="tweet-loading"> + <div class="spinner-bigger"></div> +</div> + <div class="modal-body modal-tweet"></div> <div class="modal-footer"> <button class="btn cancel-action js-close">Cancel</button> <button class="btn primary-btn block-action">Block</button> @@ -2469,39 +3564,61 @@ + <div id="geo-disabled-dropdown"> + <div class="GeoSearch-dropdownMenu dropdown-menu" tabindex="-1"> + <div class="dropdown-caret"> + <span class="caret-outer"></span> + <span class="caret-inner"></span> + </div> + <ul> + <li class="geo-not-enabled-yet"> + <h2>Add a location to your Tweets</h2> + <p> + When you tweet with a location, Twitter stores that location.&#32; + You can switch location on/off before each Tweet and always have the option to delete your location history. + <a href="http://support.twitter.com/forums/26810/entries/78525" target="_blank">Learn more</a> + </p> + <div> + <button type="button" class="geo-turn-on btn primary-btn">Turn location on</button> + <button type="button" class="geo-not-now btn-link">Not now</button> + </div> + </li> + </ul> +</div> + </div> <div id="geo-enabled-dropdown"> - <div class="dropdown-menu" tabindex="-1"> + <div class="GeoSearch-dropdownMenu dropdown-menu" tabindex="-1"> <div class="dropdown-caret"> <span class="caret-outer"></span> <span class="caret-inner"></span> </div> <ul> <li class="geo-query-location"> - <input type="text" autocomplete="off" placeholder="Search for a neighborhood or city"> + <input class="GeoSearch-queryInput" type="text" autocomplete="off" placeholder="Search for a neighborhood or city"> <span class="icon generic-search"></span> </li> <li class="geo-dropdown-status"></li> - <li class="dropdown-link geo-turn-off-item geo-focusable"> + <li class="dropdown-link geo-turn-off-item GeoSearch-focusable"> <span class="icon close"></span>Turn off location </li> </ul> </div> </div> - <div id="profile_popup" class="modal-container"> + <div id="profile_popup" class="modal-container ProfilePopupContainer--bellbird"> <div class="close-modal-background-target"></div> <div class="modal modal-small draggable"> <div class="modal-content clearfix"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Profile summary</h3> </div> @@ -2514,18 +3631,19 @@ <span class="spinner-bigger"></span> </div> </div> </div> </div> + <div id="list-membership-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal modal-small draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Your lists</h3> </div> @@ -2539,199 +3657,181 @@ <div id="list-operations-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal modal-medium draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title">Create a new list</h3> </div> <div class="modal-body"> <div class="list-editor"> <div class="field"> - <label for="list-name">List name</label> - <input type="text" class="text" name="name" value="" /> + <label class="t1-label" for="list-name">List name</label> + <input id="list-name" type="text" class="text" name="name" value="" /> </div> - <div class="field" style="display:none"> - <label for="list-link">List link</label> - <span></span> - </div> <hr/> <div class="field"> - <label for="description">Description</label> - <textarea name="description"></textarea> + <label class="t1-label" for="list-description">Description</label> + <textarea id="list-description" name="description"></textarea> <span class="help-text">Under 100 characters, optional</span> </div> <hr/> - <div class="field"> - <label for="mode">Privacy</label> + <fieldset class="field"> + <legend class="t1-legend">Privacy</legend> <div class="options"> - <label for="list-public-radio"> + <label class="t1-label" for="list-public-radio"> <input class="radio" type="radio" name="mode" id="list-public-radio" value="public" checked="checked" /> <b>Public</b> &middot; Anyone can follow this list </label> - <label for="list-private-radio"> + <label class="t1-label" for="list-private-radio"> <input class="radio" type="radio" name="mode" id="list-private-radio" value="private" /> <b>Private</b> &middot; Only you can access this list </label> </div> - </div> + </fieldset> <hr/> <div class="list-editor-save"> <button type="button" class="btn btn-primary update-list-button" data-list-id="">Save list</button> </div> </div> + </div> </div> </div> </div> <div id="activity-popup-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal draggable"> <div class="modal-content clearfix"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"> - <div class="activity-tweet clearfix"></div> + <div class="tweet-loading"> + <div class="spinner-bigger"></div> +</div> + + <div class="activity-tweet modal-tweet clearfix"></div> <div class="loading"> <span class="spinner-bigger"></span> </div> <div class="activity-content clearfix"></div> </div> </div> </div> </div> -<div id="confirm_dialog" class="modal-container"> + <div id="spam_challenge_dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> - <h3 class="modal-title"></h3> + <h3 class="modal-title">Security challenge</h3> </div> <div class="modal-body"> - <p class="modal-body-text"></p> + <p class="modal-body-text"> + <h3 class="modal-text">There appears to be some suspicious activity on your account. In order to continue, please solve the challenge below. +</h3> + </p> + <div id="captcha-challenge-form"></div> </div> <div class="modal-footer"> - <button class="btn js-close" id="confirm_dialog_cancel_button"></button> - <button id="confirm_dialog_submit_button" class="btn primary-btn modal-submit"></button> + <button class="btn js-close" id="confirm_dialog_cancel_button">Cancel</button> + <button type="button" id="recaptcha_submit" class="btn">Submit</button> </div> </div> </div> </div> - <div id="share-via-email-dialog" class="modal-container"> - <div class="close-modal-background-target"></div> - <div class="modal draggable"> - <div class="modal-content"> - <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + + <div id="copy-link-to-tweet-dialog" class="modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal modal-medium draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> - <div class="modal-header"> - <h3 class="modal-title">Share via email</h3> - </div> - <div class="modal-body"> - <div class="share-tweet-container clearfix"> - <form class="share-via-email-form"> - <div class="share-tweet-from"> - <span class="field-label">From:</span> <span class="field-text">Vyki Englert (Twitter)</span> - </div> - <div class="share-tweet-to"> - <label class="field-label to-label" for="share-tweet-emails">To:</label> - <div class="placeholding-input"> - <input class="text-input js-share-tweet-emails js-initial-focus" type="text" name="share-tweet-emails" maxlength="150"> - <label class="placeholder" for="share-tweet-emails">name@example.com, name@example.com</label> + <div class="modal-header"> + <h3 class="modal-title">Copy link to Tweet</h3> </div> - </div> - <div class="reply-to-checkbox-wrapper"> - <div class="reply-to-checkbox"> - <input type="checkbox" class="js-reply-to-user" checked="true"/><p class="legal-text">Include my email address (vyki.englert@gmail.com) so recipients can reply to me.</p> + <div class="modal-body"> + <div class="copy-link-to-tweet-container"> + <p class="copy-link-to-tweet-instructions">The URL of this tweet is below. Copy it to easily share with friends.</p> + <textarea class="link-to-tweet-destination js-initial-focus u-dir" dir="ltr" readonly></textarea> </div> </div> - <div class="comment-box"> - <div class="placeholding-input"> - <textarea class="text-input js-share-comment" type="text" name="share-tweet-comment" maxlength="140"></textarea> - <label class="placeholder" for="share-tweet-comment">Add a comment...</label> - </div> - <i class="sm-reply"></i> - <div class="social-proof"></div> - <div class="modal-tweet"></div> </div> - <button class="btn primary-btn pull-right" type="submit">Send email</button> - </form> + </div> </div> - </div> - </div> - </div> - </div> - <div id="embed-tweet-dialog" class="modal-container"> <div class="close-modal-background-target"></div> <div class="modal modal-medium draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> - <span class="visuallyhidden">Close</span> - </span> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> - <h3 class="modal-title">Embed this Tweet</h3> + <h3 class="modal-title embed-tweet-title">Embed this Tweet</h3> + <h3 class="modal-title embed-video-title">Embed this Video</h3> </div> <div class="modal-body"> <div class="embed-code-container"> - <p>Add this Tweet to your website by copying the code below. <a href="//dev.twitter.com/docs/embedded-tweets">Learn more</a></p> - <form> + <p class="embed-tweet-instructions">Add this Tweet to your website by copying the code below. <a href="//dev.twitter.com/docs/embedded-tweets">Learn more</a></p> + <p class="embed-video-instructions">Add this video to your website by copying the code below. <a href="//dev.twitter.com/docs/embedded-tweets">Learn more</a></p> + <form class="t1-form"> <div class="embed-destination-wrapper"> <div class="embed-overlay embed-overlay-spinner"><div class="embed-overlay-content"></div></div> <div class="embed-overlay embed-overlay-error"> - <p class="embed-overlay-content">Hmm, there was a problem reaching the server. <a href="javascript:;">Try again?</a></p> + <p class="embed-overlay-content">Hmm, there was a problem reaching the server. <button type="button" class="btn-link retry-embed">Try again?</button></p> </div> <textarea class="embed-destination js-initial-focus"></textarea> <div class="embed-options"> <div class="embed-include-parent-tweet"> - <label for="include-parent-tweet"> + <label class="t1-label" for="include-parent-tweet"> <input type="checkbox" id="include-parent-tweet" class="include-parent-tweet" checked> Include parent Tweet </label> </div> <div class="embed-include-card"> - <label for="include-card"> + <label class="t1-label" for="include-card"> <input type="checkbox" id="include-card" class="include-card" checked> Include media </label> </div> </div> @@ -2747,151 +3847,821 @@ </div> </div> -<div id="report-tweet-dialog" class="modal-container report-tweet-dialog"> +<div id="block-dialog" class="modal-container block-dialog"> <div class="close-modal-background-target"></div> <div class="modal modal-medium draggable"> <div class="modal-content"> <button type="button" class="modal-btn modal-close js-close"> - <span class="icon close-medium"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title report-title">Block</h3> + <input type="hidden" id="current-user-id" value="1961102174"> + </div> + <div class="block-section controls"> + <span class="label-head block-user-label"></span> + <p class="block-user-description"><span class="block-user-text"></span> <a href="https://support.twitter.com/articles/117063-blocking-people-on-twitter" target="_blank">Learn more</a> about blocking.</p> + </div> + <div class="modal-body submit-section"> + <div class="clearfix"> + <button class="btn primary-btn caution-btn block-button">Block</button> + <button class="btn cancel-action js-close">Cancel</button> + </div> + </div> + </div> + </div> +</div> + + +<div id="report-dialog" class="modal-container report-dialog"> + <div class="close-modal-background-target"></div> + <div class="modal modal-medium draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title report-title">Report</h3> + <input type="hidden" id="current-user-id" value="1961102174"> + </div> + <div class="new-report-flow-form"> + <iframe id="new-report-flow-frame" class="new-report-flow-report" aria-hidden="true" scrolling="auto"> + </iframe> + <div id="new-report-flow-control" class="modal-body submit-section"> + <div class="clearfix"> + <button class="btn primary-btn new-report-flow-next-button" type="button">Next</button> + <button class="btn new-report-flow-back-button" type="button">Back</button> + <button class="btn primary-btn new-report-flow-done-button" type="button">Done</button> + <button class="btn new-report-flow-close-button" type="button">Close</button> + </div> + </div> + </div> + </div> + </div> +</div> + + <div id="block-list-export-dialog" class="modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal modal-medium draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title export-list-title">Export your list</h3> + <br><br> + <strong class="export-header-title"> + Confirm the accounts that you want to export + + </strong> + <br><br> + <p class='export-header-text'>We will create a .csv file and save it on your computer. You may share the file, and others will be able to import this list of blocked accounts.</p> + </div> + <br> + <div class="modal-body users-section"> + <div class="stream-container" data-cursor=""> + <span class="user-timeline"> + <label class="t1-label" for="include-imported-block"> + <input id="include-imported-block" type="checkbox" value="include_imported_block" checked> + <span id="include-imported-block-text">Include all of my imported blocked accounts</span> + </label> + <ol class="stream-items js-navigable-stream" id="stream-items-id"></ol> + <div class="stream-footer "> + <div class='timeline-end '> + <div class="stream-end"> + <div class="stream-end-inner"> + + <p class="empty-text"> + + + </p> + + + </div> +</div> + + <div class="stream-loading"> + <div class="stream-end-inner"> + <span class="spinner" title="Loading..."></span> + </div> +</div> + + </div> +</div> +<div class="stream-fail-container"> +</div> + + </span> + <span class="processing-bar"> + <span class="spinner" title="Loading..."></span> + </span> + </div> + </div> + <div class="modal-footer"> + <button class="btn primary-btn export-action">Export</button> + <button class="btn primary-btn js-close done-btn">Done</button> + <button class="btn cancel-action js-close">Cancel</button> + </div> + </div> + </div> +</div> + + <div id="block-list-import-dialog" class="modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal modal-medium draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title">Import a list</h3> + <input type="hidden" id="current-user-id" value="1961102174"> + <br> + <strong class="import-header-title"></strong> + <br> + <p class='import-header-text'></p> + </div> + <div class="controls modal-body"> + <div class="file-uploader"> + <div class="file-upload-section"> + <input type="file" name="filename" id="filename" accept=".csv"> + <div class="upload-icon Icon Icon--extraLarge Icon--attachFile"></div> + <div class="uploaded-file">Attach a file to upload</div> + </div> + <div id="error-message"></div> + </div> + <div class="processing-text"> + <span class="spinner" title="Loading..."></span> + </div> + <div class="name-list"> + <div id='imported-user-name-list'> + </div> + </div> + </div> + <div class="modal-footer submit-section"> + <div class="clearfix"> + <button class="btn primary-btn import-button">Preview</button> + <button class="btn primary-btn caution-btn block-button">Block</button> + <button class="btn js-initial-focus cancel-action js-close">Cancel</button> + <button class="btn done-button js-close">Done</button> + </div> + </div> + </div> + </div> +</div> + + <div id="age-gate-dialog" class="modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title">Enter your age</h3> + </div> + + <div class="modal-body"> + <div class="age-gate-container"> + <p>To follow this account, you must meet minimum legal age requirements. Please supply your date of birth.</p> + <div class="age-gate-header"> + <p>Select your date of birth:</p> + </div> + <label class="u-hiddenVisually" for="age-gate-year">Year</label><select class="t1-select" id="age-gate-year"></select> + <label class="u-hiddenVisually" for="age-gate-month">Month</label><select class="t1-select" id="age-gate-month"></select> + <label class="u-hiddenVisually" for="age-gate-day">Day</label><select class="t1-select" id="age-gate-day"></select> + <span class="age-gate-error hidden"> + <span class="icon error-x"></span>Required + </span> + <div class="age-gate-bottom"> + <span class="age-gate-privacy"> + <a href="/privacy">Privacy policy</a> + </span> + </div> + </div> + </div> + + <div class="modal-footer age-gate-footer"> + <button id="age-gate-dialog-submit-button" class="btn primary-btn age-gate-submit">Done</button> + </div> + </div> + </div> +</div> + + <div id="sms-confirmation-dialog" class="modal-container sms-confirmation-dialog"> + <div class="close-modal-background-target"></div> + <div class="modal modal-medium draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div id="sms-confirmation-begin-modal"> + <div class="modal-header"> + <h3 class="modal-title">Enter your phone number</h3> + </div> + <div class="modal-body"> + <div class="alert" id="sms-alert-box"> + <span id="sms-alert-close" class="icon close"></span> + <h4 id="sms-alert-message"></h4> + </div> + <form id="sms-confirmation-begin-form" class="t1-form form-horizontal sms-form"> + <input type="hidden" id="authenticity_token" name="authenticity_token" value="b240e1022b16313221f9d48f641836d6a95b5eea"> + <p>Enter your phone number in the box below, and we'll send you a confirmation code.</p> + <div class="control-group" id="choose-country"> + <label for="device_country_code" class="t1-label control-label">Country/region</label> + <div class="controls"> + <select class="t1-select" id="device_country_code" name="device[country_code]"> + <option value="93" >Afghanistan</option> + <option value="355" >Albania</option> + <option value="213" >Algeria</option> + <option value="1" >American Samoa</option> + <option value="376" >Andorra</option> + <option value="244" >Angola</option> + <option value="1" >Anguilla</option> + <option value="1" >Antigua &amp; Barbuda</option> + <option value="54" >Argentina</option> + <option value="374" >Armenia</option> + <option value="297" >Aruba</option> + <option value="61" >Australia</option> + <option value="43" >Austria</option> + <option value="994" >Azerbaijan</option> + <option value="1" >Bahamas</option> + <option value="973" >Bahrain</option> + <option value="880" >Bangladesh</option> + <option value="1" >Barbados</option> + <option value="375" >Belarus</option> + <option value="32" >Belgium</option> + <option value="501" >Belize</option> + <option value="229" >Benin</option> + <option value="1" >Bermuda</option> + <option value="975" >Bhutan</option> + <option value="591" >Bolivia</option> + <option value="387" >Bosnia &amp; Herzegovina</option> + <option value="267" >Botswana</option> + <option value="55" >Brazil</option> + <option value="1" >British Virgin Islands</option> + <option value="673" >Brunei</option> + <option value="359" >Bulgaria</option> + <option value="226" >Burkina Faso</option> + <option value="257" >Burundi</option> + <option value="855" >Cambodia</option> + <option value="237" >Cameroon</option> + <option value="1" >Canada</option> + <option value="238" >Cape Verde</option> + <option value="599" >Caribbean Netherlands</option> + <option value="1" >Cayman Islands</option> + <option value="236" >Central African Republic</option> + <option value="235" >Chad</option> + <option value="56" >Chile</option> + <option value="86" >China</option> + <option value="61" >Cocos (Keeling) Islands</option> + <option value="57" >Colombia</option> + <option value="269" >Comoros</option> + <option value="242" >Congo - Brazzaville</option> + <option value="243" >Congo - Kinshasa</option> + <option value="682" >Cook Islands</option> + <option value="506" >Costa Rica</option> + <option value="385" >Croatia</option> + <option value="599" >Curaçao</option> + <option value="357" >Cyprus</option> + <option value="420" >Czech Republic</option> + <option value="225" >Côte d’Ivoire</option> + <option value="45" >Denmark</option> + <option value="253" >Djibouti</option> + <option value="1" >Dominica</option> + <option value="1" >Dominican Republic</option> + <option value="593" >Ecuador</option> + <option value="20" >Egypt</option> + <option value="503" >El Salvador</option> + <option value="240" >Equatorial Guinea</option> + <option value="291" >Eritrea</option> + <option value="372" >Estonia</option> + <option value="251" >Ethiopia</option> + <option value="500" >Falkland Islands</option> + <option value="298" >Faroe Islands</option> + <option value="679" >Fiji</option> + <option value="358" >Finland</option> + <option value="33" >France</option> + <option value="594" >French Guiana</option> + <option value="689" >French Polynesia</option> + <option value="241" >Gabon</option> + <option value="220" >Gambia</option> + <option value="995" >Georgia</option> + <option value="49" >Germany</option> + <option value="233" >Ghana</option> + <option value="350" >Gibraltar</option> + <option value="30" >Greece</option> + <option value="299" >Greenland</option> + <option value="1" >Grenada</option> + <option value="590" >Guadeloupe</option> + <option value="1" >Guam</option> + <option value="502" >Guatemala</option> + <option value="44" >Guernsey</option> + <option value="224" >Guinea</option> + <option value="245" >Guinea-Bissau</option> + <option value="592" >Guyana</option> + <option value="509" >Haiti</option> + <option value="504" >Honduras</option> + <option value="852" >Hong Kong SAR China</option> + <option value="36" >Hungary</option> + <option value="354" >Iceland</option> + <option value="91" selected>India</option> + <option value="62" >Indonesia</option> + <option value="870" >Inmarsat</option> + <option value="98" >Iran</option> + <option value="964" >Iraq</option> + <option value="353" >Ireland</option> + <option value="881" >Iridium</option> + <option value="44" >Isle of Man</option> + <option value="972" >Israel</option> + <option value="39" >Italy</option> + <option value="1" >Jamaica</option> + <option value="81" >Japan</option> + <option value="44" >Jersey</option> + <option value="962" >Jordan</option> + <option value="7" >Kazakhstan</option> + <option value="254" >Kenya</option> + <option value="686" >Kiribati</option> + <option value="386" >Kosovo</option> + <option value="965" >Kuwait</option> + <option value="996" >Kyrgyzstan</option> + <option value="856" >Laos</option> + <option value="371" >Latvia</option> + <option value="961" >Lebanon</option> + <option value="266" >Lesotho</option> + <option value="231" >Liberia</option> + <option value="218" >Libya</option> + <option value="423" >Liechtenstein</option> + <option value="370" >Lithuania</option> + <option value="352" >Luxembourg</option> + <option value="853" >Macau SAR China</option> + <option value="389" >Macedonia</option> + <option value="261" >Madagascar</option> + <option value="265" >Malawi</option> + <option value="60" >Malaysia</option> + <option value="960" >Maldives</option> + <option value="223" >Mali</option> + <option value="356" >Malta</option> + <option value="596" >Martinique</option> + <option value="222" >Mauritania</option> + <option value="230" >Mauritius</option> + <option value="262" >Mayotte</option> + <option value="52" >Mexico</option> + <option value="691" >Micronesia</option> + <option value="373" >Moldova</option> + <option value="377" >Monaco</option> + <option value="976" >Mongolia</option> + <option value="382" >Montenegro</option> + <option value="1" >Montserrat</option> + <option value="212" >Morocco</option> + <option value="258" >Mozambique</option> + <option value="95" >Myanmar (Burma)</option> + <option value="264" >Namibia</option> + <option value="674" >Nauru</option> + <option value="977" >Nepal</option> + <option value="31" >Netherlands</option> + <option value="687" >New Caledonia</option> + <option value="64" >New Zealand</option> + <option value="505" >Nicaragua</option> + <option value="227" >Niger</option> + <option value="234" >Nigeria</option> + <option value="672" >Norfolk Island</option> + <option value="1" >Northern Mariana Islands</option> + <option value="47" >Norway</option> + <option value="968" >Oman</option> + <option value="92" >Pakistan</option> + <option value="970" >Palestinian Territories</option> + <option value="507" >Panama</option> + <option value="675" >Papua New Guinea</option> + <option value="595" >Paraguay</option> + <option value="51" >Peru</option> + <option value="63" >Philippines</option> + <option value="48" >Poland</option> + <option value="351" >Portugal</option> + <option value="1" >Puerto Rico</option> + <option value="974" >Qatar</option> + <option value="40" >Romania</option> + <option value="7" >Russia</option> + <option value="250" >Rwanda</option> + <option value="262" >Réunion</option> + <option value="685" >Samoa</option> + <option value="378" >San Marino</option> + <option value="966" >Saudi Arabia</option> + <option value="221" >Senegal</option> + <option value="381" >Serbia</option> + <option value="248" >Seychelles</option> + <option value="232" >Sierra Leone</option> + <option value="65" >Singapore</option> + <option value="1" >Sint Maarten</option> + <option value="421" >Slovakia</option> + <option value="386" >Slovenia</option> + <option value="677" >Solomon Islands</option> + <option value="252" >Somalia</option> + <option value="27" >South Africa</option> + <option value="82" >South Korea</option> + <option value="211" >South Sudan</option> + <option value="34" >Spain</option> + <option value="94" >Sri Lanka</option> + <option value="1" >St. Kitts &amp; Nevis</option> + <option value="1" >St. Lucia</option> + <option value="590" >St. Martin</option> + <option value="1" >St. Vincent &amp; Grenadines</option> + <option value="597" >Suriname</option> + <option value="268" >Swaziland</option> + <option value="46" >Sweden</option> + <option value="41" >Switzerland</option> + <option value="239" >São Tomé &amp; Príncipe</option> + <option value="886" >Taiwan</option> + <option value="992" >Tajikistan</option> + <option value="255" >Tanzania</option> + <option value="66" >Thailand</option> + <option value="882" >Thuraya</option> + <option value="670" >Timor-Leste</option> + <option value="228" >Togo</option> + <option value="676" >Tonga</option> + <option value="1" >Trinidad &amp; Tobago</option> + <option value="216" >Tunisia</option> + <option value="90" >Turkey</option> + <option value="993" >Turkmenistan</option> + <option value="1" >Turks &amp; Caicos Islands</option> + <option value="1" >U.S. Virgin Islands</option> + <option value="256" >Uganda</option> + <option value="380" >Ukraine</option> + <option value="971" >United Arab Emirates</option> + <option value="44" >United Kingdom</option> + <option value="1" >United States</option> + <option value="598" >Uruguay</option> + <option value="998" >Uzbekistan</option> + <option value="678" >Vanuatu</option> + <option value="58" >Venezuela</option> + <option value="84" >Vietnam</option> + <option value="967" >Yemen</option> + <option value="260" >Zambia</option> + <option value="263" >Zimbabwe</option> + <option value="358" >Åland Islands</option> + </select> + </div> + </div> + <div class="control-group"> + <label for="phone_number" class="t1-label control-label">Phone number</label> + <div class="controls"> + <div class="input-prepend"> + <span class="add-on" id="country_code_display">+91</span> + <input type="hidden" id="country_code" name="country_code" value="91"> + <input class="input-medium" name="phone_number" id="phone_number" value=""> + </div> + </div> + </div> + <div> + Standard text message charges may apply depending on your mobile carrier. Your number will not be shown publicly. At first, others will be able to find you by your phone number; however, you can change your privacy settings at any time. + </div> + </form> + </div><!-- modal body --> + <div class="modal-footer"> + <button id="send_verification_pin" class="btn primary-btn" type="submit" disabled>Continue</button> + </div> +</div> + + <div id="sms-confirmation-complete-modal"> + <div class="modal-header"> + <h3 class="modal-title">Check your phone</h3> + </div> + <div class="modal-body"> + <div class="alert" id="sms-alert-box"> + <span id="sms-alert-close" class="icon close"></span> + <h4 id="sms-alert-message"></h4> + </div> + <p>We’ve texted a code to +<span id="phone_number_to_verify"></span>. Enter the code below to confirm your identity and unlock your account.</p> + </div> + <div class="modal-body"> + <form id="sms-confirmation-complete-form" class="t1-form form-horizontal sms-form"> + <input type="hidden" name="device_type" value="phone"> + <input type="hidden" id="authenticity_token" name="authenticity_token" value="b240e1022b16313221f9d48f641836d6a95b5eea"> + <div class="control-group" id="numeric_pin"> + <label for="numeric_pin_raw" class="t1-label control-label numeric-pin-label">Confirmation Code</label> + <div class="controls"> + <input id="numeric_pin_raw"> + </div> + </div> + <div class="form-actions"> + <p><button type="button" class="btn-link" id="resend_code">Resend code</button></p> + </div> + </form> + </div><!-- modal body --> + <div class="modal-footer"> + <button id="device_verify" class="btn primary-btn" type="submit" disabled>Confirm identity</button> + </div> +</div> + </div> + </div> +</div> + + + +<div id="leadgen-confirm-dialog" class="modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title">Confirmation</h3> + </div> + <div class="modal-body"> + <div class="leadgen-card-container"> + <div class="media"> + <iframe + class="cards2-promotion-iframe" + scrolling="no" + frameborder="0" + src=""> + </iframe> + </div> + </div> + <div class="js-macaw-cards-iframe-container" data-card-name="promotion"> + </div> + </div> + </div> + </div> +</div> + + +<div id="auth-webview-dialog" class="AuthWebViewDialog modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--large"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title">Twitter Offers</h3> + </div> + <div class="modal-body"> + <div class="auth-webview-view-container"> + <div class="media"> + <iframe + class="auth-webview-card-iframe js-initial-focus" + scrolling="no" + frameborder="0" + width="590px" + height="500px" + src=""> + </iframe> + </div> + </div> + </div> + </div> + </div> +</div> + + + +<div id="promptbird-modal-prompt" class="modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal"> + + <button type="button" class="modal-btn js-promptDismiss modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> <span class="visuallyhidden">Close</span> </span> + </button> + <div class="modal-content"></div> + </div> +</div> + + + <div id="payment-order-detail-dialog" class="PaymentOrderDialog modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--large"> + <span class="visuallyhidden">Close</span> + </span> </button> <div class="modal-header"> - <h3 class="modal-title report-title">Report Tweet</h3> - <h3 class="modal-title abuse-title">Select form</h3> + <h3 class="modal-title">Buy Now</h3> </div> - <div class="report-form"> - <div class="modal-body report-type-section controls"> - <fieldset class="control-group"> - <label class="radio"> - <input type="radio" value="spam" name="report_type" class="js-initial-focus"> - <span class="label-head">Spam</span> - <p>This Tweet may be spam or from a spam account.</p> - </label> - <label class="radio"> - <input type="radio" value="compromised" name="report_type"> - <span class="label-head">Compromised</span> - <p>This user may not be in control of their account.</p> - </label> - <label class="radio"> - <input type="radio" value="abusive" name="report_type"> - <span class="label-head">Abusive</span> - <p>This Tweet may be in violation of the <a href="https://support.twitter.com/articles/18311-the-twitter-rules" target="_blank">Twitter Rules</a>. In order to file a report you must still choose and complete a form. Select this option to continue.</p> - </label> - </fieldset> + <div class="modal-body"> + <div class="alert"> + <h4>Hmm... Something went wrong. Please try again.</h4> </div> - <div class="modal-body block-section controls"> - <fieldset class="control-group"> - <label class="checkbox"> - <input type="checkbox" name="block_user"> - <span class="label-head block-user-label"></span> - <p><span class="block-user-text"></span> Learn more about what <a href="https://support.twitter.com/articles/117063-blocking-people-on-twitter" target="_blank">blocking</a> means.</p> - </label> - </fieldset> - </div> - <div class="modal-body submit-section"> - <div class="clearfix"> - <button class="btn primary-btn report-tweet-next-button" type="button">Next</button> - <button class="btn primary-btn report-tweet-submit-button" type="button">Submit</button> + <div class="spinner-bigger"></div> + <div class="PaymentOrderDialog-orderDetails"></div> + </div> + </div> + </div> +</div> + + <div id="offers-dialog" class="OffersDialog modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--large"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title">Save Offer</h3> + </div> + <div class="modal-body"> + <div class="offers-view-container"> + <div class="media"> + <iframe + class="offers-card-iframe" + scrolling="no" + frameborder="0" + width="590px" + height="600px" + src=""> + </iframe> </div> </div> </div> - <div class="abuse-form"> - <div class="modal-body"> - <p>Please choose the topic that best defines your issue. Once you complete and submit the form, your report will be filed with Twitter.</p> - <ul class="abuse-links"> + </div> + </div> +</div> - <li><a href="#" class="report-impersonation-link hide-focus" data-abuse-type="impersonation" target="_blank">Impersonation</a></li> - <li><a href="#" class="report-trademark-link" data-abuse-type="trademark" target="_blank">Trademarks</a></li> - <li><a href="#" class="report-harassment-link" data-abuse-type="harassment" target="_blank">Harassment</a></li> - <li><a href="#" class="report-self-harm-link" data-abuse-type="report_self_harm" target="_blank">Report self harm</a></li> - <li><a href="#" class="report-ads-link" data-abuse-type="report_an_ad" target="_blank">Report an ad</a></li> - </ul> + + + <div id="translation-feedback-dialog" class="TranslationFeedbackDialog modal-container"> + <div class="close-modal-background-target"></div> + <div class="modal modal-medium draggable"> + <div class="modal-content"> + <button type="button" class="modal-btn modal-close js-close"> + <span class="Icon Icon--close Icon--medium"> + <span class="visuallyhidden">Close</span> + </span> +</button> + + <div class="modal-header"> + <h3 class="modal-title embed-tweet-title">Translation Feedback</h3> + </div> + <div class="modal-body modal-tweet tweet"></div> + <div class="modal-body TranslationFeedbackDialog-form"> + <div class="TranslationFeedbackDialog-sourceLanguage"> + <label for="source_lang">Translated from</label> + <select class="t1-select" id="source_lang" name="source_lang"> + <option value="ar">Arabic</option> + <option value="en-gb">British English</option> + <option value="bg">Bulgarian</option> + <option value="ca">Catalan</option> + <option value="cs">Czech</option> + <option value="da">Danish</option> + <option value="nl">Dutch</option> + <option value="et">Estonian</option> + <option value="fi">Finnish</option> + <option value="fr">French</option> + <option value="de">German</option> + <option value="el">Greek</option> + <option value="ht">Haitian</option> + <option value="he">Hebrew</option> + <option value="hi">Hindi</option> + <option value="hu">Hungarian</option> + <option value="id">Indonesian</option> + <option value="it">Italian</option> + <option value="ja">Japanese</option> + <option value="ko">Korean</option> + <option value="lv">Latvian</option> + <option value="lt">Lithuanian</option> + <option value="no">Norwegian</option> + <option value="fa">Persian</option> + <option value="pl">Polish</option> + <option value="pt">Portuguese</option> + <option value="ro">Romanian</option> + <option value="ru">Russian</option> + <option value="zh-cn">Simplified Chinese</option> + <option value="sk">Slovak</option> + <option value="sl">Slovenian</option> + <option value="es">Spanish</option> + <option value="sv">Swedish</option> + <option value="th">Thai</option> + <option value="zh-tw">Traditional Chinese</option> + <option value="tr">Turkish</option> + <option value="uk">Ukrainian</option> + <option value="ur">Urdu</option> + <option value="vi">Vietnamese</option> + </select> </div> + + <textarea class="TranslationFeedbackDialog-translationInput js-initial-focus"></textarea> + + Your feedback will be used to improve translation quality. Thank you. </div> + <div class="modal-footer"> + <button class="btn cancel-action js-close">Cancel</button> + <button class="btn primary-btn modal-submit">Submit</button> + </div> </div> </div> </div> +<div id="create-custom-timeline-dialog" class="modal-container"></div> +<div id="edit-custom-timeline-dialog" class="modal-container"></div> +<div id="curate-dialog" class="modal-container"></div> +<div id="media-edit-dialog" class="modal-container"></div> - <div class="hidden"> - <iframe class="tweet-post-iframe" name="tweet-post-iframe"></iframe> + <div class="hidden" id="hidden-content"> + <iframe aria-hidden="true" class="tweet-post-iframe" name="tweet-post-iframe"></iframe> + <iframe aria-hidden="true" class="dm-post-iframe" name="dm-post-iframe"></iframe> <div id="inline-reply-tweetbox"> - <form class="tweet-form " + <form class="t1-form tweet-form + condensed + " method="post" target="tweet-post-iframe" action="//upload.twitter.com/i/tweet/create_with_media.iframe" enctype="multipart/form-data"> - <input type="hidden" name="post_authenticity_token" class="auth-token"> - <input type="hidden" name="iframe_callback" class="iframe-callback"> - <input type="hidden" name="in_reply_to_status_id" class="in-reply-to-status-id"> - <input type="hidden" name="impression_id" class="impression-id"> - <input type="hidden" name="earned" class="earned"> - <img class="inline-reply-user-image avatar size32" src="https://pbs.twimg.com/profile_images/3518892092/39b969d32a10b2437563e246708c8f9d_normal.jpeg" alt=""> + <input type="hidden" value="" name="use_tweet_ui_metrics"> + <img class="inline-reply-user-image avatar size32" src="https://pbs.twimg.com/profile_images/432947308213202944/n_KtAeb0_normal.png" alt=""> <span class="inline-reply-caret"> <span class="caret-inner"></span> </span> <div class="tweet-content"> - <i class="add-photo-icon hidden"></i> + <span class="icon add-photo-icon hidden"></span> - <i class="nav-tweet hidden"></i> + <span class="icon nav-tweet hidden"></span> <span class="tweet-drag-help tweet-drag-photo-here hidden">Drag photo here</span> - <span class="tweet-drag-help tweet-or-drag-photo-here hidden">Or drag photo here</span> - <label class="visuallyhidden" for="tweet-box-template" id="tweet-box-template-label">Tweet text</label> + <span class="visuallyhidden" id="tweet-box-template-label">Tweet text</span> - <div aria-labelledby="tweet-box-template-label" id="tweet-box-template" class="tweet-box rich-editor " contenteditable="true" spellcheck="true" role="textbox" - aria-multiline="true"></div> - <div class="rich-normalizer"></div> + <div aria-labelledby="tweet-box-template-label" name="tweet" id="tweet-box-template" class="tweet-box rich-editor" contenteditable="true" spellcheck="true" role="textbox" + aria-multiline="true" data-placeholder-default="What's happening?" data-placeholder-poll-composer-on="Ask a question..."></div> -<div role="menu" aria-hidden="true" class="dropdown-menu typeahead "> +<div role="listbox" class="dropdown-menu typeahead"> <div aria-hidden="true" class="dropdown-caret"> <div class="caret-outer"></div> <div class="caret-inner"></div> </div> <div role="presentation" class="dropdown-inner js-typeahead-results"> <div role="presentation" class="typeahead-recent-searches"> - <h4 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent Searches</h4><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> <ul role="presentation" class="typeahead-items recent-searches-list"> <li role="presentation" class="typeahead-item typeahead-recent-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> </li> </ul> </div> <div role="presentation" class="typeahead-saved-searches"> - <h4 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved Searches</h4> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> <ul role="presentation" class="typeahead-items saved-searches-list"> <li role="presentation" class="typeahead-item typeahead-saved-search-item"> - <span class="icon close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> - <a role="menuitem" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"><span class="icon generic-search"></span></a> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> </li> </ul> </div> <ul role="presentation" class="typeahead-items typeahead-topics"> <li role="presentation" class="typeahead-item typeahead-topic-item"> - <a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> - <span class="icon generic-search"></span> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> </a> </li> </ul> @@ -2900,106 +4670,339 @@ <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> - <a role="menuitem" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> - <img class="avatar size24" alt=""> + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> <span class="typeahead-user-item-info"> <span class="fullname"></span> - <span class="js-verified hidden"><span class="icon verified"><span class="visuallyhidden">Verified account</span></span></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> <span class="username"><s>@</s><b></b></span> </span> </a> </li> - <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="menuitem" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> </ul> <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> - <li role="presenation" class="typeahead-item typeahead-trend-locations-item"><a role="menuitem" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> </ul> - <ul role="presentation" class="typeahead-items typeahead-context-list"> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> - <li role="presentation" class="typeahead-item typeahead-context-item"><a role="menuitem" class="js-nav" href="" data-ds="context_helper" data-search-query="" tabindex="-1"></a></li> -</ul> + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> + + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> </div> </div> - <textarea class="tweet-box-shadow" name="status"></textarea> + <textarea aria-hidden="true" class="tweet-box-shadow" name="status"></textarea> <div class="thumbnail-container"> - <div class="preview"> - <button type="button" class="dismiss js-dismiss" tabindex="-1"> - <i class="dismiss-white"> + <div class="previews"></div> + <div class="preview template"> + <button type="button" class="preview-overlay dismiss js-dismiss" tabindex="-1"> + <span class="icon dismiss-white"> <span class="visuallyhidden"> Dismiss </span> - </i> + </span> </button> + <button type="button" class="preview-overlay edit js-edit" tabindex="-1"> + Trim +</button> +<div class="preview-overlay duration-badge"></div> + + <div class="play-button"> + <div class="Icon Icon--mediafill"></div> + <div class="Icon Icon--mediaplay"><span class="u-hiddenVisually">Play</span></div> + </div> <span class="filename"></span> </div> - <div class="preview-message">Image will appear as a link</div> + <div class="preview-message"> + <button type="button" class="start-tagging js-open-user-select no-users u-borderUserColorLight u-textUserColor" disabled> + <span class="Icon Icon--me Icon--smallest"></span> + <span class="tagged-users"> + Who's in these photos? + </span> + </button> + </div> </div> + <div class="photo-tagging-container user-select-container hidden"> + <div class="tagging-dropdown dropdown-menu"> + <div class="dropdown-caret center"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> + </div> + <div class="photo-tagging-controls user-select-controls"> + <label class="t1-label"> + <span class="Icon Icon--search nav-search"></span> + <span class="u-hiddenVisually">Users in this photo</span> + <input class="js-initial-focus" type="text" placeholder="Search and tag up to 10 people"> + </label> + </div> + <div class="typeahead-container"> + + +<div role="listbox" class="dropdown-menu typeahead"> + <div aria-hidden="true" class="dropdown-caret"> + <div class="caret-outer"></div> + <div class="caret-inner"></div> </div> + <div role="presentation" class="dropdown-inner js-typeahead-results"> + <div role="presentation" class="typeahead-recent-searches"> + <h3 id="recent-searches-heading" class="typeahead-category-title recent-searches-title">Recent searches</h3><button type="button" tabindex="-1" class="btn-link clear-recent-searches">Clear All</button> + <ul role="presentation" class="typeahead-items recent-searches-list"> - <div class="toolbar js-toolbar"> - <div class="tweet-box-extras"> + <li role="presentation" class="typeahead-item typeahead-recent-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="recent-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="recent_search" tabindex="-1"></a> + </li> + </ul> +</div> - <div class="photo-selector"> - <button aria-hidden="true" class="btn" type="button" tabindex="-1"> - <i class="tweet-camera"></i> - </button> - <div class="image-selector"> - <input type="hidden" name="media_data_empty" class="file-data"> - <label> - <span class="visuallyhidden">Add Photo</span> - <input type="file" name="media_empty" class="file-input js-tooltip" tabindex="-1" title="Add Photo"> - </label> - <div class="swf-container"></div> + <div role="presentation" class="typeahead-saved-searches"> + <h3 id="saved-searches-heading" class="typeahead-category-title saved-searches-title">Saved searches</h3> + <ul role="presentation" class="typeahead-items saved-searches-list"> + + <li role="presentation" class="typeahead-item typeahead-saved-search-item"> + <span class="Icon Icon--close" aria-hidden="true"><span class="visuallyhidden">Remove</span></span> + <a role="option" aria-describedby="saved-searches-heading" class="js-nav" href="" data-search-query="" data-query-source="" data-ds="saved_search" tabindex="-1"></a> + </li> + </ul> +</div> + + <ul role="presentation" class="typeahead-items typeahead-topics"> + + <li role="presentation" class="typeahead-item typeahead-topic-item"> + <a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-ds="topics" tabindex="-1"> + </a> + </li> +</ul> + + + + + +<ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="js-selectable typeahead-accounts-shortcut js-shortcut"><a role="option" class="js-nav" href="" data-search-query="" data-query-source="typeahead_click" data-shortcut="true" data-ds="account_search"></a></li> +</ul> + + <ul role="presentation" class="typeahead-items typeahead-trend-locations-list"> + + <li role="presentation" class="typeahead-item typeahead-trend-locations-item"><a role="option" class="js-nav" href="" data-ds="trend_location" data-search-query="" tabindex="-1"></a></li> +</ul> + <div role="presentation" class="typeahead-user-select"> + <div role="presentation" class="typeahead-empty-suggestions"> + Suggested users + </div> + <ul role="presentation" class="typeahead-items typeahead-selected js-typeahead-selected"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-selected-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-selected-end"></li> + </ul> + + <ul role="presentation" class="typeahead-items typeahead-accounts js-typeahead-accounts"> + + <li role="presentation" data-user-id="" data-user-screenname="" data-remote="true" data-score="" class="typeahead-item typeahead-account-item js-selectable"> + + <a role="option" class="js-nav" data-query-source="typeahead_click" data-search-query="" data-ds="account"> + <img class="avatar size32" alt=""> + <span class="typeahead-user-item-info"> + <span class="select-status deselect-user js-deselect-user Icon Icon--check"></span> + <span class="select-status select-disabled Icon Icon--unfollow"></span> + <span class="fullname"></span> + <span class="js-verified hidden"><span class="Icon Icon--verified Icon--small"> + <span class="u-hiddenVisually">Verified account</span> +</span></span> + <span class="username"><s>@</s><b></b></span> + </span> + </a> + </li> + <li role="presentation" class="typeahead-accounts-end"></li> + </ul> +</div> + + <div role="presentation" class="typeahead-dm-conversations"> + <ul role="presentation" class="typeahead-items typeahead-dm-conversation-items"> + <li role="presentation" class="typeahead-item typeahead-dm-conversation-item"> + <a role="option" tabindex="-1"></a> + </li> + </ul> +</div> + </div> +</div> + + </div> </div> </div> - <div class="geo-picker"> - <button class="btn geo-picker-btn js-tooltip" type="button" tabindex="-1" title="Add location"> - <i class="tweet-geo"><span class="visuallyhidden">Add location</span></i> <span class="caret"></span> - </button> + <div class="CardComposer"> + </div> + + </div> + + <div class="toolbar"> + <div class="tweet-box-extras"> + + <span class="TweetBox-mediaPicker"><div class="photo-selector"> + <button aria-hidden="true" class="btn icon-btn " type="button" tabindex="-1" data-original-title="Add Photo"> + <span class="tweet-camera Icon Icon--camera"></span> + <span class="text add-photo-label u-hideMediumViewport"> + Add photo + </span> + </button> + <div class="image-selector"> + <input type="hidden" name="media_data_empty" class="file-data"> + <div class="multi-photo-data-container hidden"> + </div> + <label class="t1-label"> + <span class="visuallyhidden"> + Add photo + </span> + <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png" + class="file-input " data-original-title="Add photo"> + </label> + <div class="swf-container"></div> + </div> +</div> +</span> + + <div class="geo-picker"> + <button class="btn js-geo-search-trigger geo-picker-btn icon-btn " type="button"> + <span class="Icon Icon--geo"></span> + <span class="text geo-status"> + Add location + </span> + </button> <span class="dropdown-container"></span> - <span class="geo-status"></span> <input type="hidden" name="place_id"> </div> + + + <div class="TweetBoxUploadProgress"> + Uploading + <div class="TweetBoxUploadProgress-bar"> + <div class="TweetBoxUploadProgress-barPosition"></div> + </div> +</div> </div> <div class="tweet-button"> <span class="spinner"></span> <span class="tweet-counter">140</span> - <button class="btn primary-btn tweet-action disabled js-tweet-btn" type="button"> + <button class="btn primary-btn tweet-action disabled tweet-btn js-tweet-btn" type="button" disabled> <span class="button-text tweeting-text"> + <span class="Icon Icon--tweet"></span> Tweet </span> <span class="button-text messaging-text"> + <span class="Icon Icon--dm Icon--small"></span> Send message </span> </button> + </div> </div> </form> </div> </div> + <div id="spoonbill-outer"></div> </body> </html> - <input type="hidden" id="init-data" class="json-data" value="{&quot;profileHoversEnabled&quot;:false,&quot;noNewDedup&quot;:false,&quot;dmTopNavEnabled&quot;:true,&quot;baseFoucClass&quot;:&quot;swift-loading&quot;,&quot;bodyFoucClassNames&quot;:&quot;swift-loading&quot;,&quot;macawSwift&quot;:true,&quot;assetsBasePath&quot;:&quot;https:\/\/abs.twimg.com\/a\/1383847355\/&quot;,&quot;environment&quot;:&quot;production&quot;,&quot;sandboxes&quot;:{&quot;jsonp&quot;:&quot;https:\/\/abs.twimg.com\/a\/1383847355\/jsonp_sandbox.html&quot;,&quot;detailsPane&quot;:&quot;https:\/\/abs.twimg.com\/a\/1383847355\/details_pane_content_sandbox.html&quot;},&quot;formAuthenticityToken&quot;:&quot;c14730383bfd2c98a5e4d26fe3c24e45dbd6de86&quot;,&quot;loggedIn&quot;:true,&quot;screenName&quot;:&quot;vyki_e&quot;,&quot;userId&quot;:&quot;1087064150&quot;,&quot;scribeBufferSize&quot;:3,&quot;pageName&quot;:&quot;permalink&quot;,&quot;sectionName&quot;:&quot;permalink&quot;,&quot;scribeParameters&quot;:{&quot;lang&quot;:&quot;en&quot;},&quot;internalReferer&quot;:null,&quot;experiments&quot;:{},&quot;geoEnabled&quot;:true,&quot;typeaheadData&quot;:{&quot;accounts&quot;:{&quot;localQueriesEnabled&quot;:true,&quot;remoteQueriesEnabled&quot;:true,&quot;enabled&quot;:true,&quot;limit&quot;:6},&quot;trendLocations&quot;:{&quot;enabled&quot;:true},&quot;savedSearches&quot;:{&quot;enabled&quot;:true,&quot;items&quot;:[{&quot;name&quot;:&quot;#goodgirlsgonegeek&quot;,&quot;id_str&quot;:&quot;267341944&quot;,&quot;search_query_source&quot;:&quot;saved_search_click&quot;,&quot;query&quot;:&quot;#goodgirlsgonegeek&quot;,&quot;saved_search_path&quot;:&quot;\/search?q=%23goodgirlsgonegeek&amp;src=savs&quot;,&quot;id&quot;:267341944},{&quot;name&quot;:&quot;#bikela&quot;,&quot;id_str&quot;:&quot;300126290&quot;,&quot;search_query_source&quot;:&quot;saved_search_click&quot;,&quot;query&quot;:&quot;#bikela&quot;,&quot;saved_search_path&quot;:&quot;\/search?q=%23bikela&amp;src=savs&quot;,&quot;id&quot;:300126290}]},&quot;dmAccounts&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:true,&quot;onlyDMable&quot;:true,&quot;remoteQueriesEnabled&quot;:true},&quot;topics&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:false,&quot;prefetchLimit&quot;:500,&quot;remoteQueriesEnabled&quot;:true,&quot;limit&quot;:4},&quot;recentSearches&quot;:{&quot;enabled&quot;:true},&quot;contextHelpers&quot;:{&quot;enabled&quot;:false,&quot;page_name&quot;:&quot;permalink&quot;,&quot;section_name&quot;:&quot;permalink&quot;,&quot;screen_name&quot;:&quot;vyki_e&quot;},&quot;hashtags&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:false,&quot;prefetchLimit&quot;:500,&quot;remoteQueriesEnabled&quot;:true},&quot;showSearchAccountSocialContext&quot;:true,&quot;showTypeaheadTopicSocialContext&quot;:false,&quot;showDebugInfo&quot;:false,&quot;useThrottle&quot;:true,&quot;accountsOnTop&quot;:false,&quot;remoteDebounceInterval&quot;:300,&quot;remoteThrottleInterval&quot;:300,&quot;tweetContextEnabled&quot;:false,&quot;fullNameMatchingInCompose&quot;:true},&quot;pushStatePageLimit&quot;:500000,&quot;routes&quot;:{&quot;profile&quot;:&quot;\/vyki_e&quot;},&quot;pushState&quot;:true,&quot;viewContainer&quot;:&quot;#page-container&quot;,&quot;asyncSocialProof&quot;:true,&quot;dragAndDropPhotoUpload&quot;:true,&quot;href&quot;:&quot;\/vyki_e\/status\/363116819147538433&quot;,&quot;searchPathWithQuery&quot;:&quot;\/search?q=query&amp;src=typd&quot;,&quot;timelineCardsGallery&quot;:true,&quot;mediaGrid&quot;:true,&quot;deciders&quot;:{&quot;oembed_use_macaw_syndication&quot;:true,&quot;preserve_scroll_position&quot;:false,&quot;pushState&quot;:true,&quot;disable_profile_popup&quot;:false,&quot;hqImageUploads&quot;:false,&quot;mqImageUploads&quot;:false},&quot;permalinkCardsGallery&quot;:false,&quot;notifications_dm&quot;:true,&quot;notifications_spoonbill&quot;:false,&quot;notifications_timeline&quot;:false,&quot;notifications_dm_poll_scale&quot;:60,&quot;lifelineAlertEnabled&quot;:false,&quot;freezeDashboard&quot;:false,&quot;rosetta&quot;:false,&quot;deviceEnabled&quot;:false,&quot;hasPushDevice&quot;:true,&quot;smsDeviceVerified&quot;:false,&quot;inResearchGroup&quot;:false,&quot;tweetId&quot;:&quot;363116819147538433&quot;,&quot;endpoint&quot;:&quot;\/i\/vyki_e\/conversation\/363116819147538433&quot;,&quot;permalinkCardsGallery&quot;:true,&quot;showRelatedTweets&quot;:true,&quot;showHighlinePermalink&quot;:false,&quot;initialState&quot;:{&quot;title&quot;:&quot;Twitter \/ vyki_e: I&#39;m a sucker for pledges. ...&quot;,&quot;section&quot;:null,&quot;module&quot;:&quot;app\/pages\/permalink&quot;,&quot;cache_ttl&quot;:300,&quot;body_class_names&quot;:&quot;t1 logged-in user-style-vyki_e&quot;,&quot;doc_class_names&quot;:&quot;route-permalink&quot;,&quot;route_name&quot;:&quot;permalink&quot;,&quot;page_container_class_names&quot;:&quot;wrapper wrapper-permalink white&quot;,&quot;ttft_navigation&quot;:false}}"> + <input type="hidden" id="init-data" class="json-data" value="{&quot;profileHoversEnabled&quot;:true,&quot;permalinkOverlayEnabled&quot;:true,&quot;hasKenburnEffectOnSingleImage&quot;:false,&quot;fav_heart_icon&quot;:false,&quot;baseFoucClass&quot;:&quot;swift-loading&quot;,&quot;bodyFoucClassNames&quot;:&quot;swift-loading&quot;,&quot;macawSwift&quot;:true,&quot;assetsBasePath&quot;:&quot;https:\/\/abs.twimg.com\/a\/1442456431\/&quot;,&quot;assetVersionKey&quot;:&quot;6ed2d4&quot;,&quot;environment&quot;:&quot;production&quot;,&quot;formAuthenticityToken&quot;:&quot;b240e1022b16313221f9d48f641836d6a95b5eea&quot;,&quot;loggedIn&quot;:true,&quot;screenName&quot;:&quot;techAPJ&quot;,&quot;fullName&quot;:&quot;Arpit Jalan&quot;,&quot;userId&quot;:&quot;1961102174&quot;,&quot;allowAdsPersonalization&quot;:true,&quot;scribeBufferSize&quot;:3,&quot;pageName&quot;:&quot;permalink&quot;,&quot;sectionName&quot;:&quot;permalink&quot;,&quot;scribeParameters&quot;:{&quot;lang&quot;:&quot;en&quot;},&quot;recaptchaApiUrl&quot;:&quot;https:\/\/www.google.com\/recaptcha\/api\/js\/recaptcha_ajax.js&quot;,&quot;internalReferer&quot;:null,&quot;geoEnabled&quot;:false,&quot;typeaheadData&quot;:{&quot;accounts&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:true,&quot;remoteQueriesEnabled&quot;:true,&quot;limit&quot;:6},&quot;trendLocations&quot;:{&quot;enabled&quot;:true},&quot;dmConversations&quot;:{&quot;enabled&quot;:true},&quot;savedSearches&quot;:{&quot;enabled&quot;:true,&quot;items&quot;:[]},&quot;dmAccounts&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:true,&quot;remoteQueriesEnabled&quot;:true,&quot;onlyDMable&quot;:true},&quot;mediaTagAccounts&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:true,&quot;remoteQueriesEnabled&quot;:true,&quot;onlyShowUsersWithCanMediaTag&quot;:false,&quot;currentUserId&quot;:1961102174},&quot;selectedUsers&quot;:{&quot;enabled&quot;:true},&quot;prefillUsers&quot;:{&quot;enabled&quot;:true},&quot;topics&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:false,&quot;remoteQueriesEnabled&quot;:true,&quot;prefetchLimit&quot;:500,&quot;limit&quot;:4},&quot;concierge&quot;:{&quot;enabled&quot;:false,&quot;localQueriesEnabled&quot;:false,&quot;remoteQueriesEnabled&quot;:false,&quot;prefetchLimit&quot;:500,&quot;limit&quot;:6},&quot;recentSearches&quot;:{&quot;enabled&quot;:true},&quot;hashtags&quot;:{&quot;enabled&quot;:true,&quot;localQueriesEnabled&quot;:false,&quot;remoteQueriesEnabled&quot;:true,&quot;prefetchLimit&quot;:500},&quot;useIndexedDB&quot;:false,&quot;showSearchAccountSocialContext&quot;:true,&quot;showTypeaheadTopicSocialContext&quot;:false,&quot;showDebugInfo&quot;:false,&quot;useThrottle&quot;:true,&quot;accountsOnTop&quot;:false,&quot;remoteDebounceInterval&quot;:300,&quot;remoteThrottleInterval&quot;:300,&quot;tweetContextEnabled&quot;:false,&quot;fullNameMatchingInCompose&quot;:true,&quot;topicsWithFiltersEnabled&quot;:true},&quot;dm&quot;:{&quot;participant_max&quot;:50,&quot;theme&quot;:&quot;seamful&quot;,&quot;poll_options&quot;:{&quot;foreground_poll_interval&quot;:3000,&quot;burst_poll_interval&quot;:3000,&quot;burst_poll_duration&quot;:300000,&quot;max_poll_interval&quot;:60000},&quot;notifications&quot;:true},&quot;whitelistedVideoUser&quot;:false,&quot;pushStatePageLimit&quot;:500000,&quot;routes&quot;:{&quot;profile&quot;:&quot;\/techAPJ&quot;},&quot;pushState&quot;:true,&quot;viewContainer&quot;:&quot;#page-container&quot;,&quot;dragAndDropPhotoUpload&quot;:true,&quot;href&quot;:&quot;\/vyki_e\/status\/363116819147538433&quot;,&quot;searchPathWithQuery&quot;:&quot;\/search?q=query&amp;src=typd&quot;,&quot;timelineCardsGallery&quot;:true,&quot;deciders&quot;:{&quot;favorite_to_like&quot;:false,&quot;bulkUnfollowEnabled&quot;:true,&quot;custom_timeline_curation&quot;:false,&quot;disable_profile_popup&quot;:false,&quot;native_notifications&quot;:true,&quot;dm_group_avatars&quot;:false,&quot;dm_max_characters&quot;:10000,&quot;dm_polling_frequency_in_seconds&quot;:3000,&quot;enable_media_tag_prefetch&quot;:true,&quot;enableMacawNymizerConversionLanding&quot;:false,&quot;geoStructuredLocationEnabled&quot;:true,&quot;hqImageUploads&quot;:false,&quot;largeHeaderImageUpload&quot;:true,&quot;mqImageUploads&quot;:false,&quot;partnerIdSyncEnabled&quot;:true,&quot;photoSruGif&quot;:false,&quot;progressive_resize_enabled&quot;:true,&quot;promoted_video_logging_enabled&quot;:true,&quot;pushState&quot;:true,&quot;scribeActionQueue&quot;:false,&quot;scribeReducedActionQueue&quot;:true,&quot;smartInfiniteScroll&quot;:false,&quot;useHtml5Webcam&quot;:true,&quot;web_perftown_stats&quot;:true,&quot;web_perftown_ttft&quot;:true,&quot;web_upload_direct&quot;:true,&quot;web_upload_video&quot;:false,&quot;upload_video_size&quot;:500,&quot;dynamicVideoAdsEnabled&quot;:true,&quot;internationalShippingEnabled&quot;:true,&quot;useV2EndpointsEnabled&quot;:true,&quot;autoplayMediaInTimeline&quot;:true,&quot;useVmapVariants&quot;:false},&quot;experiments&quot;:{},&quot;permalinkCardsGallery&quot;:false,&quot;toasts_dm&quot;:true,&quot;toasts_spoonbill&quot;:true,&quot;toasts_timeline&quot;:false,&quot;toasts_dm_poll_scale&quot;:60,&quot;uploadDomain&quot;:&quot;upload.twitter.com&quot;,&quot;promptbirdData&quot;:{&quot;promptbirdEnabled&quot;:false,&quot;immediateTriggers&quot;:[&quot;PullToRefresh&quot;,&quot;Navigate&quot;],&quot;format&quot;:null},&quot;freezeDashboard&quot;:false,&quot;deviceEnabled&quot;:true,&quot;hasPushDevice&quot;:true,&quot;smsDeviceVerified&quot;:false,&quot;inResearchGroup&quot;:false,&quot;skipAutoSignupDialog&quot;:false,&quot;shouldReplaceSignupWithLogin&quot;:false,&quot;tweetId&quot;:&quot;363116819147538433&quot;,&quot;profile_id&quot;:1087064150,&quot;endpoint&quot;:&quot;\/i\/vyki_e\/conversation\/363116819147538433&quot;,&quot;overlayCapable&quot;:false,&quot;permalinkCardsGallery&quot;:true,&quot;finagleTraceId&quot;:&quot;10f618439c9bceb2&quot;,&quot;isThreaded&quot;:true,&quot;autoplay&quot;:false,&quot;trendsCacheKey&quot;:&quot;4b5baa2ef2&quot;,&quot;decider_personalized_trends&quot;:true,&quot;trendsEndpoint&quot;:&quot;\/i\/trends&quot;,&quot;initialState&quot;:{&quot;title&quot;:&quot;Vyki Englert on Twitter: \&quot;I&#39;m a sucker for pledges. @Peers Pledge #sharingeconomy http:\/\/t.co\/T4Sc47KAzh\&quot;&quot;,&quot;section&quot;:null,&quot;module&quot;:&quot;app\/pages\/permalink&quot;,&quot;cache_ttl&quot;:300,&quot;body_class_names&quot;:&quot;three-col logged-in user-style-vyki_e&quot;,&quot;doc_class_names&quot;:&quot;route-permalink&quot;,&quot;route_name&quot;:&quot;permalink&quot;,&quot;page_container_class_names&quot;:&quot;AppContent wrapper wrapper-permalink&quot;,&quot;ttft_navigation&quot;:false}}"> + + + <input type="hidden" class="swift-boot-module" value="app/pages/permalink"> <input type="hidden" id="swift-module-path" value="https://abs.twimg.com/c/swift/en"> - <script src="https://abs.twimg.com/c/swift/en/init.60642a289b5798dceb687c1681a7ae951106fb23.js" async></script> + <script src="https://abs.twimg.com/c/swift/en/init.4b7a5350f1179235d91ef6d617f3330c882a2303.js" async></script>