@@ -868,6 +868,55 @@ button.close {

   border-radius: 3px;

 }

+.btn-primary {

+  color: #ffffff;

+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

+  background-color: #006dcc;

+  background-image: linear-gradient(to bottom, #0088cc, #0044cc);

+  background-repeat: repeat-x;

+  border-color: #0044cc #0044cc #002a80;

+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);

+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

+}

+

+.btn-primary:hover,

+.btn-primary:focus,

+.btn-primary:active,

+.btn-primary.active,

+.btn-primary.disabled,

+.btn-primary[disabled] {

+  color: #ffffff;

+  background-color: #0044cc;

+}

+

+.btn-primary:active,

+.btn-primary.active {

+  background-color: #003399 \9;

+}

+

+.btn-info {

+  color: #ffffff;

+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

+  background-color: #49afcd;

+  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);

+  background-repeat: repeat-x;

+  border-color: #2f96b4 #2f96b4 #1f6377;

+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);

+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

+}

+

+.btn-info:hover,

+.btn-info:focus,

+.btn-info:active,

+.btn-info.active,

+.btn-info.disabled,

+.btn-info[disabled] {

+  color: #ffffff;

+  background-color: #2f96b4;

+}

+

 /* alert */

 .alert {

   padding: 8px 35px 8px 14px;

@@ -1555,12 +1604,12 @@ button.close {

 .branch-select-left-container {

   float:left;

-  width:30%;

+  width:20%;

 }

 .branch-select-right-container {

   float:left;

-  width:70%;

+  width:80%;

 }

 .git-url-container {

@@ -1577,6 +1626,12 @@ button.close {

   border-radius:0;

 }

+.git-url-container input {

+  width:550px;

+  padding:4px 0 5px 5px;

+  border:1px solid #d8d8d8;

+}

+

 .page-path-container {

   float:left;

 }

@@ -1,10 +1,13 @@

 <%

   my $api = gitprep_api;

+  my $user = param('user');

+  my $project = param('project');

   my $display = stash('display') || '';

   my $rev = stash('rev');

   $rev = '' unless defined $rev;

   my $branches = stash('branches');

+  my $ssh_rep_url = stash('ssh_rep_url');

   my $logined = $api->logined;

@@ -24,6 +27,7 @@

     $title = 'branch';

     $rev_short = $rev;

   }

+  

 %>

 %= javascript begin

@@ -91,6 +95,35 @@

     $('#rev-close').on('click', function () {

       $('#rev-popup').css('display', 'none');

     });

+    

+    

+    // Repository URL buttons

+    var http_rep_url = '<%= url_for("$user/$project.git")->to_abs %>';

+    

+    var logined = <%= $logined ? 'true' : 'false' %>;

+    var ssh_rep_url = '<%= $ssh_rep_url %>';

+    

+    // Click HTTP button

+    $('#btn_http').on('click', function () {

+      $('#rep_url').val(http_rep_url);

+      $('#btn_http').addClass('btn-info');

+      $('#btn_ssh').removeClass('btn-info');

+    });

+

+    // Click SSH button

+    $('#btn_ssh').on('click', function () {

+      $('#rep_url').val(ssh_rep_url);

+      $('#btn_http').removeClass('btn-info');

+      $('#btn_ssh').addClass('btn-info');

+    });

+

+    // Initialize

+    if (logined) {

+      $('#btn_ssh').trigger('click');

+    }

+    else {

+      $('#btn_http').trigger('click');

+    }

   });

 % end

@@ -103,14 +136,14 @@

   <div class="branch-select-right-container">

     % if ($display eq 'tree_top') {

       <ul class="git-url-container">

-        <li>

-          <button class="btn btn-small" id="btn_http"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>

-        </li>

         % if ($logined) {

           <li>

-            <button class="btn btn-small" id="btn_ssh">SSH</button>

+            <button class="btn btn-small btn-info" id="btn_ssh">SSH</button>

           </li>

         % }

+        <li>

+          <button class="btn btn-small <%= !$logined ? 'btn-info' : '' %>" id="btn_http"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>

+        </li>

         <li>

           <input id="rep_url" type="text">

         </li>

@@ -79,47 +79,6 @@

   layout 'common', title => "$user/$project";

 %>

-

-  %= javascript begin

-    $(document).ready(function () {

-      var http_rep_url = '<%= url_for("$user/$project.git")->to_abs %>';

-      % my $rep = $git->rep($user, $project);

-      % my $ssh_port = config->{basic}{ssh_port} || '';

-      

-      var logined = <%= $logined ? 'true' : 'false' %>;

-      var ssh_rep_url = '';

-      if (logined) {

-        ssh_rep_url = '<%= $ssh_rep_url %>';

-      }

-      

-      // Click HTTP button

-      $('#btn_http').on('click', function () {

-        $('#rep_url').val(http_rep_url);

-        $('#access').text('Read-write');

-      });

-

-      // Click SSH(old) button

-      $('#btn_ssh').on('click', function () {

-        $('#rep_url').val(ssh_rep_url);

-        $('#access').text('Read-write');

-      });

-

-      // Initialize

-      $('#btn_http').trigger('click');

-      

-      // URL is automatically selected

-      var url_selected_count = 0;

-      $('#rep_url').on('mouseup', function () {

-        if (url_selected_count == 0) {

-          $(this).select();

-        }

-        url_selected_count += 1;

-      });

-      $('#rep_url').on('blur', function () {

-        url_selected_count = 0;

-      });

-    });

-  % end

   %= include '/include/header';

@@ -204,7 +163,7 @@

       <div style="margin-bottom:5px;">

         % my $display = defined $dir && length $dir ? 'tree' : 'tree_top';

-        %= include '/include/branch_select', display => $display, Path => $dir;

+        %= include '/include/branch_select', display => $display, Path => $dir, ssh_rep_url => $ssh_rep_url;

       </div>

       <div style="margin-bottom:30px">